Instantly share code, notes, and snippets.
Last active
September 21, 2024 17:00
-
Star
1
(1)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save rvllvd/6934031034603fede33fec9e5504627a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Mastodon Bird UI by @[email protected] | |
| 1.8.3 */ | |
| /* CSS variables */ | |
| :root { | |
| /* Brand colors */ | |
| --color-brand-twitter: #1d9bf0; | |
| --color-brand-twitter-bg: black; | |
| --color-brand-twitter-dim: #8b98a5; | |
| --color-brand-twitter-mud: black; | |
| --color-brand-twitter-dark: black; | |
| --color-brand-twitter-threaded-line: #425364; | |
| --color-brand-mastodon: black; | |
| --color-brand-mastodon-links: #858afa; | |
| --color-brand-mastodon-bg: black; | |
| --color-brand-mastodon-dim: #717c9b; | |
| --color-brand-mastodon-mud: black; | |
| --color-brand-mastodon-dark: black; | |
| --color-brand-mastodon-threaded-line: #434264; | |
| --color-brand-mastodon-text-light: #8493a7; | |
| /* Colors */ | |
| /* Note: Remember to search for the DIM hex | |
| and replace it inside the SVG icons if you decide to change it */ | |
| /* --color-bg: var(--color-brand-mastodon-bg); */ | |
| --color-bg: black; | |
| --color-bg-75: black; | |
| --color-fg: #fff; | |
| --color-border: #1f0f31 !important; | |
| --color-dim: var(--color-brand-mastodon-dim); | |
| --color-accent: var(--color-brand-mastodon-links); | |
| --color-accent-dark: var(--color-brand-mastodon); | |
| --color-accent-dark-50: #595aff80; | |
| --color-green: #00ba7c; | |
| --color-red: #f91880; | |
| --color-red-75: #f91880bf; | |
| --color-yellow: #ffac33; | |
| --color-light-shade: #ffffff05; | |
| --color-focusable-toot: #ffffff09; | |
| --color-light-text: #f7f9f9; | |
| --color-mud: black; | |
| --color-arsenic: #393f4f; | |
| --color-black-coral: #5a5371; | |
| --color-profile-button-hover: #f1eff41a; | |
| --color-column-link-hover: #f7f7f91a; | |
| --color-modal-overlay: #5b708366; | |
| --color-dark: black; | |
| --color-thread-line: var(--color-brand-mastodon-threaded-line); | |
| --color-topaz: #dadaf3; | |
| --color-light-purple: #9baec8; | |
| --color-lighter-purple: #a5b8d3; | |
| --color-dark-electric-blue: #576078; | |
| --color-button-text: #f7f9f9; | |
| --color-ghost-button-text: var(--color-button-text); | |
| --color-verified: #79bd9a; | |
| --color-destructive: #df405a; | |
| --color-light-fuchsia-pink: #ff8cfd; | |
| --color-hashtag: var(--color-accent); | |
| --color-mention: var(--color-accent); | |
| --color-link: var(--color-accent); | |
| --color-bg-compose-form: black; | |
| --color-bg-compose-form-focus: black; | |
| /* In the original UI this color is lighten($ui-base-color, 12%) */ | |
| --color-outer-space: #42485a; | |
| /* Font related */ | |
| --font-size: 15px; | |
| --font-size-smaller: 13px; | |
| --font-size-12: 12px; | |
| --font-size-mid: 14px; | |
| --font-size-bigger: 17px; | |
| --font-size-title: 19px; | |
| --font-size-heading: 20px; | |
| --font-weight-regular: 400; | |
| --font-weight-semibold: 500; | |
| --font-weight-bold: 700; | |
| --line-height: 22px; | |
| --line-height-mid: 20px; | |
| /* Grids and gaps */ | |
| --gap-default: 12px; | |
| --gap-column-link: 12px; | |
| /* Element sizes */ | |
| --size-avatar: 48px; | |
| --size-avatar-small: 32px; | |
| --size-icon-notification: 30px; | |
| --width-main-panel: 600px; | |
| --width-side-panel: 260px; | |
| --border-radius: 16px; | |
| --border-radius-badges: 4px; | |
| --badges-distance-from-edge: 12px; | |
| /* Misc */ | |
| --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3); | |
| --active-header-radial-gradient: radial-gradient(ellipse, rgba(99, 100, 255, .23) 0, rgba(99, 100, 255, 0) 60%); | |
| --compose-form-linear-gradient: linear-gradient(180deg, rgba(30, 32, 40, 1) 0%, rgba(30, 32, 40, 1) 53%, rgba(30, 32, 40, 0.8141631652661064) 76%, rgba(30, 32, 40, 0.7077205882352942) 87%, rgba(30, 32, 40, 0.458420868347339) 97%, rgba(30, 32, 40, 0) 100%); | |
| /* Logo */ | |
| --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'); | |
| /* Icons */ | |
| --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" 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="%23717c9b" 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="%23717c9b" 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 xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%2300ba7c' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23f7f9f9' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-wrapper: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 136 136'%3E%3Cpath fill='%2300ba7c' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23f7f9f9" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23f7f9f9" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A'); | |
| --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" 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="%23f7f9f9" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23f7f9f9" 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="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9"%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-star-active: '\f005'; | |
| --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='%23f7f9f9' 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='%23f7f9f9'%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="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" 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="%23f7f9f9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23717c9b" 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="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%23f7f9f9'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E"); | |
| --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%23f7f9f9' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%23f7f9f9' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E"); | |
| --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23717c9b" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); | |
| --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); | |
| --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); | |
| /* Profile icons */ | |
| --icon-github: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"%3E%3Cpath d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-youtube: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"%3E%3Cpath d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"%3E%3C/path%3E%3Cpolygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"%3E%3C/polygon%3E%3C/svg%3E'); | |
| --icon-link: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"%3E%3Cpath d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"%3E%3C/path%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-twitter: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"%3E%3Cpath fill="%23717c9b" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/%3E%3C/svg%3E'); | |
| --icon-twitch: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"%3E%3Cpath d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-patreon: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPatreon icon%3C/title%3E%3Cpath d='M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003'/%3E%3C/svg%3E"); | |
| --icon-threads: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='18' fill='%23717c9b' width='18' viewBox='0 0 448 512'%3E%3Cpath d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z'/%3E%3C/svg%3E"); | |
| --icon-bluesky: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='18' height='18'%3E%3Cpath fill='%23717c9b' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); | |
| --icon-nostr: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 860 847'%3E%3Cpath d='M454.5 1.1c-67.6 10.3-115.8 27.2-160.4 56.4-16.5 10.9-19.3 12-29.1 12-9.5 0-14.6-2-20.8-7.9-5.5-5.1-7.5-9.9-9.2-22-1.9-13.1-6.8-20.4-17.3-25.7l-5.8-3-92.2.3c-68.2.3-93.1.7-95.6 1.6-4.5 1.5-11.4 8.3-15.2 14.8L6 32.8l.2 391.8.3 391.9 2.7 5c1.4 2.8 4.6 6.9 7.1 9.2 8.7 8 .9 7.3 96 8 88.7.6 108.3 0 116.7-3.3 5.9-2.4 13.5-11.7 14.9-18.4 1.4-6.4 1.4-67.7.1-103.3-3-78.6-15.8-158-48.1-297.2-21.2-91.3-27.3-126.1-28.6-162.6-1.5-43.2 7-69.1 28.8-87.6 6.9-5.8 19.7-12.8 29.7-16.2 14.8-5 57.5-12 96.2-15.7 21-2.1 84.2-2.4 104.4-.6 25.3 2.3 54.4 8.4 76 15.9 36.2 12.5 62.9 33.9 75.5 60.4 5.2 10.8 7.6 20.5 9.6 38.2 1.9 16.7 3.6 24 7.4 32.2 7.1 15.3 26.3 28.9 50.7 36 20.1 5.9 42 8.1 86.4 9 33.3.7 41.1 1.5 47.9 5 7.7 3.9 15.4 11.6 18.7 18.7 2.8 6 2.9 6.9 2.9 20.8 0 13.3-.2 14.9-2.4 19.5-1.4 2.8-5.6 8.1-9.5 12-10.8 10.7-28 18.8-48.8 23-13.6 2.7-38.7 3.5-110.3 3.5-73.4 0-79.9.3-96.7 4.5-33.7 8.5-56.9 25.7-70.1 52.1-15.4 30.7-26.8 91.8-31.7 170.4-2.9 46.1-3 159.5-.1 166.5 1.9 4.7 11.1 13.4 15.3 14.5 8.4 2.3 51.4 3 196.8 3 155 0 184.6-.6 191.7-3.5 5.5-2.3 12.1-9.2 13.4-13.9.6-2.1 1.5-10.5 2-18.5 1.9-32.6.2-482.7-2-504.1-4.6-44.3-20-97.2-39.7-136.1-14.5-28.7-30.3-50.8-51.9-72.5-27-27.1-54.5-45.9-89.8-61.4-31.8-13.9-71.3-24.3-104.5-27.5-16.8-1.7-98.5-1.9-108.7-.4z' fill='%23717c9b'/%3E%3Cpath d='M448 211.5c-21.4 5.9-38.1 21.3-45.8 42.7-2.4 6.5-2.7 8.7-2.6 19.8 0 11.3.3 13.3 3 21 3.9 11 8.7 18.2 18.1 27 11.2 10.4 22.4 15.1 39.8 16.5 27.9 2.3 56.6-18.3 64.9-46.5 8.1-27.5-5.4-60.4-30.1-73.3-12.3-6.4-17.5-7.8-30.3-8.3-8.2-.3-13.1 0-17 1.1z' fill='%23717c9b'/%3E%3C/svg%3E"); | |
| --icon-paypal: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPayPal icon%3C/title%3E%3Cpath d='M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z'/%3E%3C/svg%3E"); | |
| --icon-kofi: url("data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EKo-fi icon%3C/title%3E%3Cpath d='M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z'/%3E%3C/svg%3E"); | |
| --icon-mastodon: url("data:image/svg+xml, %0A%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EMastodon icon%3C/title%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E"); | |
| --icon-verified: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-verified-smaller: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="15" height="15" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-label: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"%3E%3C/path%3E%3Cline x1="7" y1="7" x2="7.01" y2="7"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-discord: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" %3E%3Cpath fill="%23717c9b" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"/%3E%3C/svg%3E'); | |
| --icon-linkedin: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"%3E%3Cpath d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"%3E%3C/path%3E%3Crect x="2" y="9" width="4" height="12"%3E%3C/rect%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); | |
| --icon-instagram: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"%3E%3Crect x="2" y="2" width="20" height="20" rx="5" ry="5"%3E%3C/rect%3E%3Cpath d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"%3E%3C/path%3E%3Cline x1="17.5" y1="6.5" x2="17.51" y2="6.5"%3E%3C/line%3E%3C/svg%3E'); | |
| } | |
| /* High Contrast theme */ | |
| body.theme-contrast.layout-single-column { | |
| --color-dim: #b8b3c0; | |
| /* Icons */ | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23f7f9f9' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23b8b3c0" 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="%23b8b3c0" 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="%23b8b3c0" 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-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' 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-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="%23b8b3c0" 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="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23b8b3c0" 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-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b8b3c0" 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'); | |
| /* Profile icons */ | |
| --icon-github: 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="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"%3E%3Cpath d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-youtube: 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="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"%3E%3Cpath d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"%3E%3C/path%3E%3Cpolygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"%3E%3C/polygon%3E%3C/svg%3E'); | |
| --icon-link: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"%3E%3Cpath d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"%3E%3C/path%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-twitter: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"%3E%3Cpath fill="%23b8b3c0" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/%3E%3C/svg%3E'); | |
| --icon-twitch: 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="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"%3E%3Cpath d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-patreon: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23b8b3c0'%3E%3Ctitle%3EPatreon icon%3C/title%3E%3Cpath d='M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003'/%3E%3C/svg%3E"); | |
| --icon-threads: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='18' fill='%23b8b3c0' width='18' viewBox='0 0 448 512'%3E%3Cpath d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z'/%3E%3C/svg%3E"); | |
| --icon-bluesky: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='18' height='18'%3E%3Cpath fill='%23b8b3c0' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); | |
| --icon-nostr: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 860 847'%3E%3Cpath d='M454.5 1.1c-67.6 10.3-115.8 27.2-160.4 56.4-16.5 10.9-19.3 12-29.1 12-9.5 0-14.6-2-20.8-7.9-5.5-5.1-7.5-9.9-9.2-22-1.9-13.1-6.8-20.4-17.3-25.7l-5.8-3-92.2.3c-68.2.3-93.1.7-95.6 1.6-4.5 1.5-11.4 8.3-15.2 14.8L6 32.8l.2 391.8.3 391.9 2.7 5c1.4 2.8 4.6 6.9 7.1 9.2 8.7 8 .9 7.3 96 8 88.7.6 108.3 0 116.7-3.3 5.9-2.4 13.5-11.7 14.9-18.4 1.4-6.4 1.4-67.7.1-103.3-3-78.6-15.8-158-48.1-297.2-21.2-91.3-27.3-126.1-28.6-162.6-1.5-43.2 7-69.1 28.8-87.6 6.9-5.8 19.7-12.8 29.7-16.2 14.8-5 57.5-12 96.2-15.7 21-2.1 84.2-2.4 104.4-.6 25.3 2.3 54.4 8.4 76 15.9 36.2 12.5 62.9 33.9 75.5 60.4 5.2 10.8 7.6 20.5 9.6 38.2 1.9 16.7 3.6 24 7.4 32.2 7.1 15.3 26.3 28.9 50.7 36 20.1 5.9 42 8.1 86.4 9 33.3.7 41.1 1.5 47.9 5 7.7 3.9 15.4 11.6 18.7 18.7 2.8 6 2.9 6.9 2.9 20.8 0 13.3-.2 14.9-2.4 19.5-1.4 2.8-5.6 8.1-9.5 12-10.8 10.7-28 18.8-48.8 23-13.6 2.7-38.7 3.5-110.3 3.5-73.4 0-79.9.3-96.7 4.5-33.7 8.5-56.9 25.7-70.1 52.1-15.4 30.7-26.8 91.8-31.7 170.4-2.9 46.1-3 159.5-.1 166.5 1.9 4.7 11.1 13.4 15.3 14.5 8.4 2.3 51.4 3 196.8 3 155 0 184.6-.6 191.7-3.5 5.5-2.3 12.1-9.2 13.4-13.9.6-2.1 1.5-10.5 2-18.5 1.9-32.6.2-482.7-2-504.1-4.6-44.3-20-97.2-39.7-136.1-14.5-28.7-30.3-50.8-51.9-72.5-27-27.1-54.5-45.9-89.8-61.4-31.8-13.9-71.3-24.3-104.5-27.5-16.8-1.7-98.5-1.9-108.7-.4z' fill='%23b8b3c0'/%3E%3Cpath d='M448 211.5c-21.4 5.9-38.1 21.3-45.8 42.7-2.4 6.5-2.7 8.7-2.6 19.8 0 11.3.3 13.3 3 21 3.9 11 8.7 18.2 18.1 27 11.2 10.4 22.4 15.1 39.8 16.5 27.9 2.3 56.6-18.3 64.9-46.5 8.1-27.5-5.4-60.4-30.1-73.3-12.3-6.4-17.5-7.8-30.3-8.3-8.2-.3-13.1 0-17 1.1z' fill='%23b8b3c0'/%3E%3C/svg%3E"); | |
| --icon-paypal: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23b8b3c0'%3E%3Ctitle%3EPayPal icon%3C/title%3E%3Cpath d='M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z'/%3E%3C/svg%3E"); | |
| --icon-kofi: url("data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23b8b3c0'%3E%3Ctitle%3EKo-fi icon%3C/title%3E%3Cpath d='M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z'/%3E%3C/svg%3E"); | |
| --icon-mastodon: url("data:image/svg+xml, %0A%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0'%3E%3Ctitle%3EMastodon icon%3C/title%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E"); | |
| --icon-verified: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-verified-smaller: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="15" height="15" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-label: 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="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"%3E%3C/path%3E%3Cline x1="7" y1="7" x2="7.01" y2="7"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-discord: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" %3E%3Cpath fill="%23b8b3c0" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"/%3E%3C/svg%3E'); | |
| --icon-linkedin: 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="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"%3E%3Cpath d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"%3E%3C/path%3E%3Crect x="2" y="9" width="4" height="12"%3E%3C/rect%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); | |
| --icon-instagram: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23b8b3c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"%3E%3Crect x="2" y="2" width="20" height="20" rx="5" ry="5"%3E%3C/rect%3E%3Cpath d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"%3E%3C/path%3E%3Cline x1="17.5" y1="6.5" x2="17.51" y2="6.5"%3E%3C/line%3E%3C/svg%3E'); | |
| } | |
| /* Light theme */ | |
| body.theme-mastodon-light.layout-single-column { | |
| --color-bg: #fff; | |
| --color-fg: #000; | |
| --color-border: black; | |
| --color-dim: #9388a6; | |
| --color-green: #17bf63; | |
| --color-red: #e0245e; | |
| --color-red-75: #e0245ebf; | |
| --color-light-shade: #00000005; | |
| --color-focusable-toot: rgba(0, 0, 0, 0.035); | |
| --color-light-text: #1f1b23; | |
| --color-mud: #e5e1ed; | |
| --color-black-coral: #9188a6; | |
| --color-profile-button-hover: #1e1b231a; | |
| --color-column-link-hover: #1e1b231a; | |
| --color-modal-overlay: #6a5b8366; | |
| --color-dark: #f7f9f9; | |
| --color-thread-line: #e1e8ed; | |
| --color-topaz: #8899a6; | |
| --color-light-purple: #9588a6; | |
| --color-dark-electric-blue: #9088a6; | |
| --color-bg-75: #ffffffbf; | |
| --color-accent: var(--color-accent-dark); | |
| --color-ghost-button-text: var(--color-accent-dark); | |
| --color-bg-compose-form: rgb(147 136 166 / .2); | |
| --color-bg-compose-form-focus: rgb(147 136 166 / .3); | |
| --color-hashtag: var(--color-accent-dark); | |
| --color-mention: var(--color-accent-dark); | |
| /* Misc */ | |
| --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%); | |
| /* Icons for light theme */ | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%239388a6' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%239388a6' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%231f1b23' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); | |
| --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%231f1b23" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%231f1b23" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A'); | |
| --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" 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="%231f1b23" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%231f1b23" 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="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%239388a6' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%231f1b23' 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='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%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="%231f1b23" 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="%231f1b23" 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-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="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" 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="%231f1b23" 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="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" 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="%231f1b23" 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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239388a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%23717c9b" 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="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" 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="%231f1b23" 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="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%231f1b23'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E"); | |
| --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%231f1b23' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%231f1b23' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E"); | |
| --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" 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="%231f1b23" 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="%231f1b23" 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="%231f1b23" 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-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239FA4BB' 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"); | |
| /* Profile icons */ | |
| --icon-github: 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="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"%3E%3Cpath d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-youtube: 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="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"%3E%3Cpath d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"%3E%3C/path%3E%3Cpolygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"%3E%3C/polygon%3E%3C/svg%3E'); | |
| --icon-link: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"%3E%3Cpath d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"%3E%3C/path%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-twitter: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"%3E%3Cpath fill="%239FA4BB" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/%3E%3C/svg%3E'); | |
| --icon-twitch: 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="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"%3E%3Cpath d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-patreon: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%239FA4BB'%3E%3Ctitle%3EPatreon icon%3C/title%3E%3Cpath d='M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003'/%3E%3C/svg%3E"); | |
| --icon-threads: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='18' fill='%239FA4BB' width='18' viewBox='0 0 448 512'%3E%3Cpath d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z'/%3E%3C/svg%3E"); | |
| --icon-bluesky: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='18' height='18'%3E%3Cpath fill='%239FA4BB' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); | |
| --icon-nostr: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 860 847'%3E%3Cpath d='M454.5 1.1c-67.6 10.3-115.8 27.2-160.4 56.4-16.5 10.9-19.3 12-29.1 12-9.5 0-14.6-2-20.8-7.9-5.5-5.1-7.5-9.9-9.2-22-1.9-13.1-6.8-20.4-17.3-25.7l-5.8-3-92.2.3c-68.2.3-93.1.7-95.6 1.6-4.5 1.5-11.4 8.3-15.2 14.8L6 32.8l.2 391.8.3 391.9 2.7 5c1.4 2.8 4.6 6.9 7.1 9.2 8.7 8 .9 7.3 96 8 88.7.6 108.3 0 116.7-3.3 5.9-2.4 13.5-11.7 14.9-18.4 1.4-6.4 1.4-67.7.1-103.3-3-78.6-15.8-158-48.1-297.2-21.2-91.3-27.3-126.1-28.6-162.6-1.5-43.2 7-69.1 28.8-87.6 6.9-5.8 19.7-12.8 29.7-16.2 14.8-5 57.5-12 96.2-15.7 21-2.1 84.2-2.4 104.4-.6 25.3 2.3 54.4 8.4 76 15.9 36.2 12.5 62.9 33.9 75.5 60.4 5.2 10.8 7.6 20.5 9.6 38.2 1.9 16.7 3.6 24 7.4 32.2 7.1 15.3 26.3 28.9 50.7 36 20.1 5.9 42 8.1 86.4 9 33.3.7 41.1 1.5 47.9 5 7.7 3.9 15.4 11.6 18.7 18.7 2.8 6 2.9 6.9 2.9 20.8 0 13.3-.2 14.9-2.4 19.5-1.4 2.8-5.6 8.1-9.5 12-10.8 10.7-28 18.8-48.8 23-13.6 2.7-38.7 3.5-110.3 3.5-73.4 0-79.9.3-96.7 4.5-33.7 8.5-56.9 25.7-70.1 52.1-15.4 30.7-26.8 91.8-31.7 170.4-2.9 46.1-3 159.5-.1 166.5 1.9 4.7 11.1 13.4 15.3 14.5 8.4 2.3 51.4 3 196.8 3 155 0 184.6-.6 191.7-3.5 5.5-2.3 12.1-9.2 13.4-13.9.6-2.1 1.5-10.5 2-18.5 1.9-32.6.2-482.7-2-504.1-4.6-44.3-20-97.2-39.7-136.1-14.5-28.7-30.3-50.8-51.9-72.5-27-27.1-54.5-45.9-89.8-61.4-31.8-13.9-71.3-24.3-104.5-27.5-16.8-1.7-98.5-1.9-108.7-.4z' fill='%239FA4BB'/%3E%3Cpath d='M448 211.5c-21.4 5.9-38.1 21.3-45.8 42.7-2.4 6.5-2.7 8.7-2.6 19.8 0 11.3.3 13.3 3 21 3.9 11 8.7 18.2 18.1 27 11.2 10.4 22.4 15.1 39.8 16.5 27.9 2.3 56.6-18.3 64.9-46.5 8.1-27.5-5.4-60.4-30.1-73.3-12.3-6.4-17.5-7.8-30.3-8.3-8.2-.3-13.1 0-17 1.1z' fill='%239FA4BB'/%3E%3C/svg%3E"); | |
| --icon-paypal: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%239FA4BB'%3E%3Ctitle%3EPayPal icon%3C/title%3E%3Cpath d='M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z'/%3E%3C/svg%3E"); | |
| --icon-kofi: url("data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%239FA4BB'%3E%3Ctitle%3EKo-fi icon%3C/title%3E%3Cpath d='M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z'/%3E%3C/svg%3E"); | |
| --icon-mastodon: url("data:image/svg+xml, %0A%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%239FA4BB'%3E%3Ctitle%3EMastodon icon%3C/title%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E"); | |
| --icon-verified: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" %3E%3Cpath fill="%239FA4BB" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-verified-smaller: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="15" height="15" %3E%3Cpath fill="%239FA4BB" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-label: 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="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"%3E%3C/path%3E%3Cline x1="7" y1="7" x2="7.01" y2="7"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-discord: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" %3E%3Cpath fill="%239FA4BB" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"/%3E%3C/svg%3E'); | |
| --icon-linkedin: 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="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"%3E%3Cpath d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"%3E%3C/path%3E%3Crect x="2" y="9" width="4" height="12"%3E%3C/rect%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); | |
| --icon-instagram: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%239FA4BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"%3E%3Crect x="2" y="2" width="20" height="20" rx="5" ry="5"%3E%3C/rect%3E%3Cpath d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"%3E%3C/path%3E%3Cline x1="17.5" y1="6.5" x2="17.51" y2="6.5"%3E%3C/line%3E%3C/svg%3E'); | |
| } | |
| /* Vars on iPad, landscape */ | |
| @media (min-width: 1175px) and (max-width: 1260px) { | |
| :root { | |
| --width-main-panel: 500px; | |
| --width-side-panel: 265px; | |
| } | |
| } | |
| /* Vars in mobile */ | |
| @media (max-width: 500px) { | |
| :root { | |
| --font-size: 16px; | |
| --line-height: 1.4; | |
| --font-size-heading: 17px; | |
| --badges-distance-from-edge: 10px; | |
| } | |
| /* Hide scrollbar on mobile, since we can't pick the handle anyway */ | |
| .layout-single-column::-webkit-scrollbar { | |
| display: none; | |
| } | |
| } | |
| /* Search popout offset */ | |
| .layout-single-column .search__popout, | |
| .layout-single-column .search-popout { | |
| left: calc(30px / 2); | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| max-width: calc(100% - 30px) !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: calc(100% - 30px) !important; | |
| } | |
| body.layout-single-column { | |
| background-color: var(--color-bg); | |
| color: var(--color-fg); | |
| } | |
| .layout-single-column .ui { | |
| display: flex; | |
| width: 100%; | |
| } | |
| /* Fix weird horizontal overflow */ | |
| @media (min-width: 1175px) and (max-width: 1330px) { | |
| .layout-single-column .ui { | |
| width: unset; | |
| } | |
| } | |
| /* Text color */ | |
| .layout-single-column .account__header__tabs__name h1, | |
| .layout-single-column .account__header__bio .account__header__content, | |
| .layout-single-column .reply-indicator__content, | |
| .layout-single-column .status__content { | |
| color: var(--color-fg); | |
| } | |
| /* Link color variants */ | |
| .layout-single-column .status-link.hashtag { | |
| color: var(--color-hashtag); | |
| } | |
| .layout-single-column .status-link.mention:not(.hashtag) { | |
| color: var(--color-mention); | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column .status-link.mention:not(.hashtag):not(.mention) { | |
| color: var(--color-link); | |
| } | |
| /* Logo */ | |
| .layout-single-column .ui__header__logo, | |
| .layout-single-column .column-link.column-link--logo { | |
| background-image: var(--logo); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: 32px auto; | |
| height: 50px; | |
| padding: 0; | |
| width: 50px; | |
| } | |
| .layout-single-column .ui__header__logo img, | |
| .layout-single-column .ui__header__logo svg { | |
| display: none; | |
| } | |
| /* Things that should have the default font-size */ | |
| .layout-single-column .notification__message, | |
| .layout-single-column .status__content, | |
| .layout-single-column .account__header__tabs__name h1 small, | |
| .layout-single-column .button, | |
| .layout-single-column .status__content__read-more-button, | |
| .layout-single-column .status__prepend, | |
| .layout-single-column .status__info, | |
| .layout-single-column .status__relative-time, | |
| .layout-single-column .status__info .status__display-name, | |
| .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 { | |
| font-size: var(--font-size); | |
| line-height: var(--line-height); | |
| } | |
| /* Things that should have the mid font-size */ | |
| .layout-single-column .account__header__extra__links, | |
| .layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea, | |
| .layout-single-column .account__header__content, | |
| .layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea, | |
| .layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input { | |
| font-size: var(--font-size-mid); | |
| line-height: var(--line-height-mid); | |
| } | |
| /* Exceptions */ | |
| .layout-single-column .account__header__content { | |
| line-height: 18px; | |
| } | |
| /* Things that will have even smaller font size */ | |
| .layout-single-column .account__header__account-note label { | |
| font-size: var(--font-size-12); | |
| } | |
| /* Line heights */ | |
| .layout-single-column .reply-indicator__content, | |
| .layout-single-column .status__content { | |
| line-height: var(--line-height); | |
| } | |
| /* Modal overlay */ | |
| .layout-single-column .modal-root__overlay { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-modal-overlay) !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-light-text) !important; | |
| } | |
| .layout-single-column .modal-root__modal .display-name strong, | |
| .layout-single-column .modal-root__modal .status__content { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-light-text) !important; | |
| } | |
| /* Hide footer buttons in modals */ | |
| .layout-single-column .media-modal__overlay .picture-in-picture__footer { | |
| display: none; | |
| } | |
| /* Report modal */ | |
| .layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .layout-single-column .media-modal__navigation .fa-times::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| /* List adder input */ | |
| .layout-single-column .list-editor input.setting-text, | |
| .layout-single-column .list-adder input.setting-text { | |
| background-color: transparent; | |
| border-color: var(--color-black-coral); | |
| height: 38px; | |
| } | |
| .layout-single-column .list-editor .column-inline-form button, | |
| .layout-single-column .list-adder .column-inline-form button, | |
| .layout-single-column .list-editor .column-inline-form button::before { | |
| min-height: 38px; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 100% !important; | |
| } | |
| .layout-single-column .list-editor__search { | |
| padding: 15px; | |
| } | |
| .layout-single-column .embed-modal .embed-modal__container .embed-modal__html { | |
| color: var(--color-light-text); | |
| } | |
| .layout-single-column .embed-modal .embed-modal__container .embed-modal__html, | |
| .layout-single-column .list-editor__search .search__input { | |
| background-color: transparent; | |
| border-color: var(--color-black-coral); | |
| height: 38px; | |
| } | |
| .layout-single-column .list-editor .drawer__inner.backdrop { | |
| box-shadow: 2px 4px 15px rgba(0, 0, 0, .2); | |
| } | |
| .layout-single-column .list-editor__search .search__icon .fa { | |
| margin: 15px; | |
| } | |
| .layout-single-column .list-editor .list__display-name, | |
| .layout-single-column .list-adder .list__display-name { | |
| display: flex; | |
| gap: var(--gap-default); | |
| } | |
| .layout-single-column .list__display-name .fa-list-ul::before { | |
| top: -2px; | |
| } | |
| /* URL preview cards */ | |
| .layout-single-column .status-card, | |
| .layout-single-column .status-card:hover, | |
| .layout-single-column .status-card:focus { | |
| background-color: transparent; | |
| border-color: var(--color-border); | |
| } | |
| /* URL preview card summary text */ | |
| .layout-single-column .status-card .status-card__host, | |
| .layout-single-column .status-card .status-card__description { | |
| color: var(--color-dim); | |
| } | |
| /* URL preview card box */ | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column .status-card .status-card__content { | |
| padding: var(--gap-default); | |
| } | |
| .layout-single-column .status-card.expanded .status-card__content { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| /* Preview cards */ | |
| .layout-single-column .status-card { | |
| background-color: var(--color-bg); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| transition: all 200ms; | |
| } | |
| .layout-single-column .status-card.expanded { | |
| display: block; | |
| } | |
| .layout-single-column a.status-card .status-card__host { | |
| font-size: var(--font-size); | |
| } | |
| .layout-single-column .status-card a:active .status-card__author, | |
| .layout-single-column .status-card a:active .status-card__title, | |
| .layout-single-column .status-card a:focus .status-card__author, | |
| .layout-single-column .status-card a:focus .status-card__title, | |
| .layout-single-column .status-card a:hover .status-card__author, | |
| .layout-single-column .status-card a:hover .status-card__title, | |
| .layout-single-column a.status-card:active .status-card__author, | |
| .layout-single-column a.status-card:active .status-card__title, | |
| .layout-single-column a.status-card:focus .status-card__author, | |
| .layout-single-column a.status-card:focus .status-card__title, | |
| .layout-single-column a.status-card:hover .status-card__author, | |
| .layout-single-column a.status-card:hover .status-card__title { | |
| color: var(--color-fg); | |
| } | |
| .layout-single-column .status-card a:active .status-card__host, | |
| .layout-single-column .status-card a:hover .status-card__host, | |
| .layout-single-column .status-card a:focus .status-card__host, | |
| .layout-single-column a.status-card:active .status-card__host, | |
| .layout-single-column a.status-card:focus .status-card__host, | |
| .layout-single-column a.status-card:hover .status-card__host, | |
| .layout-single-column a.status-card:focus .status-card__description, | |
| .layout-single-column a.status-card:hover .status-card__description { | |
| color: var(--color-dim); | |
| } | |
| /* Show minimal status card if there's no image */ | |
| .layout-single-column .status-card .status-card__image:not(:has(img)) { | |
| display: none; | |
| } | |
| /* Show iframe in status card if status contains embedded media */ | |
| .layout-single-column .status-card .status-card-video:has(iframe) { | |
| display: inherit; | |
| } | |
| /* Hide empty status cards alltogether (Mastodon 4.1.5-2023-07-29) */ | |
| .layout-single-column .status-card:has(.fa-file-text) { | |
| display: none; | |
| } | |
| /* Hide empty YouTube description */ | |
| .layout-single-column .status-card__description:empty { | |
| display: none; | |
| } | |
| .layout-single-column .status-card:focus, | |
| .layout-single-column .status-card:hover { | |
| background-color: rgba(255 255 255 / .03); | |
| } | |
| .layout-single-column .fa-file-text::before { | |
| content: ""; | |
| } | |
| .layout-single-column .status-card__image-image, | |
| .layout-single-column .status-card__image-preview, | |
| .layout-single-column .status-card .status-card__image { | |
| background-color: var(--color-arsenic); | |
| border-radius: 0; | |
| } | |
| .layout-single-column a.status-card .status-card__content { | |
| padding: 16px; | |
| } | |
| .layout-single-column a.status-card .status-card__title { | |
| color: var(--color-fg); | |
| font-size: var(--font-size-title); | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 1.3; | |
| margin: 0; | |
| } | |
| .layout-single-column a.status-card.expanded .status-card__title { | |
| white-space: inherit; | |
| } | |
| .layout-single-column .status-card.expanded .status-card__host { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| margin-bottom: 0; | |
| margin-top: 0; | |
| } | |
| .layout-single-column .status-card.expanded .status-card__description { | |
| margin-top: 0; | |
| } | |
| /* Announcements */ | |
| .layout-single-column .announcements__pagination .fa, | |
| .layout-single-column .announcements__pagination { | |
| color: var(--color-dim); | |
| } | |
| /* Dark panels like modals and boxes */ | |
| .layout-single-column .account-memorial-banner, | |
| .layout-single-column .follow-request-banner, | |
| .layout-single-column .moved-account-banner, | |
| .layout-single-column .about__meta, | |
| .layout-single-column .about__section__title, | |
| .layout-single-column .announcements, | |
| .layout-single-column .report-dialog-modal, | |
| .layout-single-column .report-modal__target, | |
| .layout-single-column .compose-form .autosuggest-textarea__suggestions, | |
| .layout-single-column .privacy-dropdown__dropdown, | |
| .layout-single-column .drawer__backdrop, | |
| .layout-single-column .list-editor__account, | |
| .layout-single-column .list-editor, | |
| .layout-single-column .list-editor__lists, | |
| .layout-single-column .list-adder__account, | |
| .layout-single-column .list-adder, | |
| .layout-single-column .list-adder__lists, | |
| .layout-single-column .dropdown-menu__arrow::before, | |
| .layout-single-column .dropdown-menu, | |
| .layout-single-column .dropdown-menu__item a, | |
| .layout-single-column .dropdown-menu__item button, | |
| .layout-single-column .emoji-mart-category-label span, | |
| .layout-single-column .emoji-mart-bar:first-child, | |
| .layout-single-column .emoji-picker-dropdown__menu, | |
| .layout-single-column .privacy-dropdown.active .privacy-dropdown__value, | |
| .layout-single-column .emoji-mart-search input, | |
| .layout-single-column .emoji-mart-scroll, | |
| .layout-single-column .emoji-mart-search, | |
| .layout-single-column .follow_requests-unlocked_explanation, | |
| .layout-single-column .dismissable-banner, | |
| .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, | |
| .layout-single-column .setting-text__wrapper, | |
| .layout-single-column .setting-text, | |
| .layout-single-column .report-modal__comment, | |
| .layout-single-column .report-modal__container, | |
| .layout-single-column .actions-modal, | |
| .layout-single-column .block-modal, | |
| .layout-single-column .boost-modal, | |
| .layout-single-column .compare-history-modal, | |
| .layout-single-column .confirmation-modal, | |
| .layout-single-column .mute-modal, | |
| .layout-single-column .report-modal, | |
| .layout-single-column .column-header__collapsible-inner { | |
| background-color: var(--color-dark); | |
| border-color: var(--color-dark); | |
| color: var(--color-light-text); | |
| } | |
| /* Column-header border */ | |
| .layout-single-column .column-header__collapsible { | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .layout-single-column .column-header__collapsible, | |
| .layout-single-column .column-header__collapsible.collapsed { | |
| opacity: 1; | |
| } | |
| /* Has dark 1px border */ | |
| .layout-single-column .dismissable-banner { | |
| border: 1px solid var(--color-dark); | |
| } | |
| /* More subtle box-shadow for dropdown-menu */ | |
| .layout-single-column .search-popout, | |
| .layout-single-column .search__popout, | |
| .layout-single-column .dropdown-menu { | |
| box-shadow: 2px 4px 16px rgb(0 0 0 / .01); | |
| } | |
| /* Autosuggest box shadow reset */ | |
| .layout-single-column .search-popout, | |
| .layout-single-column .search__popout, | |
| .layout-single-column .dropdown-menu, | |
| .layout-single-column .emoji-picker-dropdown__menu, | |
| .layout-single-column .compose-form .compose-form__warning, | |
| .layout-single-column .privacy-dropdown.active .privacy-dropdown__value, | |
| .layout-single-column .privacy-dropdown__dropdown, | |
| .layout-single-column .language-dropdown__dropdown, | |
| .layout-single-column .compose-form .autosuggest-textarea__suggestions { | |
| box-shadow: none; | |
| } | |
| /* Composer form warnings */ | |
| .layout-single-column .compose-form .compose-form__warning { | |
| background-color: var(--color-light-purple); | |
| color: var(--color-bg); | |
| } | |
| /* Content warning placeholder */ | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder, | |
| .layout-single-column .compose-form .spoiler-input__input::placeholder { | |
| color: var(--color-dim); | |
| } | |
| /* Border colors */ | |
| .layout-single-column .search-results__section__header, | |
| .layout-single-column .account__header__bar, | |
| .layout-single-column .about__meta__divider, | |
| .layout-single-column .poll__footer, | |
| .layout-single-column .report-dialog-modal .poll__option.dialog-option, | |
| .layout-single-column .account, | |
| .layout-single-column .report-dialog-modal__container, | |
| .layout-single-column .dropdown-menu__item.edited-timestamp__history__item, | |
| .layout-single-column .dropdown-menu__container__header, | |
| .layout-single-column .compare-history-modal .report-modal__target, | |
| .layout-single-column .account__section-headline, | |
| .layout-single-column .detailed-status__action-bar, | |
| .layout-single-column .column-back-button, | |
| .layout-single-column .column-header, | |
| .layout-single-column .audio-player, | |
| .layout-single-column .video-player, | |
| .layout-single-column .media-gallery, | |
| .layout-single-column .compose-form .spoiler-input__input, | |
| .layout-single-column .compose-form__autosuggest-wrapper, | |
| .layout-single-column .compose-form__poll-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 .dropdown-menu__separator, | |
| .layout-single-column .status, | |
| .layout-single-column .emoji-mart-search input, | |
| .layout-single-column .conversation, | |
| .layout-single-column .setting-text__wrapper { | |
| border-color: var(--color-border); | |
| } | |
| /* Change panel order */ | |
| .layout-single-column .columns-area__panels__pane { | |
| order: 3; | |
| } | |
| .layout-single-column .columns-area__panels__main { | |
| order: 2; | |
| } | |
| .layout-single-column .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { | |
| order: 1; | |
| } | |
| .layout-single-column .columns-area__panels__pane, | |
| .layout-single-column .columns-area__panels__pane__inner, | |
| .layout-single-column .compose-panel { | |
| min-width: var(--width-side-panel); | |
| width: var(--width-side-panel); | |
| } | |
| .layout-single-column .columns-area__panels__pane--compositional { | |
| flex-grow: 1; | |
| height: 100vh; | |
| max-width: 350px; | |
| overflow: visible; | |
| position: sticky; | |
| top: 0; | |
| } | |
| .layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner { | |
| position: static; | |
| } | |
| .layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner, | |
| .compose-panel { | |
| /* stylelint-disable-next-line */ | |
| width: 100% !important; | |
| } | |
| .layout-single-column .search { | |
| margin-inline: 10px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| @media (min-width: 1175px) { | |
| .layout-single-column .columns-area__panels__main { | |
| max-width: calc(var(--width-main-panel) + calc(var(--gap-default) * 4)); | |
| padding-left: calc(var(--gap-default) * 2); | |
| padding-right: calc(var(--gap-default) * 2); | |
| } | |
| .layout-single-column .navigation-panel { | |
| margin-right: -20px; | |
| /* stylelint-disable-next-line */ | |
| padding-left: 0 !important; | |
| padding-right: 20px; | |
| } | |
| } | |
| .layout-single-column .emoji-mart-anchor-bar, | |
| .layout-single-column .column-link.column-link--logo svg { | |
| display: none; | |
| } | |
| /* Accented items like links */ | |
| .layout-single-column .about__section__title, | |
| .layout-single-column .account__header__bio .account__header__fields a, | |
| .layout-single-column .column-back-button, | |
| .layout-single-column .emoji-mart-anchor.emoji-mart-anchor-selected, | |
| .layout-single-column .text-icon-button.active, | |
| .layout-single-column .empty-column-indicator a, | |
| .layout-single-column .follow_requests-unlocked_explanation a, | |
| .layout-single-column .column-header__back-button, | |
| .layout-single-column .link-button, | |
| .layout-single-column .reply-indicator__content a.unhandled-link, | |
| .layout-single-column .status__content a.unhandled-link, | |
| .layout-single-column .column-header > .column-header__back-button, | |
| .layout-single-column .reply-indicator__content a, | |
| body.embed .status__content a, | |
| .layout-single-column .status__content a, | |
| .layout-single-column .column-link--transparent.active, | |
| .layout-single-column .status__content__read-more-button { | |
| color: var(--color-accent); | |
| } | |
| /* Toggles */ | |
| .layout-single-column .react-toggle .react-toggle-track { | |
| background-color: var(--color-bg); | |
| } | |
| /* Accented background colors */ | |
| .layout-single-column .react-toggle--checked .react-toggle-track, | |
| .layout-single-column .language-dropdown__dropdown__results__item.active, | |
| .layout-single-column .icon-with-badge__badge, | |
| .layout-single-column .button { | |
| background-color: var(--color-accent-dark); | |
| } | |
| .layout-single-column .block-modal__cancel-button, | |
| .layout-single-column .confirmation-modal__cancel-button, | |
| .layout-single-column .confirmation-modal__secondary-button, | |
| .layout-single-column .mute-modal__cancel-button { | |
| background-color: transparent; | |
| color: var(--color-dim); | |
| font-size: var(--font-size-mid); | |
| } | |
| .layout-single-column .block-modal__cancel-button:focus, | |
| .layout-single-column .confirmation-modal__cancel-button:focus, | |
| .layout-single-column .confirmation-modal__secondary-button:focus, | |
| .layout-single-column .mute-modal__cancel-button:focus, | |
| .layout-single-column .block-modal__cancel-button:hover, | |
| .layout-single-column .confirmation-modal__cancel-button:hover, | |
| .layout-single-column .confirmation-modal__secondary-button:hover, | |
| .layout-single-column .mute-modal__cancel-button:hover { | |
| background-color: transparent; | |
| color: var(--color-dark-electric-blue); | |
| } | |
| .column-link--transparent .icon-with-badge__badge, | |
| .layout-single-column .icon-with-badge__badge { | |
| background-color: var(--color-accent-dark); | |
| border-color: var(--color-bg); | |
| } | |
| /* Accented strokes */ | |
| .layout-single-column .trends__item__sparkline path:last-child { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| stroke: var(--color-accent) !important; | |
| } | |
| /* Mud background colors, reply-indicator */ | |
| .layout-single-column .reply-indicator { | |
| background-color: var(--color-mud); | |
| color: var(--color-light-text); | |
| max-height: 20vh; | |
| } | |
| /* Dropdown hovers */ | |
| .layout-single-column .language-dropdown__dropdown__results__item:hover, | |
| .layout-single-column .language-dropdown__dropdown__results__item:focus { | |
| background-color: var(--color-accent-dark-50); | |
| color: var(--color-light-text); | |
| } | |
| /* Accented border colors */ | |
| .layout-single-column .notification.unread::before, | |
| .layout-single-column .status__wrapper.unread::before { | |
| border-color: var(--color-accent); | |
| display: none; | |
| } | |
| /* Filtered post */ | |
| .layout-single-column .status__wrapper.status__wrapper--filtered { | |
| align-items: center; | |
| background-color: var(--color-focusable-toot); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| color: var(--color-light-purple); | |
| display: flex; | |
| flex-wrap: nowrap; | |
| font-size: var(--font-size-mid); | |
| justify-content: space-between; | |
| margin: var(--gap-default); | |
| overflow: hidden; | |
| padding: 4px 16px; | |
| text-align: left; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| width: calc(100% - calc(var(--gap-default) * 2)); | |
| } | |
| .layout-single-column .notification:has(.status__wrapper--filtered) .notification__message { | |
| display: none; | |
| } | |
| /* Fix hover/focus on article that has filtered banner */ | |
| .layout-single-column article:has(.status__wrapper--filtered):hover { | |
| background-color: transparent; | |
| } | |
| .layout-single-column .status__wrapper.status__wrapper--filtered button { | |
| background-color: rgb(255 255 255 / 0); | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| color: var(--color-fg); | |
| font-weight: var(--font-weight-semibold); | |
| margin-left: auto; | |
| padding-bottom: 8px; | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| padding-top: 8px; | |
| transition: 200ms background; | |
| white-space: nowrap; | |
| } | |
| .layout-single-column .status__wrapper.status__wrapper--filtered button:focus, | |
| .layout-single-column .status__wrapper.status__wrapper--filtered button:hover { | |
| background-color: rgb(255 255 255 / .1); | |
| text-decoration: none; | |
| } | |
| /* Unread message */ | |
| .layout-single-column .conversation--unread, | |
| .layout-single-column .notification.unread:hover, | |
| .layout-single-column .notification.unread, | |
| .layout-single-column .status__wrapper.unread { | |
| background-color: var(--color-dark); | |
| } | |
| .layout-single-column .notification:hover .notification__message { | |
| background-color: transparent; | |
| } | |
| /* Things like notification status update text that should be dim */ | |
| /* stylelint-disable-next-line selector-not-notation */ | |
| .layout-single-column .notification .status-link.mention:not(.hashtag):not(.mention), | |
| .layout-single-column .notification .status-link.hashtag, | |
| .layout-single-column .notification .status-link.mention:not(.hashtag), | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder, | |
| .layout-single-column .compose-form .icon-button, | |
| .layout-single-column .compose-form .spoiler-input__input::placeholder, | |
| .layout-single-column .compose-form__poll-wrapper .button.button-secondary, | |
| .layout-single-column .language-dropdown__dropdown__results__item__common-name, | |
| .layout-single-column .report-dialog-modal__textarea::placeholder, | |
| .layout-single-column .poll__link, | |
| .layout-single-column .muted .poll, | |
| .layout-single-column .status .status__relative-time, | |
| .layout-single-column .status .status__visibility-icon, | |
| .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 .search-popout > h4, | |
| .layout-single-column .search__popout > h4, | |
| .layout-single-column .status-check-box__status .detailed-status__display-name, | |
| .layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text, | |
| .layout-single-column .status-card .status-card__description, | |
| .layout-single-column .report-dialog-modal .dialog-option .poll__input, | |
| .layout-single-column .dropdown-menu__container__header, | |
| .layout-single-column .sign-in-banner p, | |
| .layout-single-column .navigation-bar > a, | |
| .layout-single-column .character-counter, | |
| .layout-single-column .text-icon-button, | |
| .layout-single-column .empty-column-indicator, | |
| .layout-single-column .follow_requests-unlocked_explanation, | |
| .layout-single-column .poll__footer, | |
| .layout-single-column .server-banner h4, | |
| .layout-single-column .column-header__button, | |
| .layout-single-column .search__icon .fa-times-circle, | |
| .layout-single-column .timeline-hint, | |
| .layout-single-column .status__display-name.muted, | |
| .layout-single-column .setting-text-label, | |
| .layout-single-column .account__header__bio .account__header__fields dt, | |
| .layout-single-column .account__header__bio .account__header__fields dd, | |
| .layout-single-column .link-footer p, | |
| .layout-single-column .account__header__extra__links a, | |
| .layout-single-column .trends__item__current, | |
| .layout-single-column .emoji-mart-anchor, | |
| .layout-single-column .emoji-mart, | |
| .layout-single-column .emoji-mart-anchors, | |
| .layout-single-column .reply-indicator .display-name *, | |
| .layout-single-column .status__display-name, | |
| .layout-single-column .status__prepend .status__display-name strong, | |
| .layout-single-column .status__prepend, | |
| .layout-single-column .compose-form .compose-form__modifiers, | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea, | |
| .layout-single-column .compose-form .spoiler-input__input, | |
| .layout-single-column .autosuggest-textarea__suggestions, | |
| .layout-single-column .compose-form .autosuggest-account .display-name__account, | |
| .layout-single-column .compose-panel .compose-form__autosuggest-wrapper, | |
| .layout-single-column .compose-form .compose-form__buttons-wrapper, | |
| .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, | |
| .layout-single-column .attachment-list.compact .fa, | |
| .layout-single-column .attachment-list__list a, | |
| .layout-single-column .notification__message .fa-user-plus, | |
| .layout-single-column .notification__message .fa-home, | |
| .layout-single-column .notification__message .fa-retweet, | |
| .layout-single-column .link-footer p a, | |
| .layout-single-column .trends__item__name, | |
| .layout-single-column .muted .status__content, | |
| .layout-single-column .muted .status__content a, | |
| .layout-single-column .muted .status__content p, | |
| .layout-single-column .muted .status__display-name strong, | |
| .layout-single-column .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content { | |
| color: var(--color-dim); | |
| } | |
| /* Dim backgrounds */ | |
| .layout-single-column .poll__chart { | |
| background-color: var(--color-dim); | |
| } | |
| /* Lighter border colors */ | |
| .layout-single-column .report-dialog-modal .dialog-option .poll__input, | |
| .layout-single-column .poll__input { | |
| border-color: var(--color-brand-mastodon-text-light); | |
| } | |
| /* Light grey things */ | |
| .layout-single-column .navigation-bar, | |
| .layout-single-column .navigation-bar strong { | |
| color: var(--color-topaz); | |
| } | |
| /* CW button */ | |
| .layout-single-column .reply-indicator__content .status__content__spoiler-link, | |
| .layout-single-column .status__content__spoiler-link { | |
| background-color: var(--color-dark); | |
| color: var(--color-light-purple); | |
| font-weight: var(--font-weight-semibold); | |
| /* Need to override forced styles */ | |
| /* stylelint-disable-next-line */ | |
| margin-left: calc(var(--gap-default) / 2) !important; | |
| vertical-align: baseline; | |
| } | |
| .layout-single-column .reply-indicator__content .status__content__spoiler-link:focus, | |
| .layout-single-column .reply-indicator__content .status__content__spoiler-link:hover, | |
| .layout-single-column .status__content .status__content__spoiler-link:focus, | |
| .layout-single-column .status__content .status__content__spoiler-link:hover { | |
| background-color: var(--color-dark); | |
| color: var(--color-lighter-purple); | |
| } | |
| /* CW button in notifications */ | |
| .layout-single-column .notification .reply-indicator__content .status__content__spoiler-link, | |
| .layout-single-column .notification .status__content__spoiler-link { | |
| background-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| .layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:focus, | |
| .layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:hover, | |
| .layout-single-column .notification .status__content .status__content__spoiler-link:focus, | |
| .layout-single-column .notification .status__content .status__content__spoiler-link:hover { | |
| background-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| /* Light purple things */ | |
| .layout-single-column .announcements__pagination .icon-button:hover i, | |
| .layout-single-column .server-banner__introduction, | |
| .layout-single-column .account__header__tabs__name h1 small, | |
| .layout-single-column .account .account__display-name, | |
| .layout-single-column .column-settings__section, | |
| .layout-single-column .setting-toggle__label, | |
| .layout-single-column .server-banner__number-label { | |
| color: var(--color-light-purple); | |
| } | |
| /* White things */ | |
| .layout-single-column .compose-form__poll-wrapper select, | |
| .layout-single-column .actions-modal ul li:not(:empty) a, | |
| .layout-single-column .report-dialog-modal .status__content, | |
| .layout-single-column .report-dialog-modal .status__content p, | |
| .layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong, | |
| .layout-single-column .report-dialog-modal__lead, | |
| .layout-single-column .detailed-status__display-name strong, | |
| .layout-single-column .dismissable-banner__message, | |
| .layout-single-column .privacy-dropdown__option, | |
| .layout-single-column .privacy-dropdown__option__content strong, | |
| .layout-single-column .privacy-dropdown__option.active, | |
| .layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, | |
| .layout-single-column .privacy-dropdown__option:focus .privacy-dropdown__option__content, | |
| .layout-single-column .status__info .display-name strong.display-name__html, | |
| .layout-single-column .reply-indicator .display-name strong.display-name__html, | |
| .layout-single-column .notification__message, | |
| .layout-single-column .getting-started__trends h4 a, | |
| .layout-single-column .trends__item__name a, | |
| .layout-single-column .emoji-mart-search input, | |
| .layout-single-column .language-dropdown__dropdown__results__item, | |
| .layout-single-column .reply-indicator__content, | |
| .layout-single-column .compose-form .compose-form__modifiers:focus, | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea, | |
| .layout-single-column .compose-form .spoiler-input__input:focus, | |
| .layout-single-column .compose-panel .compose-form__autosuggest-wrapper:focus, | |
| .layout-single-column .compose-form .compose-form__buttons-wrapper:focus, | |
| .layout-single-column .autosuggest-textarea .autosuggest-textarea__textarea:focus, | |
| .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 { | |
| color: var(--color-light-text); | |
| } | |
| .layout-single-column .muted .status__info *, | |
| .layout-single-column .muted .status__info .display-name * { | |
| color: var(--color-light-text); | |
| } | |
| /* Account names */ | |
| .layout-single-column .status__info .display-name .display-name__account, | |
| .layout-single-column .display-name__account { | |
| color: var(--color-dim); | |
| } | |
| /* Main panel column */ | |
| .layout-single-column .columns-area__panels__main > div { | |
| border-left: 1px solid var(--color-border); | |
| border-right: 1px solid var(--color-border); | |
| } | |
| /* Status header */ | |
| .layout-single-column .status .status__info { | |
| align-items: flex-start; | |
| gap: var(--gap-default); | |
| height: calc(var(--gap-default) * 2); | |
| justify-content: flex-start; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| /* Status action bar */ | |
| .layout-single-column .status__action-bar { | |
| margin-top: 12px; | |
| max-height: 27px; | |
| } | |
| /* Display name */ | |
| .layout-single-column .status__info .status__display-name { | |
| align-items: flex-start; | |
| display: inline-flex; | |
| gap: var(--gap-default); | |
| order: 1; | |
| } | |
| .layout-single-column .status__info .display-name { | |
| display: flex; | |
| gap: calc(var(--gap-default) / 2); | |
| } | |
| /* The separator dot */ | |
| .layout-single-column .status__info::before { | |
| color: var(--color-dim); | |
| content: "·"; | |
| display: inline-block; | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| height: 20px; | |
| margin-left: -6px; | |
| margin-right: -10px; | |
| order: 2; | |
| position: relative; | |
| } | |
| .layout-single-column .status__info .status__relative-time { | |
| height: unset; | |
| order: 3; | |
| } | |
| /* Visibility icon */ | |
| .layout-single-column .status .status__visibility-icon { | |
| font-size: var(--font-size-mid); | |
| } | |
| /* Panels and things that should be transparent */ | |
| .layout-single-column .explore__search-results, | |
| .layout-single-column .search-results__section__header, | |
| .layout-single-column .status__wrapper-direct, | |
| .layout-single-column .focusable:focus .detailed-status, | |
| .layout-single-column .focusable:focus .detailed-status__action-bar, | |
| .layout-single-column .compose-form__poll-wrapper select, | |
| .layout-single-column .poll__option input[type="text"], | |
| .layout-single-column .language-dropdown__dropdown, | |
| body.embed .activity-stream .entry, | |
| .layout-single-column .report-dialog-modal__textarea, | |
| .layout-single-column .drawer__inner, | |
| .layout-single-column .column-inline-form, | |
| .layout-single-column .scrollable .account-card, | |
| .layout-single-column .scrollable .account-card__title__avatar .account__avatar, | |
| .layout-single-column .scrollable .account-card__title__avatar img, | |
| .layout-single-column .explore__search-header, | |
| .layout-single-column .empty-column-indicator, | |
| .layout-single-column .follow_requests-unlocked_explanation, | |
| .layout-single-column .column-link, | |
| .layout-single-column .columns-area__panels__pane--navigational .navigation-panel, | |
| .layout-single-column .tabs-bar__wrapper .column-back-button, | |
| .layout-single-column .account__header, | |
| .layout-single-column .column-header__back-button, | |
| .layout-single-column .compose-form .compose-form__modifiers, | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea, | |
| .layout-single-column .compose-form .spoiler-input__input, | |
| .layout-single-column .compose-panel .compose-form__autosuggest-wrapper, | |
| .layout-single-column .compose-form .compose-form__buttons-wrapper, | |
| .layout-single-column .column-header__button, | |
| .layout-single-column .account__section-headline button, | |
| .layout-single-column .notification__filter-bar button, | |
| .layout-single-column .account__section-headline, | |
| .layout-single-column .notification__filter-bar, | |
| .layout-single-column .tabs-bar__wrapper, | |
| .layout-single-column .column-header, | |
| body.embed .detailed-status, | |
| .layout-single-column .detailed-status, | |
| .layout-single-column .detailed-status__action-bar, | |
| .layout-single-column .column > .scrollable { | |
| background-color: transparent; | |
| } | |
| /* Avatar */ | |
| .account__avatar[style="width: 46px; height: 46px;"], | |
| .layout-single-column .status__avatar { | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| max-height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| max-width: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| min-height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| min-width: var(--size-avatar) !important; | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| width: var(--size-avatar) !important; | |
| } | |
| /* Avatars */ | |
| body.embed .detailed-status__display-avatar > img, | |
| .layout-single-column .account-card__title__avatar .account__avatar, | |
| .layout-single-column .account-card__title__avatar img, | |
| .layout-single-column .account__avatar > img, | |
| .layout-single-column .column > .scrollable .status__avatar img { | |
| background-color: var(--color-bg); | |
| border: 0; | |
| border-radius: 50%; | |
| box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset; | |
| } | |
| /* Things that should not have border */ | |
| .layout-single-column .column-inline-form, | |
| .layout-single-column .column > .scrollable, | |
| .layout-single-column .error-column, | |
| .layout-single-column .getting-started, | |
| .layout-single-column .regeneration-indicator, | |
| .layout-single-column .column-header { | |
| border: 0; | |
| } | |
| /* Nice active effect in the column header */ | |
| .layout-single-column .column-header__wrapper.active { | |
| box-shadow: var(--active-header-box-shadow); | |
| } | |
| .layout-single-column .column-header__wrapper.active::before { | |
| /* stylelint-disable-next-line */ | |
| background: var(--active-header-radial-gradient); | |
| } | |
| .layout-single-column .compose-form__autosuggest-wrapper, | |
| .layout-single-column .compose-form__buttons-wrapper { | |
| border: 0; | |
| } | |
| .layout-single-column article, | |
| .layout-single-column .status__prepend, | |
| .layout-single-column .notification__message, | |
| .layout-single-column .status { | |
| transition: all 200ms; | |
| } | |
| /* Toot hover effect */ | |
| .layout-single-column article:focus, | |
| .layout-single-column article:hover { | |
| background-color: var(--color-light-shade); | |
| } | |
| /* Focusable toot and other hilighted items */ | |
| .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 .focusable:focus { | |
| /* stylelint-disable-next-line */ | |
| background: var(--color-focusable-toot); | |
| } | |
| /* Search panel that opens when focusing Search or paste URL field */ | |
| .layout-single-column .explore__search-header .search__popout, | |
| .layout-single-column .compose-form__poll-wrapper option, | |
| .layout-single-column .search__popout, | |
| .layout-single-column .search-popout { | |
| background-color: var(--color-dark); | |
| border-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| .layout-single-column .search__popout em, | |
| .layout-single-column .search-popout em { | |
| color: var(--color-light-text); | |
| } | |
| /* Pill style tags */ | |
| .layout-single-column .hashtag-bar a { | |
| background-color: var(--color-dark); | |
| border-radius: 9999px; | |
| color: var(--color-light-purple); | |
| display: inline-block; | |
| font-size: var(--font-size-smaller); | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 1.5; | |
| margin: 0 4px 4px 0; | |
| padding: 4px 8px; | |
| text-decoration: none; | |
| } | |
| .layout-single-column .hashtag-bar .link-button { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-single-column .hashtag-bar a:focus, | |
| .layout-single-column .hashtag-bar a:hover { | |
| background-color: var(--color-accent-dark); | |
| /* It should be always light also on light mode, so not using variable here */ | |
| color: #f7f9f9; | |
| } | |
| .layout-single-column .hashtag-bar a:focus span, | |
| .layout-single-column .hashtag-bar a:hover span { | |
| text-decoration: none; | |
| } | |
| /* Status update tinted to right */ | |
| .layout-single-column .status:not(.status--in-thread) .hashtag-bar, | |
| .layout-single-column .status__content--collapsed + .status__content__read-more-button, | |
| .layout-single-column .status:not(.status--in-thread) .status__action-bar, | |
| .layout-single-column .status:not(.status--in-thread) .attachment-list, | |
| .layout-single-column .status:not(.status--in-thread) .status__content { | |
| font-size: var(--font-size); | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| padding-top: 0; | |
| } | |
| .layout-single-column .notification-ungrouped .status:not(.status--in-thread) .hashtag-bar, | |
| .layout-single-column .notification-ungrouped .status:not(.status--in-thread) .status__action-bar, | |
| .layout-single-column .notification-ungrouped .status:not(.status--in-thread) .attachment-list, | |
| .layout-single-column .notification-ungrouped .status:not(.status--in-thread) .status__content { | |
| padding-left: 10px !important; | |
| } | |
| .layout-single-column .notification-ungrouped .content-warning { | |
| translate: 10px; | |
| } | |
| .layout-single-column .content-warning { | |
| margin-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| .layout-single-column .notification-ungrouped .status .audio-player, | |
| .layout-single-column .notification-ungrouped .status .video-player, | |
| .layout-single-column .notification-ungrouped .status .media-gallery { | |
| translate: -10px | |
| } | |
| /* Translate link and other padding resets */ | |
| .layout-single-column .conversation .attachment-list, | |
| .layout-single-column .translate ~ .status__content__read-more-button { | |
| padding-left: 0; | |
| } | |
| /* Make sure read more/translate button is always aligned to center vertically and to left horizontally */ | |
| .layout-single-column .status__content__read-more-button { | |
| align-items: center; | |
| display: flex; | |
| justify-content: flex-start; | |
| margin-inline-start: 0; | |
| } | |
| /* Rtl version */ | |
| [dir="rtl"] .layout-single-column .status__action-bar, | |
| [dir="rtl"] .layout-single-column .attachment-list, | |
| [dir="rtl"] .layout-single-column .status__content__read-more-button, | |
| [dir="rtl"] .layout-single-column .status .status__content { | |
| padding-left: 0; | |
| padding-right: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Reset padding from attachment-list on reply indicator */ | |
| .layout-single-column .reply-indicator .attachment-list { | |
| padding-left: 0; | |
| } | |
| .layout-single-column .status__action-bar button, | |
| .layout-single-column .detailed-status__action-bar button { | |
| border-radius: 50%; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button[disabled], | |
| .layout-single-column .status__action-bar .icon-button[disabled] { | |
| opacity: .5; | |
| pointer-events: none; | |
| } | |
| /* Media inside status update tinted to right */ | |
| .layout-single-column .status .audio-player, | |
| .layout-single-column .status .video-player, | |
| .layout-single-column .status .media-gallery { | |
| margin-left: auto; | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| width: calc(100% - calc(var(--size-avatar) + var(--gap-default))) !important; | |
| } | |
| /* Fix aspect-ratio for some videos in mastodon v4.1.5-nightly-2023-07-26 */ | |
| .layout-single-column div[style*='aspect-ratio']:not([class]) { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| aspect-ratio: unset !important; | |
| } | |
| .layout-single-column .status .status-card { | |
| margin-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Detailed status update */ | |
| .layout-single-column .detailed-status .status__content { | |
| font-size: var(--font-size-bigger); | |
| line-height: 1.4; | |
| } | |
| body.embed .detailed-status__meta, | |
| .layout-single-column .detailed-status__meta { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| } | |
| body.embed .detailed-status__meta { | |
| line-height: 1.5; | |
| } | |
| body.embed .detailed-status__reblogs, | |
| body.embed .detailed-status__favorites, | |
| .layout-single-column .detailed-status__favorites, | |
| .layout-single-column .detailed-status__reblogs { | |
| display: inline-flex; | |
| font-size: var(--font-size); | |
| gap: 4px; | |
| } | |
| body.embed .detailed-status__meta .animated-number, | |
| .layout-single-column .detailed-status__meta .animated-number { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| body.embed .detailed-status__reblogs, | |
| .layout-single-column .detailed-status__reblogs { | |
| font-size: var(--font-size); | |
| } | |
| body.embed .detailed-status__reblogs, | |
| body.embed .detailed-status__favorites { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| body.embed .activity-stream .entry { | |
| background-color: var(--color-bg); | |
| } | |
| body.embed > .activity-stream { | |
| backface-visibility: hidden; | |
| /* stylelint-disable-next-line */ | |
| background: #313543 !important; | |
| border: 1px solid var(--color-border); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| /* Textual labels for detailed metrics */ | |
| body.embed .detailed-status__link > .fa-reply + span::after, | |
| .layout-single-column .detailed-status__link > .fa-reply + span::after { | |
| color: var(--color-dim); | |
| content: 'Replies'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__link > .fa-retweet + span::after, | |
| .layout-single-column .detailed-status__link > .fa-retweet + span::after { | |
| color: var(--color-dim); | |
| content: 'Boosts'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__link > .fa-star + span::after, | |
| .layout-single-column .detailed-status__link > .fa-star + span::after { | |
| color: var(--color-dim); | |
| content: 'Favourites'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__meta .detailed-status__link .fa-star, | |
| body.embed .detailed-status__meta .detailed-status__link .fa-retweet, | |
| .layout-single-column .detailed-status__meta .detailed-status__link .fa-star, | |
| .layout-single-column .detailed-status__meta .detailed-status__link .fa-retweet { | |
| display: none; | |
| } | |
| /* Icon buttons */ | |
| .layout-single-column .icon-button { | |
| color: var(--color-dim); | |
| } | |
| /* Hide/Show media button */ | |
| .layout-single-column .spoiler-button.spoiler-button--minified > button { | |
| background-color: var(--color-bg); | |
| border-radius: var(--border-radius-badges); | |
| color: var(--color-ghost-button-text); | |
| opacity: .5; | |
| } | |
| /* Alt badge */ | |
| .layout-single-column .media-gallery__item__badges > span { | |
| border-radius: var(--border-radius-badges); | |
| } | |
| /* Distance from the edge */ | |
| .layout-single-column .spoiler-button--minified { | |
| inset-inline-start: var(--badges-distance-from-edge); | |
| top: var(--badges-distance-from-edge); | |
| } | |
| .layout-single-column .media-gallery__item__badges { | |
| bottom: var(--badges-distance-from-edge); | |
| inset-inline-start: var(--badges-distance-from-edge); | |
| } | |
| .layout-single-column .spoiler-button.spoiler-button--minified > button:hover, | |
| .layout-single-column .spoiler-button.spoiler-button--minified > button:focus { | |
| opacity: 1; | |
| } | |
| .layout-single-column .icon-button:hover { | |
| color: var(--color-accent); | |
| } | |
| /* Other general buttons */ | |
| .layout-single-column .column-header__button.active:active, | |
| .column-header__button.active:focus, | |
| .layout-single-column .column-header__button.active:hover { | |
| background-color: var(--color-focusable-toot); | |
| color: var(--color-fg); | |
| } | |
| /* Bars on panels */ | |
| .layout-single-column .ui__header, | |
| .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-single-column .tabs-bar__wrapper { | |
| backdrop-filter: blur(12px); | |
| background-color: var(--color-bg-75); | |
| border-color: var(--color-border); | |
| padding: 0; | |
| } | |
| @media (min-width: 1175px) { | |
| .layout-single-column .ui__header, | |
| .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-single-column .tabs-bar__wrapper { | |
| margin-right: -2px; | |
| } | |
| } | |
| /* Hidden things */ | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) { | |
| display: none; | |
| } | |
| /* Column headers */ | |
| .layout-single-column .column-header { | |
| font-size: var(--font-size-heading); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| /* Column sub-headers */ | |
| .layout-single-column .column-subheading { | |
| background-color: transparent; | |
| color: var(--color-fg); | |
| font-size: var(--font-size-bigger); | |
| font-weight: var(--font-weight-bold); | |
| text-transform: unset; | |
| } | |
| /* "Your lists" view */ | |
| .layout-single-column .column-subheading ~ article { | |
| padding-left: var(--gap-default); | |
| padding-right: var(--gap-default); | |
| } | |
| /* Notifications */ | |
| .layout-single-column .notification__message { | |
| display: grid; | |
| gap: var(--gap-default); | |
| grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr); | |
| height: calc(var(--gap-default) * 2); | |
| } | |
| .layout-single-column .notification__message i { | |
| font-size: var(--size-icon-notification); | |
| } | |
| /* Make sure notification user is clickable */ | |
| .layout-single-column .notification__display-name { | |
| position: relative; | |
| z-index: 99; | |
| } | |
| /* Hack to display notification message title on one line */ | |
| .layout-single-column .notification__message > span { | |
| display: block; | |
| margin-top: calc(var(--size-avatar-small) + 6px); | |
| overflow: visible; | |
| } | |
| .layout-single-column .notification__message > span > span { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Truncate too long unfollow buttons and texts beside it so they don't overlap in notifications */ | |
| @media (max-width: 600px) { | |
| .layout-single-column .notification .account__relationship > .button, | |
| .layout-single-column .notification__report__actions .button { | |
| max-width: 24vw; | |
| } | |
| .layout-single-column .notification__message > span > span { | |
| max-width: 50vw; | |
| } | |
| } | |
| .layout-single-column .notification__message > div { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .layout-single-column .muted .status__avatar { | |
| opacity: 1; | |
| } | |
| .layout-single-column .notification .account__avatar-overlay-base { | |
| display: none; | |
| } | |
| .layout-single-column .notification .account__avatar, | |
| .layout-single-column .notification .account__avatar-overlay-overlay .account__avatar, | |
| .layout-single-column .notification .account__avatar-overlay-overlay { | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| height: var(--size-avatar-small) !important; | |
| /* stylelint-disable-next-line */ | |
| min-height: var(--size-avatar-small) !important; | |
| /* stylelint-disable-next-line */ | |
| min-width: var(--size-avatar-small) !important; | |
| position: absolute; | |
| /* stylelint-disable-next-line */ | |
| width: var(--size-avatar-small) !important; | |
| } | |
| .layout-single-column .notification .status__info .status__display-name { | |
| overflow: visible; | |
| } | |
| /* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */ | |
| .layout-single-column .notification.notification-reblog .status__info .status__display-name, | |
| .layout-single-column .notification.notification-follow .status__info .status__display-name, | |
| .layout-single-column .notification.notification-favourite .status__info .status__display-name { | |
| pointer-events: none; | |
| } | |
| /* Hack to show follow notification more minimal way */ | |
| .layout-single-column .notification.notification-admin-report .notification__report, | |
| .layout-single-column .notification.notification-admin-sign-up .account__wrapper, | |
| .layout-single-column .notification.notification-update .account__wrapper, | |
| .layout-single-column .notification.notification-follow .account__wrapper { | |
| position: relative; | |
| } | |
| .layout-single-column .notification.notification-admin-report .account__avatar-overlay-overlay { | |
| top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default) + 4px)); | |
| } | |
| /* Hack to show follow notification more minimal way */ | |
| .layout-single-column .notification.notification-poll .display-name, | |
| .layout-single-column .notification.notification-update .display-name__html, | |
| .layout-single-column .notification.notification-update .display-name__account, | |
| .layout-single-column .notification.notification-admin-sign-up .display-name__html, | |
| .layout-single-column .notification.notification-admin-sign-up .display-name, | |
| .layout-single-column .notification.notification-follow .display-name__html { | |
| visibility: hidden; | |
| } | |
| .layout-single-column .notification.notification-update .account__avatar-wrapper, | |
| .layout-single-column .notification.notification-admin-sign-up .account__avatar-wrapper, | |
| .layout-single-column .notification.notification-follow .account__avatar-wrapper, | |
| .layout-single-column .notification .account__avatar-overlay { | |
| left: calc(var(--size-avatar-small) + var(--gap-default) + 18px); | |
| margin-top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default))); | |
| position: absolute; | |
| top: 4px; | |
| } | |
| .layout-single-column .notification.notification-admin-report .account__avatar-overlay { | |
| margin-top: 0; | |
| top: 0; | |
| } | |
| .layout-single-column .notification.notification-status .notification__message > span { | |
| display: none; | |
| } | |
| .layout-single-column .notification.notification-follow .verified-badge, | |
| .layout-single-column .notification.notification-admin-sign-up .account__contents, | |
| .layout-single-column .notification.notification-follow .account__contents, | |
| .layout-single-column .notification.notification-follow .display-name, | |
| .layout-single-column .notification.notification-admin-sign-up .display-name + span, | |
| .layout-single-column .notification.notification-follow .display-name + span, | |
| .layout-single-column .notification.notification-favourite .status__wrapper-direct .status__prepend, | |
| .layout-single-column .notification.notification-reblog .display-name, | |
| .layout-single-column .notification.notification-favourite .display-name { | |
| display: none; | |
| } | |
| /* Minimal boost notification fix */ | |
| .layout-single-column .notification.notification-reblog .notification__message > span { | |
| margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); | |
| } | |
| /* Minimal follow notification fix */ | |
| .layout-single-column .notification.notification-follow .notification__message > span { | |
| margin-top: calc(calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px); | |
| } | |
| .layout-single-column .notification.notification.notification-admin-sign-up .account__relationship, | |
| .layout-single-column .notification.notification-follow .account__relationship { | |
| transform: translateY(-8px); | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column .notification.notification-follow .account__avatar-wrapper { | |
| top: 6px; | |
| } | |
| /* Minimal fav notification fix */ | |
| .layout-single-column .notification.notification-favourite .notification__message > span { | |
| margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); | |
| } | |
| /* If a status content is empty and there's only attachment, remove gap */ | |
| .layout-single-column .notification .status__content:has(.status__content__text:empty) + .attachment-list { | |
| margin-top: 0; | |
| } | |
| /* Less space before attachments if no status content */ | |
| .layout-single-column .status .status__content:has(.status__content__text:empty) + .audio-player, | |
| .layout-single-column .status .status__content:has(.status__content__text:empty) + .video-player, | |
| .layout-single-column .status .status__content:has(.status__content__text:empty) + .media-gallery, | |
| .layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .audio-player, | |
| .layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .video-player, | |
| .layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery { | |
| margin-top: calc(var(--gap-default) / 2); | |
| } | |
| .layout-single-column .status__prepend { | |
| padding-left: calc(var(--size-avatar) - 4px); | |
| } | |
| .layout-single-column .notification.notification-update .account__display-name, | |
| .layout-single-column .notification.notification-follow .account__display-name { | |
| display: inline-flex; | |
| gap: var(--gap-default); | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Admin reports and other admin notifications */ | |
| .layout-single-column .notification-admin-report .notification__report { | |
| border-color: var(--color-border); | |
| display: flex; | |
| font-size: var(--font-size); | |
| gap: 16px; | |
| margin-top: 22px; | |
| padding: 16px; | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| .layout-single-column .notification-admin-report .notification__report__details { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| } | |
| .layout-single-column .notification-admin-report .notification__report__details strong { | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Revert hack for notification admin message that has no avatar visible */ | |
| .layout-single-column .notification-admin-report .notification__message > span { | |
| display: block; | |
| margin-top: calc(var(--size-avatar-small) + 4px); | |
| overflow: visible; | |
| } | |
| /* Hide things in notifications */ | |
| .layout-single-column .notification .status__relative-time, | |
| .layout-single-column .notification .status__info::before { | |
| display: none; | |
| } | |
| /* Right side panel */ | |
| .layout-single-column .navigation-panel { | |
| box-sizing: border-box; | |
| margin-top: 0; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .layout-single-column .navigation-panel hr { | |
| /* Hide but reserve space */ | |
| visibility: hidden; | |
| } | |
| .columns-area__panels__pane--navigational .navigation-panel { | |
| border: 0; | |
| height: 100%; | |
| } | |
| .layout-single-column .navigation-panel__logo hr { | |
| margin: 0; | |
| } | |
| /* Attempt to hide scrollbars for .navigation-panel for Firefox */ | |
| .dropdown-menu__container__list--scrollable, | |
| .layout-single-column .navigation-panel { | |
| scrollbar-width: none; | |
| } | |
| /* Hide scrollbars for .navigation-panel for Chrome and Safari */ | |
| .dropdown-menu__container__list--scrollable::-webkit-scrollbar, | |
| .layout-single-column .navigation-panel::-webkit-scrollbar { | |
| display: none; | |
| width: 4px; | |
| } | |
| .layout-single-column .column-link { | |
| align-items: center; | |
| color: var(--color-light-text); | |
| display: inline-flex; | |
| font-size: var(--font-size-heading); | |
| gap: var(--gap-column-link); | |
| overflow: visible; | |
| padding-bottom: calc(var(--gap-column-link) + 4px); | |
| padding-left: var(--gap-column-link); | |
| padding-right: calc(var(--gap-column-link) * 1.5); | |
| padding-top: calc(var(--gap-column-link) + 4px); | |
| transition: all 100ms; | |
| } | |
| [dir="rtl"] .layout-single-column .column-link { | |
| margin-left: auto; | |
| margin-right: 0; | |
| } | |
| .layout-single-column .column-link > i { | |
| min-width: 1.3em; | |
| } | |
| .layout-single-column .column-link > span { | |
| position: relative; | |
| } | |
| .layout-single-column .column-link > span::before { | |
| background-color: var(--color-column-link-hover); | |
| border-radius: 32px; | |
| bottom: calc(2px - var(--gap-column-link) * 1.5); | |
| content: ""; | |
| inset-inline-end: calc(0px - (var(--gap-column-link) * 2)); | |
| inset-inline-start: calc(-1.28571429em - (var(--gap-column-link) * 2)); | |
| opacity: 0; | |
| position: absolute; | |
| top: calc(-4px - var(--gap-column-link)); | |
| transition: opacity 200ms; | |
| } | |
| .layout-single-column .column-link:focus-visible > span::before, | |
| .layout-single-column .column-link:hover > span::before { | |
| opacity: 1; | |
| } | |
| .layout-single-column .account__section-headline a { | |
| transition: all 200ms; | |
| } | |
| .layout-single-column .dropdown-menu__item a:hover, | |
| .layout-single-column .notification__filter-bar button:hover, | |
| .layout-single-column .account__section-headline a:hover { | |
| background-color: var(--color-column-link-hover); | |
| } | |
| /* Mobile devices */ | |
| @media (hover: none) { | |
| .layout-single-column .notification__filter-bar button.active:hover, | |
| .layout-single-column .account__section-headline a.active:hover { | |
| background-color: transparent; | |
| } | |
| } | |
| /* Notification filter bar */ | |
| .layout-single-column .notification__filter-bar { | |
| border-bottom: 1px solid var(--color-border); | |
| border-left: 0; | |
| border-right: 0; | |
| } | |
| .layout-single-column .column-link__icon { | |
| margin: 0; | |
| } | |
| /* Notification badge on side panel */ | |
| .layout-single-column .icon-with-badge__badge { | |
| align-items: center; | |
| border-radius: 1em; | |
| box-sizing: border-box; | |
| display: flex; | |
| font-size: 11px; | |
| height: 1.7em; | |
| justify-content: center; | |
| left: 12px; | |
| line-height: 1; | |
| min-width: max-content; | |
| padding: 0 0.4em; | |
| top: -7px; | |
| width: 1.7em; | |
| } | |
| .layout-single-column .column-link--transparent.active { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| /* Top panel */ | |
| .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 { | |
| background-color: var(--color-accent); | |
| border: 0; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| bottom: -1px; | |
| content: ""; | |
| display: block; | |
| height: 4px; | |
| left: 50%; | |
| min-width: 56px; | |
| position: absolute; | |
| transform: translateX(-50%); | |
| } | |
| .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 .notification.notification-reblog .status__action-bar, | |
| .layout-single-column .notification.notification-favourite .status__action-bar { | |
| display: none; | |
| } | |
| .layout-single-column .search .search__icon .fa-search::before { | |
| content: ''; | |
| } | |
| .layout-single-column .status__prepend .fa-retweet::before { | |
| content: var(--icon-boost-status-prepend); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .notification .notification__message .fa { | |
| font-size: 27px; | |
| margin-right: 4px; | |
| max-width: 30px; | |
| } | |
| .layout-single-column .notification .fa:not(.fa-link)::before { | |
| font-size: 22px; | |
| height: 27px; | |
| } | |
| .layout-single-column .notification .fa.fa-user-plus:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| font-size: 20px; | |
| } | |
| .layout-single-column .account__relationship .fa.fa-user-plus:not(.fa-link)::before, | |
| .layout-single-column .notification .account__relationship .fa.fa-user-plus:not(.fa-link)::before { | |
| color: var(--color-dim); | |
| } | |
| .layout-single-column .notification .fa.fa-flag::before, | |
| .layout-single-column .notification .fa.fa-tasks:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| } | |
| .layout-single-column .notification .fa.fa-home:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| font-size: 24px; | |
| } | |
| /* Follow/unfollow button */ | |
| .layout-single-column .account__relationship .icon-button, | |
| .layout-single-column .notification .account__relationship .icon-button { | |
| background-color: transparent; | |
| } | |
| .layout-single-column .notification .account__relationship .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-dim); | |
| font-size: 20px; | |
| } | |
| .layout-single-column .list-adder__lists .fa-times::before, | |
| .layout-single-column .account__wrapper .account__relationship .icon-button.active .fa::before, | |
| .layout-single-column .explore__search-results .account__relationship .icon-button.active .fa::before, | |
| .layout-single-column .notification .account__relationship .icon-button.active .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-green); | |
| opacity: .75; | |
| } | |
| .layout-single-column .list-adder__lists .fa-times:hover::before, | |
| .layout-single-column .explore__search-results .icon-button.active:hover .fa::before, | |
| .layout-single-column .notification .account__relationship .icon-button.active:hover .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-red); | |
| opacity: 1; | |
| } | |
| .layout-single-column .explore__search-results .icon-button:focus .fa::before, | |
| .layout-single-column .notification .account__relationship .icon-button:focus .fa::before, | |
| .layout-single-column .explore__search-results .icon-button.active:focus .fa::before, | |
| .layout-single-column .notification .account__relationship .icon-button.active:focus .fa::before, | |
| .layout-single-column .explore__search-results .icon-button:hover .fa::before, | |
| .layout-single-column .notification .account__relationship .icon-button:hover .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-green); | |
| opacity: 1; | |
| } | |
| .layout-single-column .notification .account__relationship { | |
| border-radius: 50%; | |
| height: 24px; | |
| transform: translateY(-4px); | |
| } | |
| /* Emoji-mart search input */ | |
| .layout-single-column .emoji-mart-search-icon svg { | |
| fill: var(--color-border); | |
| opacity: 1; | |
| } | |
| .layout-single-column .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg { | |
| fill: var(--color-accent); | |
| } | |
| .layout-single-column .emoji-mart-search > input { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-single-column .compose-form__autosuggest-wrapper textarea::placeholder, | |
| .layout-single-column .report-dialog-modal__textarea::placeholder, | |
| .layout-single-column .emoji-mart-search > input::placeholder { | |
| color: var(--color-dim); | |
| opacity: 1; | |
| } | |
| .layout-single-column .report-dialog-modal__textarea, | |
| .layout-single-column .report-dialog-modal__textarea:focus, | |
| .layout-single-column .emoji-mart-search > input:focus { | |
| color: var(--color-light-text); | |
| } | |
| .layout-single-column .emoji-mart-search-icon:disabled { | |
| opacity: 1; | |
| } | |
| /* Search */ | |
| .layout-single-column .search .search__icon .fa-search { | |
| background-color: var(--color-mud); | |
| background-image: var(--icon-search); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: 20px; | |
| display: inline-block; | |
| height: 24px; | |
| top: 10px; | |
| width: 24px; | |
| } | |
| .layout-single-column input.setting-text, | |
| .layout-single-column .search__input { | |
| background-color: var(--color-mud); | |
| border-color: var(--color-mud); | |
| border-radius: 32px; | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| height: 42px; | |
| padding: 0 20px; | |
| } | |
| /* Input texts */ | |
| .layout-single-column .poll__option input[type="text"], | |
| .layout-single-column input.setting-text:focus, | |
| .layout-single-column .search__input:focus { | |
| color: var(--color-light-text); | |
| } | |
| /* Poll input */ | |
| .layout-single-column .poll__option input[type="text"] { | |
| background-color: transparent; | |
| border-color: var(--color-border); | |
| } | |
| .layout-single-column .poll__option input[type="text"]:focus { | |
| border-color: var(--color-accent); | |
| } | |
| /* Placeholders */ | |
| .layout-single-column .poll__option input[type="text"]::placeholder, | |
| .layout-single-column .search__input::placeholder, | |
| .layout-single-column input::placeholder, | |
| .layout-single-column input.setting-text::placeholder { | |
| color: var(--color-dim); | |
| opacity: 1; | |
| } | |
| /* Profile */ | |
| .layout-single-column .getting-started__trends h4, | |
| .layout-single-column .account__header__bar { | |
| border-color: var(--color-border); | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields { | |
| background-color: transparent; | |
| color: var(--color-dim); | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--gap-default); | |
| padding: 0; | |
| } | |
| /* Truncate too long links in the profile, like Nostr */ | |
| .layout-single-column .account__header__bio .account__header__fields a { | |
| display: block; | |
| max-width: 220px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl::after { | |
| content: '|'; | |
| order: 2; | |
| } | |
| /* Recognize empty field and remove pipe */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dd > span:empty)::after { | |
| display: none; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dt { | |
| order: 1; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dd { | |
| order: 3; | |
| } | |
| /* Hide the character in between Joined label */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:first-of-type::before, | |
| .layout-single-column .account__header__bio .account__header__fields dl:first-of-type::after { | |
| display: none; | |
| } | |
| /* Make full width... */ | |
| /* stylelint-disable no-duplicate-selectors */ | |
| .layout-single-column .account__header__bio .account__header__fields dl { | |
| width: 100%; | |
| } | |
| /* stylelint-enable no-duplicate-selectors */ | |
| /* ...except on those that have label with GitHub, github, YouTube or similar */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i]) { | |
| /* Move to last */ | |
| order: 9999; | |
| width: auto; | |
| } | |
| /* Hide labels that show "Website", "YouTube", etc. */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i]) dt { | |
| display: none; | |
| } | |
| /* Hide pipe after link icon and the link icon from the ones that already have an icon */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="website" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i])::before { | |
| display: none; | |
| } | |
| /* If GitHub etc. move even further from links */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"]) { | |
| /* Move to last-last */ | |
| order: 99999; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i])::after { | |
| content: var(--icon-github); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="discord" i])::after { | |
| content: var(--icon-discord); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="linkedin" i])::after { | |
| content: var(--icon-linkedin); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="IG"], dt[title*="instagram" i])::after { | |
| content: var(--icon-instagram); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="youtube" i])::after { | |
| content: var(--icon-youtube); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="twitch" i])::after { | |
| content: var(--icon-twitch); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="x" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="twitter" i])::after { | |
| content: var(--icon-twitter); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="patreon" i])::after { | |
| content: var(--icon-patreon); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="paypal" i])::after { | |
| content: var(--icon-paypal); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="kofi" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="ko-fi" i])::after { | |
| content: var(--icon-kofi); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="masto" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="mastodon" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="Alt account" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title~="account" i])::after, | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title~="Mastodon account" i])::after { | |
| content: var(--icon-mastodon); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="threads" i])::after { | |
| content: var(--icon-threads); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="bluesky" i])::after { | |
| content: var(--icon-bluesky); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="nostr" i])::after { | |
| content: var(--icon-nostr); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* Default link icon */ | |
| .layout-single-column .account__header__bio .account__header__fields dl::before { | |
| content: var(--icon-link); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* If the profile item has no link element, show just label icon */ | |
| .layout-single-column .account__header__bio .account__header__fields dl:not(:has(a))::before { | |
| content: var(--icon-label); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* Verified colors for Firefox before :has */ | |
| .layout-single-column .account__details .verified-badge a, | |
| .layout-single-column .account__header__bar .account__header__fields .verified__mark, | |
| .layout-single-column .account__header__bar .account__header__fields .verified a, | |
| .layout-single-column .account__header__bar .account__header__bio .account__header__fields .verified a, | |
| .layout-single-column .account__header__bar .account__header__bio .account__header__fields .verified dd { | |
| color: var(--color-verified); | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Reset verified colors */ | |
| .layout-single-column .account__details .verified-badge a, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified a, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified a, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified dd { | |
| color: var(--color-accent); | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Replace verified__mark */ | |
| .layout-single-column .account__details .verified-badge .verified-badge__mark::before, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark { | |
| content: var(--icon-verified-smaller); | |
| } | |
| .layout-single-column .account__details .verified-badge, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd { | |
| align-items: center; | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .layout-single-column .account__details .verified-badge .verified-badge__mark, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(1) { | |
| align-items: center; | |
| display: flex; | |
| order: 2; | |
| } | |
| .layout-single-column .account__details .verified-badge > span, | |
| .layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(2) { | |
| order: 1; | |
| } | |
| /* Joined label */ | |
| .layout-single-column .account__header__bio .account__header__fields dt:not([title]) { | |
| display: inline-flex; | |
| font-weight: var(--font-weight-regular); | |
| gap: calc(var(--gap-default) / 2); | |
| text-transform: unset; | |
| } | |
| .layout-single-column h4, | |
| .layout-single-column .search__popout h4, | |
| .layout-single-column .search-popout h4, | |
| .layout-single-column .server-banner h4 { | |
| text-transform: unset; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dt:not([title])::before { | |
| content: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-single-column .account__header__bio .account__header__fields dd, | |
| .layout-single-column .account__header__bio .account__header__fields dt { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| text-transform: unset; | |
| } | |
| /* stylelint-disable no-duplicate-selectors */ | |
| .layout-single-column .account__header__bio .account__header__fields dl { | |
| background-color: transparent; | |
| border: 0; | |
| color: var(--color-dim); | |
| display: inline-flex; | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| gap: calc(var(--gap-default) / 2); | |
| padding: 0; | |
| } | |
| /* stylelint-enable no-duplicate-selectors */ | |
| .layout-single-column .getting-started__trends h4 { | |
| border: 0; | |
| font-size: var(--font-size-heading); | |
| font-weight: var(--font-weight-bold); | |
| line-height: 24px; | |
| margin-bottom: var(--gap-default); | |
| text-transform: unset; | |
| } | |
| .layout-single-column .getting-started__trends { | |
| margin-top: calc(var(--gap-default) * 2); | |
| } | |
| .layout-single-column .trends__item__name a { | |
| font-size: var(--font-size); | |
| } | |
| .layout-single-column .trends__item__name { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .layout-single-column .account__header__image { | |
| height: 200px; | |
| } | |
| .layout-single-column .account__header__bar .avatar .account__avatar { | |
| background-color: transparent; | |
| border: 0; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: 133.5px !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 133.5px !important; | |
| } | |
| .layout-single-column .account__header__tabs { | |
| overflow: visible; | |
| } | |
| .layout-single-column .account__header__tabs .account-role { | |
| display: none; | |
| width: 133.5px; | |
| } | |
| /* Follow/unfollow button */ | |
| body.embed .button.logo-button, | |
| .layout-single-column .notification__report__actions .button, | |
| .layout-single-column .column-inline-form button, | |
| .layout-single-column .explore__suggestions .account-card__actions__button button, | |
| .layout-single-column .account__header__tabs__buttons .button, | |
| .layout-single-column .account .account__relationship > .button, | |
| .layout-single-column .notification .account__relationship > .button { | |
| background-color: transparent; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| color: var(--color-light-text); | |
| font-size: var(--font-size); | |
| max-width: 36vw; | |
| overflow: hidden; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| text-overflow: ellipsis; | |
| transition: all 200ms; | |
| white-space: nowrap; | |
| } | |
| /* Dark button borders and other things that have borders all around */ | |
| body.embed .button.logo-button, | |
| .layout-single-column .notification__report__actions .button, | |
| .layout-single-column .column-inline-form button, | |
| .layout-single-column .explore__suggestions .account-card__actions__button button, | |
| .layout-single-column .account__header__tabs__buttons .button, | |
| .layout-single-column .account__header__tabs__buttons .icon-button, | |
| .layout-single-column .notification .account__relationship > .button, | |
| .layout-single-column .account .account__relationship > .button { | |
| border: 1px solid var(--color-outer-space); | |
| } | |
| .layout-single-column .account__header__tabs__buttons .icon-button { | |
| color: var(--color-light-text); | |
| } | |
| /* Fix focus overflow for 4.1.4-nightly */ | |
| .layout-single-column .account__header__tabs__buttons { | |
| overflow: visible; | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column .account__header__tabs__buttons .icon-button { | |
| align-items: center; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| display: inline-flex; | |
| justify-content: center; | |
| } | |
| /* Exception for close icon that seem to align wrongly when active */ | |
| .layout-single-column .account__header__tabs__buttons .icon-button .fa.fa-close { | |
| align-self: start; | |
| } | |
| body.embed .button.logo-button:hover, | |
| .layout-single-column .column-inline-form button:hover, | |
| .layout-single-column .explore__suggestions .account-card__actions__button button:hover, | |
| .layout-single-column .account__header__tabs__buttons .icon-button.active { | |
| color: var(--color-light-text); | |
| } | |
| .layout-single-column .account__header__tabs__buttons .icon-button .fa::before { | |
| font-size: 17px; | |
| } | |
| .layout-single-column .account__header__tabs__buttons .icon-button .fa-bell-o::before, | |
| .layout-single-column .account__header__tabs__buttons .icon-button .fa-bell::before { | |
| content: var(--icon-bell-header-tabs); | |
| } | |
| .layout-single-column .account__header__tabs__buttons .icon-button.active .fa-bell-o::before, | |
| .layout-single-column .account__header__tabs__buttons .icon-button.active .fa-bell::before { | |
| content: var(--icon-bell-header-tabs-active); | |
| } | |
| .layout-single-column .account__header__tabs__buttons .icon-button .fa-ellipsis-v::before { | |
| position: relative; | |
| top: -2px; | |
| } | |
| .layout-single-column .explore__suggestions .account-card__actions__button button:hover, | |
| .layout-single-column .account__header__tabs__buttons .button:focus, | |
| .layout-single-column .account__header__tabs__buttons .button:hover, | |
| .layout-single-column .notification .account__relationship > .button:hover, | |
| .layout-single-column .notification .account__relationship > .button:focus, | |
| .layout-single-column .account .account__relationship > .button:hover, | |
| .layout-single-column .account .account__relationship > .button:focus { | |
| background-color: var(--color-profile-button-hover); | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button:focus, | |
| .layout-single-column .status__action-bar .icon-button:focus, | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover, | |
| .layout-single-column .status__action-bar .icon-button:hover { | |
| background-color: transparent; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover::after, | |
| .layout-single-column .status__action-bar .icon-button:hover::after { | |
| opacity: 1; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button::after, | |
| .layout-single-column .status__action-bar .icon-button::after { | |
| background-color: rgba(96, 105, 132, .15); | |
| border-radius: 50%; | |
| content: ''; | |
| height: 36px; | |
| left: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| position: absolute; | |
| top: -8px; | |
| transform: translateX(8px) translateY(1px); | |
| width: 36px; | |
| z-index: -1; | |
| } | |
| .layout-single-column .conversation .icon-button::after { | |
| transform: translateX(-8px) translateY(1px); | |
| } | |
| .layout-single-column .conversation__content { | |
| overflow: visible; | |
| } | |
| .layout-single-column .detailed-status__button { | |
| position: relative; | |
| } | |
| .layout-single-column .detailed-status__button .icon-button.star-icon::after { | |
| transform: translateX(3px); | |
| } | |
| .layout-single-column .status__action-bar .icon-button.icon-button--with-counter::after { | |
| transform: translateX(-6px) translateY(-1px); | |
| } | |
| /* Misc UI fixes */ | |
| .layout-single-column .search__icon .fa.active { | |
| opacity: 1; | |
| } | |
| /* Explore -> For you shade in bio */ | |
| .layout-single-column .scrollable .account-card__bio::after { | |
| /* stylelint-disable-next-line */ | |
| background: linear-gradient(270deg, var(--color-bg), transparent); | |
| } | |
| /* Empty column */ | |
| .layout-single-column .empty-column-indicator { | |
| min-height: 120px; | |
| } | |
| .layout-single-column .status__prepend + .status { | |
| padding-top: 10px; | |
| } | |
| .layout-single-column .search__icon .fa-times-circle { | |
| top: 14px; | |
| } | |
| .layout-single-column .setting-text__toolbar { | |
| align-items: center; | |
| } | |
| .layout-single-column .timeline-hint strong { | |
| display: block; | |
| margin-bottom: var(--gap-default); | |
| } | |
| .layout-single-column .timeline-hint br { | |
| display: none; | |
| } | |
| /* General fixes */ | |
| .layout-single-column .account__header__bar .avatar { | |
| /* stylelint-disable-next-line */ | |
| margin-left: 0 !important; | |
| } | |
| /* Fix for button line-height */ | |
| .layout-single-column .button.logo-button { | |
| line-height: 22px; | |
| } | |
| /* Visual indicator about direct messages | |
| @source https://github.com/mastodon/mastodon/issues/22158#issuecomment-1353661031 */ | |
| .layout-single-column .detailed-status-direct { | |
| position: relative; | |
| } | |
| .layout-single-column .status__wrapper-direct::after, | |
| .layout-single-column .detailed-status-direct::after { | |
| border-left: 20px solid transparent; | |
| border-top: 20px solid var(--color-accent); | |
| /* Add a ribbon to the corner */ | |
| content: ''; | |
| height: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 0; | |
| } | |
| .layout-single-column .notification .status__wrapper-direct::after { | |
| top: -40px; | |
| } | |
| /* Private message conversations */ | |
| .layout-single-column .conversation .status__action-bar { | |
| padding-left: 0; | |
| } | |
| /* Default buttons */ | |
| .layout-single-column .compose-form__buttons button, | |
| .layout-single-column .button { | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| } | |
| /* Compose hover and focus fix */ | |
| .layout-single-column .report-dialog-modal__actions .button:hover, | |
| .layout-single-column .server-banner .button, | |
| .layout-single-column .sign-in-banner .button, | |
| .layout-single-column .ui__header__links .button, | |
| .layout-single-column .compose-form__publish-button-wrapper button { | |
| background-color: var(--color-accent-dark); | |
| border-color: var(--color-accent-dark); | |
| color: var(--color-button-text); | |
| transition: all 200ms; | |
| } | |
| /* Compose form */ | |
| .layout-single-column .compose-panel .compose-form { | |
| background-color: transparent; | |
| margin-bottom: 0; | |
| position: relative; | |
| z-index: 4; | |
| } | |
| /* Footer items */ | |
| .link-footer { | |
| position: relative; | |
| z-index: 5; | |
| } | |
| .layout-single-column .compose-panel .compose-form, | |
| .layout-single-column .compose-panel, | |
| .layout-single-column .compose-form__autosuggest-wrapper { | |
| overflow: visible; | |
| } | |
| /* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */ | |
| @media (min-width: 889px) { | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea { | |
| /* stylelint-disable-next-line */ | |
| max-height: 20vh !important; /* stylelint-disable-next-line */ | |
| overflow-y: auto !important; | |
| resize: none; | |
| } | |
| /* Add slight background color for the compose form */ | |
| /* stylelint-disable-next-line no-duplicate-selectors */ | |
| .layout-single-column .compose-form .compose-form__autosuggest-wrapper, | |
| .layout-single-column .compose-form .compose-form__buttons-wrapper { | |
| background-color: var(--color-bg-compose-form); | |
| border-color: var(--color-bg-compose-form); | |
| padding-top: 0; | |
| transition: all 200ms; | |
| } | |
| /* Smooth color transition on focus */ | |
| .layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, | |
| .layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { | |
| background-color: var(--color-bg-compose-form-focus); | |
| border-color: var(--color-bg-compose-form-focus); | |
| } | |
| /* Fixes bottom row padding when there's a background */ | |
| .layout-single-column .compose-form .compose-form__buttons-wrapper { | |
| padding: calc(var(--gap-default) / 2); | |
| } | |
| .layout-single-column .navigation-bar + .compose-form { | |
| padding-top: 10px; | |
| } | |
| .layout-single-column .compose-form .emoji-picker-dropdown { | |
| inset-inline-end: 3px; | |
| position: absolute; | |
| top: 3px; | |
| } | |
| } | |
| @media (min-width: 889px) and (max-height: 1000px) { | |
| .layout-single-column .compose-form .autosuggest-textarea__textarea { | |
| /* stylelint-disable-next-line */ | |
| max-height: 10vh !important; | |
| resize: none; | |
| } | |
| } | |
| .layout-single-column .server-banner .button:hover, | |
| .layout-single-column .server-banner .button:focus, | |
| .layout-single-column .sign-in-banner .button:hover, | |
| .layout-single-column .sign-in-banner .button:hover:focus, | |
| .layout-single-column .ui__header__links .button:hover, | |
| .layout-single-column .ui__header__links .button:focus, | |
| .layout-single-column .compose-form__publish-button-wrapper button:hover, | |
| .layout-single-column .compose-form__publish-button-wrapper button:focus { | |
| background-color: var(--color-brand-mastodon-links); | |
| border-color: var(--color-brand-mastodon-links); | |
| color: var(--color-button-text); | |
| } | |
| /* Tertiary button */ | |
| .layout-single-column .button.button-tertiary { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| /* stylelint-disable-next-line */ | |
| border: 1px solid var(--color-accent-dark) !important; | |
| color: var(--color-ghost-button-text); | |
| padding: 6px 17px; | |
| } | |
| .layout-single-column .button.button-tertiary:active, | |
| .layout-single-column .button.button-tertiary:focus, | |
| .layout-single-column .button.button-tertiary:hover { | |
| border: 1px solid var(--color-accent-dark); | |
| } | |
| /* Secondary button */ | |
| .layout-single-column .button.button-secondary { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| border: 1px solid var(--color-dim); | |
| color: var(--color-dim); | |
| } | |
| .layout-single-column .button.button-secondary:hover { | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-light-text) !important; | |
| border-color: var(--color-light-text); | |
| color: var(--color-bg); | |
| } | |
| .layout-single-column .button.button-tertiary:focus, | |
| .layout-single-column .button.button-tertiary:hover { | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-brand-mastodon-links) !important; | |
| /* stylelint-disable-next-line */ | |
| border-color: var(--color-brand-mastodon-links) !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-bg) !important; | |
| /* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */ | |
| padding: 6px 17px; | |
| } | |
| /* Smaller icon for back button */ | |
| .layout-single-column .column-back-button i, | |
| .layout-single-column .column-header__back-button i { | |
| font-size: 12px; | |
| } | |
| .layout-single-column .icon-button__counter { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-single-column .notification__favourite-icon-wrapper .fa.fa-retweet { | |
| color: var(--color-green); | |
| } | |
| /* Smaller icons for status action bar */ | |
| .layout-single-column .status__action-bar .fa { | |
| font-size: 14.6px; | |
| min-width: 18px; | |
| } | |
| .layout-single-column .status__action-bar .fa.fa-retweet { | |
| min-width: 21px; | |
| } | |
| .layout-single-column .status__action-bar .icon-button--with-counter { | |
| align-items: center; | |
| display: inline-flex; | |
| gap: 6px; | |
| } | |
| .layout-single-column .status__action-bar .icon-button { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: unset !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: unset !important; | |
| } | |
| @media screen and (min-width: 890px) { | |
| /* Hide the space between Lists and the actual lists */ | |
| .layout-single-column .list-panel > hr, | |
| .layout-single-column .list-panel + hr { | |
| display: none; | |
| } | |
| /* Hide lists if there's not enough space on desktop vertically */ | |
| .layout-single-column .list-panel { | |
| display: none; | |
| opacity: 0; | |
| transition: all 200ms; | |
| } | |
| .layout-single-column .list-panel:focus, | |
| .layout-single-column .list-panel:hover, | |
| .layout-single-column .column-link[href="/lists"]:focus ~ .list-panel, | |
| .layout-single-column .column-link[href="/lists"]:hover ~ .list-panel { | |
| display: block; | |
| opacity: 1; | |
| } | |
| /* Order of the side nav items */ | |
| .layout-single-column .navigation-panel__logo { | |
| order: 1; | |
| } | |
| .layout-single-column .column-link[href="/home"] { | |
| order: 2; | |
| } | |
| .layout-single-column .column-link[href="/notifications"] { | |
| order: 3; | |
| } | |
| .layout-single-column .column-link[href="/explore"] { | |
| order: 4; | |
| } | |
| .layout-single-column .column-link[href="/public/local"] { | |
| order: 5; | |
| } | |
| .layout-single-column .column-link[href="/public"] { | |
| order: 6; | |
| } | |
| .layout-single-column .column-link[href="/conversations"] { | |
| order: 7; | |
| } | |
| .layout-single-column .column-link[href='/follow_requests'] { | |
| order: 8; | |
| } | |
| .layout-single-column .column-link[href="/bookmarks"] { | |
| order: 9; | |
| } | |
| .layout-single-column .column-link[href="/favourites"] { | |
| order: 10; | |
| } | |
| .layout-single-column .column-link[href="/lists"] { | |
| order: 12; | |
| } | |
| /* stylelint-disable-next-line no-duplicate-selectors */ | |
| .layout-single-column .list-panel { | |
| order: 13; | |
| } | |
| .layout-single-column .column-link[href="/settings/preferences"] { | |
| order: 11; | |
| } | |
| .layout-single-column .navigation-panel__sign-in-banner, | |
| .layout-single-column .navigation-panel__legal { | |
| order: 14; | |
| } | |
| .layout-single-column .flex-spacer { | |
| order: 15; | |
| } | |
| .layout-single-column .getting-started__trends { | |
| order: 16; | |
| } | |
| .layout-single-column .status__action-bar .icon-button { | |
| position: relative; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 50px !important; | |
| } | |
| .layout-single-column .conversation .status__action-bar .icon-button { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: auto !important; | |
| } | |
| /* Fix list links if they are too short */ | |
| .layout-single-column .list-panel .column-link { | |
| display: flex; | |
| } | |
| } | |
| /* Replace bookmark icon */ | |
| .layout-single-column .detailed-status .fa-bookmark::before, | |
| .layout-single-column .status .fa-bookmark::before { | |
| content: var(--icon-bookmark); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .column-link .fa-bookmark::before { | |
| content: var(--icon-bookmark-column-link); | |
| } | |
| .layout-single-column .column-link.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-column-link-active); | |
| } | |
| /* Replace bookmark icon */ | |
| .layout-single-column .status .icon-button:hover:focus .fa-bookmark::before, | |
| .layout-single-column .status .icon-button:focus .fa-bookmark::before, | |
| .layout-single-column .status .icon-button.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-active); | |
| } | |
| .layout-single-column .status button.icon-button:hover .fa-bookmark::before { | |
| content: var(--icon-bookmark-status-hover); | |
| } | |
| /* 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); | |
| } | |
| /* Home icon */ | |
| .layout-single-column .notification__filter-bar .fa-home::before { | |
| content: var(--icon-home-notification); | |
| } | |
| .layout-single-column .notification__filter-bar .active .fa-home::before { | |
| content: var(--icon-home-notification-active); | |
| } | |
| .layout-single-column .column-link .fa-home::before { | |
| content: var(--icon-home); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Federated icon */ | |
| .layout-single-column .column-link .fa-globe::before { | |
| content: var(--icon-globe); | |
| } | |
| .layout-single-column .column-link.active .fa-globe::before { | |
| content: var(--icon-globe-active); | |
| } | |
| .layout-single-column .column-link.active .fa-home::before { | |
| content: var(--icon-home-column-link-active); | |
| } | |
| /* Explore icon */ | |
| .layout-single-column .column-link .fa-hashtag::before { | |
| content: var(--icon-hashtag); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .column-link.active .fa-hashtag::before { | |
| content: var(--icon-hashtag-active); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Direct messages icon */ | |
| .layout-single-column .column-link .fa-at::before { | |
| content: var(--icon-direct-messages); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .column-link.active .fa-at { | |
| transform: scale(1.15); | |
| } | |
| .layout-single-column .column-link.active .fa-at::before { | |
| content: var(--icon-direct-messages-active); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* Preferences icon */ | |
| .layout-single-column .column-link .fa-cog::before { | |
| content: var(--icon-cog); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Replace retweet icon */ | |
| .layout-single-column .notification__filter-bar .fa-retweet::before { | |
| content: var(--icon-boost-notification-filter-bar); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-single-column .notification__filter-bar .active .fa-retweet::before { | |
| content: var(--icon-boost-notification-filter-bar-active); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-single-column .notification__filter-bar .fa-tasks::before, | |
| .layout-single-column .notification__filter-bar .fa-user-plus::before { | |
| font-size: 18px; | |
| } | |
| .layout-single-column .notification__filter-bar .active .fa-mailre-ply::before, | |
| .layout-single-column .notification__filter-bar .active .fa-reply-all::before, | |
| .layout-single-column .notification__filter-bar .active .fa-reply::before { | |
| content: var(--icon-reply-nofitication-filter-bar-active); | |
| } | |
| .layout-single-column .detailed-status button.icon-button i.fa-retweet, | |
| .layout-single-column .status button.icon-button i.fa-retweet { | |
| background-image: var(--icon-boost-status); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| /* Replace notification retweet icon */ | |
| .layout-single-column .notification__favourite-icon-wrapper .fa-retweet::before { | |
| content: var(--icon-boost-notification-wrapper); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column button.icon-button i.fa-retweet { | |
| background-image: var(--icon-boost); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .layout-single-column button.icon-button:hover i.fa-retweet, | |
| .layout-single-column button.icon-button.active i.fa-retweet { | |
| background-image: var(--icon-boost-active); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| /* Un-boost and un-bookmark styles */ | |
| /* Mobile devices */ | |
| .layout-single-column button.icon-button:not(.active):focus i.fa-retweet, | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-retweet { | |
| animation: none; | |
| background-image: var(--icon-boost); | |
| } | |
| .layout-single-column .status button.icon-button:not(.active):focus .fa-bookmark::before, | |
| .layout-single-column .status button.icon-button:not(.active):hover .fa-bookmark::before { | |
| content: var(--icon-bookmark); | |
| } | |
| /* Un-boost and un-bookmark numbers on explore page */ | |
| .layout-single-column button.icon-button:not(.active):focus i.fa-retweet ~ span, | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-retweet ~ span { | |
| color: var(--color-dim); | |
| } | |
| /* If a hover device */ | |
| @media (hover: hover) { | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-retweet, | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-retweet ~ span { | |
| color: var(--color-green); | |
| } | |
| .layout-single-column .status button.icon-button:not(.active):hover i.fa-bookmark::before { | |
| /* stylelint-disable-next-line */ | |
| content: var(--icon-bookmark-status-hover-red); | |
| } | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-retweet { | |
| /* stylelint-disable-next-line */ | |
| background-image: var(--icon-boost-active) !important; | |
| } | |
| } | |
| .layout-single-column button.icon-button:hover i.fa-retweet ~ span, | |
| .layout-single-column button.icon-button.active i.fa-retweet ~ span { | |
| color: var(--color-green); | |
| } | |
| .layout-single-column button.icon-button:hover i.fa-star ~ span, | |
| .layout-single-column button.icon-button.active i.fa-star ~ span { | |
| color: var(--color-red); | |
| } | |
| /* Replace reply icon */ | |
| .layout-single-column .notification__filter-bar .fa-mail-reply::before, | |
| .layout-single-column .notification__filter-bar .fa-reply::before, | |
| .layout-single-column .notification__filter-bar .fa-reply-all::before { | |
| position: relative; | |
| top: 4px; | |
| } | |
| .layout-single-column .conversation .fa-reply::before, | |
| .layout-single-column .notification__filter-bar .fa-mail-reply::before, | |
| .layout-single-column .notification__filter-bar .fa-reply::before, | |
| .layout-single-column .notification__filter-bar .fa-reply-all::before, | |
| .layout-single-column .detailed-status .fa-mail-reply::before, | |
| .layout-single-column .detailed-status .fa-reply::before, | |
| .layout-single-column .detailed-status .fa-reply-all::before, | |
| .layout-single-column .status .fa-mail-reply::before, | |
| .layout-single-column .status .fa-reply::before, | |
| .layout-single-column .status .fa-reply-all::before { | |
| content: var(--icon-reply); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-single-column .detailed-status__action-bar .fa-mail-reply::before, | |
| .layout-single-column .detailed-status__action-bar .fa-reply::before, | |
| .layout-single-column .detailed-status__action-bar .fa-reply-all::before { | |
| content: var(--icon-reply-detailed-status-action-bar); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-mail-reply::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-reply::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-reply-all::before { | |
| content: var(--icon-reply-detailed-status-action-bar-hover); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .conversation .icon-button:hover .fa-reply::before { | |
| content: var(--icon-reply-conversation); | |
| } | |
| .layout-single-column .detailed-status__action-bar .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar-hover); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar-active); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .status button.icon-button:hover .fa-mail-reply::before, | |
| .layout-single-column .status button.icon-button:hover .fa-reply::before, | |
| .layout-single-column .status button.icon-button:hover .fa-reply-all::before { | |
| content: var(--icon-reply-status-hover); | |
| } | |
| /* More icons */ | |
| .layout-single-column .fa-list-ul::before { | |
| content: var(--icon-list); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .relationship-tag { | |
| background-color: var(--color-mud); | |
| color: var(--color-light-text); | |
| font-size: 11px; | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 12px; | |
| opacity: 1; | |
| } | |
| /* iPad etc. */ | |
| @media (max-width: 1174px) { | |
| .layout-single-column .detailed-status__action-bar .icon-button::after, | |
| .layout-single-column .status__action-bar .icon-button::after, | |
| .layout-single-column .detailed-status__action-bar-dropdown .icon-button::after { | |
| display: none; | |
| } | |
| .layout-single-column .ui__header, | |
| .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-single-column .tabs-bar__wrapper { | |
| backdrop-filter: unset; | |
| background-color: transparent; | |
| padding: 0; | |
| } | |
| .layout-single-column .columns-area__panels__main { | |
| width: calc(100% - var(--width-side-panel)); | |
| } | |
| } | |
| /* In-between breakpoint */ | |
| @media (min-width: 889px) and (max-width: 1174px) { | |
| .layout-single-column .columns-area__panels__main > div { | |
| border-right: 0; | |
| } | |
| .layout-single-column .ui__header, | |
| .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-single-column .tabs-bar__wrapper { | |
| backdrop-filter: blur(12px); | |
| background-color: var(--color-bg-75); | |
| border-color: var(--color-border); | |
| } | |
| .layout-single-column .columns-area__panels { | |
| width: calc(100% - 1px); | |
| } | |
| .layout-single-column .columns-area__panels__main > .tabs-bar__wrapper { | |
| border-right: 0; | |
| } | |
| } | |
| /* Mobile */ | |
| @media screen and (max-width: 889px) { | |
| /* Better blur overlay for ui-header */ | |
| .layout-single-column .ui::after { | |
| backdrop-filter: blur(12px); | |
| /* stylelint-disable-next-line */ | |
| -webkit-backface-visibility: hidden; | |
| background-color: var(--color-bg-75); | |
| content: ''; | |
| /* Height is .ui__header + .tabs-bar__wrapper */ | |
| height: calc(48px + 56px); | |
| left: 0; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| /* Fix navigation-bar getting underneath layer */ | |
| .layout-single-column .navigation-bar { | |
| z-index: 2; | |
| } | |
| .layout-single-column .tabs-bar__wrapper { | |
| margin-right: 0; | |
| position: sticky; | |
| top: 55px; | |
| z-index: 2; | |
| } | |
| .layout-single-column .columns-area__panels__main { | |
| order: 1; | |
| position: unset; | |
| width: 100%; | |
| } | |
| .layout-single-column .columns-area__panels { | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| } | |
| .layout-single-column .columns-area__panels__main::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { | |
| background-color: var(--color-bg); | |
| border-top: 1px solid var(--color-border); | |
| bottom: 0; | |
| height: 3.5rem; | |
| left: 0; | |
| max-height: 16vh; | |
| width: 100vw; | |
| } | |
| .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { | |
| flex-direction: row; | |
| gap: 0; | |
| height: 100%; | |
| overflow-x: auto; | |
| padding: 0; | |
| } | |
| .layout-single-column .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { | |
| display: none; | |
| } | |
| .layout-single-column .column-link { | |
| justify-content: center; | |
| margin-right: unset; | |
| padding-bottom: 0; | |
| padding-left: var(--gap-column-link); | |
| padding-right: var(--gap-column-link); | |
| padding-top: 0; | |
| width: 38px; | |
| } | |
| .layout-single-column .item-list .column-link { | |
| padding-bottom: 4px; | |
| padding-top: 4px; | |
| width: unset; | |
| } | |
| .layout-single-column .column-link:hover, | |
| .layout-single-column .column-link:focus { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-home { | |
| font-size: 27px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-ellipsis-h { | |
| position: relative; | |
| top: -4px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-users, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bell { | |
| font-size: 20px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon { | |
| font-size: 24px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-fw { | |
| font-size: 22px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-star, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bookmark, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bell { | |
| font-size: 18px; | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .columns-area__panels__main > div, | |
| .layout-single-column .columns-area__panels__main > div.columns-area.columns-area--mobile { | |
| border: 0; | |
| } | |
| .layout-single-column .ui__header { | |
| align-items: center; | |
| border-bottom: 0; | |
| box-sizing: border-box; | |
| display: flex; | |
| height: 56px; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| .layout-single-column .account__header__bar .avatar .account__avatar { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: 106px !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 106px !important; | |
| } | |
| .layout-single-column .account__header__image { | |
| height: 157px; | |
| } | |
| .layout-single-column .column > .scrollable { | |
| padding-bottom: 55px; | |
| } | |
| .layout-single-column .actions-modal ul li:not(:empty) a { | |
| color: var(--color-light-text); | |
| } | |
| /* "Your lists" view */ | |
| .layout-single-column .column-subheading ~ article { | |
| padding-bottom: calc(var(--gap-default) / 2); | |
| padding-top: calc(var(--gap-default) / 2); | |
| } | |
| .layout-single-column .compose-form { | |
| padding-bottom: calc(3.5rem + calc(var(--gap-default) * 2)); | |
| } | |
| /* Column items order */ | |
| .layout-single-column .navigation-panel .column-link, | |
| .layout-single-column .navigation-panel .list-panel, | |
| .layout-single-column .navigation-panel hr, | |
| .layout-single-column .navigation-panel .navigation-panel__logo { | |
| order: 99; | |
| } | |
| /* Make the column link 1/4 of width of the screen */ | |
| .layout-single-column .navigation-panel .navigation-panel__legal, | |
| .layout-single-column .navigation-panel .column-link { | |
| border: 0; | |
| flex: 0 0 calc(100vw / 4); | |
| margin-inline: 0; | |
| padding: 0; | |
| padding-inline: 0; | |
| } | |
| .layout-single-column .navigation-panel .navigation-panel__legal { | |
| order: 999; | |
| text-align: center; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(1) { | |
| order: 2; | |
| } | |
| /* Home */ | |
| .layout-single-column .navigation-panel .column-link:nth-child(2) { | |
| order: 1; | |
| } | |
| /* Notifications */ | |
| .layout-single-column .navigation-panel .column-link:nth-child(3) { | |
| order: 4; | |
| } | |
| /* Explore */ | |
| .layout-single-column .navigation-panel .column-link:nth-child(4) { | |
| order: 2; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(5) { | |
| order: 5; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(6) { | |
| order: 6; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(7) { | |
| order: 7; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(8) { | |
| order: 8; | |
| } | |
| /* Lists */ | |
| .layout-single-column .column-link[href="/lists"] { | |
| order: 4; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(11) { | |
| order: 11; | |
| } | |
| .layout-single-column .navigation-panel .column-link:nth-child(12) { | |
| order: 12; | |
| } | |
| /* Fix "About" page's server thumbnail margins */ | |
| .about__header__hero { | |
| margin-top: 30px; | |
| } | |
| } | |
| /* Add bottom padding to the navigation panel for the | |
| Safari PWA on iPhones with the portrait mode home bar */ | |
| @media screen and (device-width: 375px) and (device-height: 812px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */ screen and (device-width: 390px) and (device-height: 844px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro */ screen and (device-width: 393px) and (device-height: 852px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone XR and iPhone 11 */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone Xs Max and iPhone 11 Pro Max */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */ screen and (device-width: 428px) and (device-height: 926px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro Max */ screen and (device-width: 430px) and (device-height: 932px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone) { | |
| .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { | |
| padding-bottom: 26px; | |
| } | |
| /* Fix top header overlapping in /publish on iPhone */ | |
| .layout-single-column .columns-area--mobile:has(.compose-form) { | |
| top: 34px; | |
| } | |
| } | |
| /* stylelint-disable media-feature-name-no-vendor-prefix */ | |
| /* Fixes for iPhone Safari + iPhone Safari PWA */ | |
| @media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */ screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 14 Pro */ screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone XR and iPhone 11 */ screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), /* iPhone Xs Max and iPhone 11 Pro Max */ screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */ screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 14 Pro Max */ screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { | |
| /* Fix top header overlapping in /publish on iPhone */ | |
| .layout-single-column .columns-area--mobile:has(.compose-form) { | |
| top: 34px; | |
| } | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button { | |
| position: relative; | |
| } | |
| .layout-single-column .detailed-status__action-bar-dropdown .icon-button::after, | |
| .layout-single-column .detailed-status__button .icon-button::after { | |
| transform: translateX(-6px); | |
| } | |
| /* Add border radius to media */ | |
| .layout-single-column .media-gallery, | |
| .layout-single-column .audio-player, | |
| .layout-single-column .video-player, | |
| .layout-single-column .media-gallery__gifv, | |
| .layout-single-column .media-gallery__preview { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| } | |
| /* Exception for your own profile media gallery */ | |
| .layout-single-column .account-gallery__container .media-gallery__gifv { | |
| border-radius: 0; | |
| } | |
| /* Hide autoplaying gifs in notifications (they get annoying if you have favs/boosts on) */ | |
| .layout-single-column .notification.notification-reblog .media-gallery:has(.media-gallery__gifv.autoplay), | |
| .layout-single-column .notification.notification-favourite .media-gallery:has(.media-gallery__gifv.autoplay) { | |
| display: none; | |
| } | |
| /* More distinct focus color for accessibility, instead of just white */ | |
| .layout-single-column input:focus-visible { | |
| outline-color: var(--color-accent); | |
| outline-style: solid; | |
| } | |
| /* Embeds outside Mastodon */ | |
| body.embed { | |
| /* Make sure with !important */ | |
| /* stylelint-disable-next-line */ | |
| background: transparent !important; | |
| border: 0; | |
| } | |
| body.embed .entry .detailed-status { | |
| backface-visibility: hidden; | |
| background-color: #00000059; | |
| /* stylelint-disable-next-line */ | |
| border: 0 !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| border-radius: 0 !important; | |
| overflow: hidden; | |
| } | |
| /* Destructive colors (For you -suggestions, users when focused to the follow button */ | |
| .layout-single-column .button.logo-button.button--destructive:active, | |
| .layout-single-column .button.logo-button.button--destructive:focus { | |
| background-color: var(--color-destructive); | |
| border-color: var(--color-destructive); | |
| } | |
| /* Fix character counter color when it's over the limit */ | |
| .layout-single-column .character-counter.character-counter--over { | |
| color: var(--color-destructive); | |
| } | |
| /* 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; | |
| } | |
| /* 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; | |
| } | |
| /* Show more in server banner */ | |
| .layout-single-column .server-banner__meta__column { | |
| max-width: 60%; | |
| width: unset; | |
| } | |
| /* Increase gap for server-banner__meta */ | |
| .layout-single-column .server-banner__meta { | |
| gap: 25px; | |
| } | |
| /* Native Mastodon 4.1.2-nightly threaded lines */ | |
| .layout-single-column .status__line--first { | |
| height: calc(100% + var(--size-avatar)); | |
| } | |
| .layout-single-column .status__line--full { | |
| height: calc(100% + 32px); | |
| } | |
| /* Default lines when replying in real time */ | |
| .layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { | |
| height: 0; | |
| } | |
| /* Hide line before first in thread */ | |
| .layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), | |
| .layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { | |
| height: 0; | |
| } | |
| .layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, | |
| .layout-single-column .status__line--full.status__line--first { | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .layout-single-column .detailed-status { | |
| background-color: transparent; | |
| border-top: 0; | |
| } | |
| /* Threaded line, actually */ | |
| .layout-single-column .status__line { | |
| border-inline-start: 2px solid var(--color-thread-line); | |
| -webkit-border-start: 2px solid var(--color-thread-line); | |
| } | |
| .layout-single-column .status__line--full::before { | |
| /* background-color: var(--color-thread-line); */ | |
| display: none; | |
| } | |
| /* Hide the "stub" from the first status line */ | |
| div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, | |
| .layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, | |
| .layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { | |
| top: 32px; | |
| } | |
| .layout-single-column .status--in-thread .status__action-bar, | |
| .layout-single-column .status--in-thread .status__content { | |
| padding-left: 4px; | |
| } | |
| /* Scrollbars */ | |
| .layout-single-column .drawer__inner::-webkit-scrollbar, | |
| .layout-single-column textarea::-webkit-scrollbar, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar, | |
| .layout-single-column::-webkit-scrollbar { | |
| height: 6px; | |
| width: 6px; | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-thumb, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-thumb, | |
| .layout-single-column::-webkit-scrollbar-thumb { | |
| background-color: var(--color-border); | |
| border: 0px solid var(--color-border); | |
| border-radius: 50px; | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-thumb:hover, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:hover, | |
| .layout-single-column::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-light-purple); | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-thumb:active, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:active, | |
| .layout-single-column::-webkit-scrollbar-thumb:active { | |
| background-color: var(--color-black-coral); | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-track, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-track, | |
| .layout-single-column::-webkit-scrollbar-track { | |
| background-color: var(--color-bg); | |
| border: 0px solid var(--color-border); | |
| border-radius: 0; | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-track:hover, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-track:hover, | |
| .layout-single-column::-webkit-scrollbar-track:hover { | |
| background-color: var(--color-bg); | |
| } | |
| .layout-single-column textarea::-webkit-scrollbar-track:active, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:active, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-track:active, | |
| .layout-single-column::-webkit-scrollbar-track:active { | |
| background-color: var(--color-bg); | |
| } | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-corner, | |
| .layout-single-column textarea::-webkit-scrollbar-corner, | |
| .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-corner, | |
| .layout-single-column .reply-indicator::-webkit-scrollbar-corner, | |
| .layout-single-column::-webkit-scrollbar-corner { | |
| background-color: transparent; | |
| } | |
| /* Drawer scollbars */ | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-thumb { | |
| background-color: var(--color-dim); | |
| border: 0; | |
| border-radius: 50px; | |
| } | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-light-purple); | |
| } | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-thumb:active { | |
| background-color: var(--color-light-text); | |
| } | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-track { | |
| background-color: var(--color-dark); | |
| border: 0; | |
| border-radius: 0; | |
| } | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-track:hover, | |
| .layout-single-column .drawer__inner::-webkit-scrollbar-track:active { | |
| background-color: var(--color-dark); | |
| } | |
| /* | |
| * Boost animation micro-interaction start | |
| * --------------------------------------- | |
| */ | |
| @keyframes boost-animate { | |
| 100% { | |
| background-position: -7770px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| /* While active, hide the original icon */ | |
| .layout-single-column.no-reduce-motion .icon-button.active:focus .fa-retweet { | |
| /* stylelint-disable-next-line */ | |
| background-image: none !important; | |
| } | |
| .layout-single-column.no-reduce-motion .icon-button.active { | |
| position: relative; | |
| } | |
| .layout-single-column.no-reduce-motion .icon-button.active:focus .fa-retweet::before { | |
| /* 37 frames */ | |
| animation: boost-animate 1.65s steps(37) forwards; | |
| /* stylelint-disable-next-line */ | |
| background-position: left; | |
| background-repeat: no-repeat; | |
| /* stylelint-disable-next-line */ | |
| content: '' !important; | |
| /* stylelint-disable-next-line */ | |
| display: block !important; | |
| height: 101px; | |
| left: -76px; | |
| min-height: 23px; | |
| min-width: 42.22px; | |
| pointer-events: none; | |
| position: absolute; | |
| top: -40.4px; | |
| transform: scale(0.85); | |
| width: 200px; | |
| } | |
| /* Detailed status offset for boost animation */ | |
| .layout-single-column.no-reduce-motion .detailed-status__button .icon-button.active:focus .fa-retweet::before { | |
| left: -89px; | |
| top: -39px; | |
| } | |
| /* Offset in numbered item */ | |
| .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .fa-retweet::before { | |
| left: -88px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .layout-single-column.no-reduce-motion .icon-button.active:focus .fa-retweet::before { | |
| /* stylelint-disable-next-line */ | |
| content: var(--icon-boost-active) !important; | |
| } | |
| } | |
| /* Detailed status offset for boost animation on mobile */ | |
| @media (max-width: 890px) { | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column.no-reduce-motion .icon-button.active:focus .fa-retweet:before { | |
| left: -90px; | |
| } | |
| } | |
| /* | |
| * Boost animation micro-interaction ends | |
| * -------------------------------------- | |
| */ | |
| /* | |
| * Heart animation micro-interaction start | |
| * --------------------------------------- | |
| */ | |
| @keyframes heart-animate { | |
| 100% { | |
| background-position: -2800px; | |
| } | |
| } | |
| /* Left sidebar column links */ | |
| .layout-single-column .column-link .fa-star::before { | |
| content: var(--icon-heart-column-link); | |
| } | |
| .layout-single-column .column-link.active .fa-star::before { | |
| content: var(--icon-heart-column-link-active); | |
| } | |
| .layout-single-column .notification__favourite-icon-wrapper .fa-star::before { | |
| content: var(--icon-heart-notification); | |
| } | |
| .layout-single-column .notification__filter-bar .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button .fa-star::before, | |
| .layout-single-column .status__action-bar .icon-button .fa-star::before { | |
| content: var(--icon-heart); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-single-column .notification__filter-bar .active .fa-star::before { | |
| content: var(--icon-heart-active); | |
| } | |
| .layout-single-column .detailed-status__action-bar .active:not(.activated) .fa-star::before, | |
| .layout-single-column .status__action-bar .active:not(.activated) .fa-star::before { | |
| content: var(--icon-heart-active-red); | |
| } | |
| .layout-single-column .notification__filter-bar .fa-star::before { | |
| position: relative; | |
| top: 2px; | |
| } | |
| .icon-button.star-icon.active, | |
| .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--color-red); | |
| } | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-single-column .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-single-column .status button.icon-button:hover .fa-star::before { | |
| content: var(--icon-heart-hover); | |
| } | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon { | |
| min-height: 23px; | |
| min-width: 42.22px; | |
| position: relative; | |
| } | |
| /* Disable default Mastodon animation: spring-rotate-in 1s linear; */ | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon .fa-star { | |
| /* stylelint-disable-next-line */ | |
| animation: none !important; | |
| } | |
| /* While active, hide the original icon */ | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate:hover .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: '' !important; | |
| } | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| background-position: 0px; | |
| background-repeat: no-repeat; | |
| /* stylelint-disable-next-line */ | |
| content: '' !important; | |
| height: 100px; | |
| left: -38px; | |
| pointer-events: none; | |
| position: absolute; | |
| top: -38px; | |
| transform: scale(.6); | |
| width: 100px; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| /* 28 frames */ | |
| animation: heart-animate 0.8s steps(28) forwards; | |
| } | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before { | |
| left: -24px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate .fa-star::before { | |
| left: -38px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .fa-star::before { | |
| left: -29px; | |
| } | |
| @media (min-width: 889px) { | |
| .layout-single-column .column-link .fa-star::before { | |
| position: relative; | |
| top: 2px; | |
| } | |
| } | |
| @media screen and (max-width: 889px) { | |
| /* stylelint-disable-next-line */ | |
| .layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before { | |
| left: -28px; | |
| } | |
| } | |
| /* | |
| * -------------------------------------- | |
| * Heart animation micro-interaction ends | |
| */ | |
| /* | |
| * Star animation micro-interaction start (depends on the heart icon above) | |
| * If you prefer hearts, remove everything below this comment until | |
| * "Star animation micro-interaction ends" | |
| * ------------------------------------------------------------------------- | |
| */ | |
| /* If a hover device */ | |
| @media (hover: hover) { | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-star, | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-star ~ span, | |
| .layout-single-column button.icon-button:not(.active):hover i.fa-star::before { | |
| color: var(--color-yellow); | |
| } | |
| .layout-single-column button.icon-button.active:hover i.fa-star ~ span { | |
| color: var(--color-dim); | |
| } | |
| } | |
| /* stylelint-disable no-duplicate-selectors */ | |
| /* Left sidebar column links */ | |
| .layout-single-column .column-link .fa-star::before { | |
| content: var(--icon-star-column-link); | |
| } | |
| .layout-single-column .column-link.active .fa-star::before { | |
| content: var(--icon-star-column-link-active); | |
| } | |
| .layout-single-column .notification__favourite-icon-wrapper .fa-star::before { | |
| content: var(--icon-star-notification); | |
| } | |
| /* Replace notification tab bar icon with star */ | |
| .layout-single-column .notification__filter-bar .active .fa-star::before { | |
| content: var(--icon-star-active); | |
| } | |
| /* Numbers on hover */ | |
| .layout-single-column button.icon-button:hover i.fa-star ~ span { | |
| color: var(--color-dim); | |
| } | |
| /* Numbers when the star is active/activated */ | |
| .layout-single-column button.icon-button.activate i.fa-star ~ span, | |
| .layout-single-column button.icon-button.active i.fa-star ~ span { | |
| color: var(--color-yellow); | |
| } | |
| /* The actual star icon */ | |
| .layout-single-column .notification__filter-bar .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button .fa-star::before, | |
| .layout-single-column .status__action-bar .icon-button .fa-star::before { | |
| content: "\f006"; | |
| font-size: 20px; | |
| left: 0; | |
| position: relative; | |
| top: 0; | |
| } | |
| /* Active star icon */ | |
| .layout-single-column .notification__filter-bar button.icon-button.active .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar button.icon-button.active .fa-star::before, | |
| .layout-single-column .status__action-bar button.icon-button.active .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: "\f005" !important; | |
| display: block; | |
| } | |
| /* Active star when activated */ | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| background-color: unset !important; | |
| /* stylelint-disable-next-line */ | |
| background-image: none !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-yellow); | |
| /* stylelint-disable-next-line */ | |
| content: "\f005" !important; | |
| height: unset; | |
| /* stylelint-disable-next-line */ | |
| left: unset !important; | |
| position: relative; | |
| top: 0; | |
| transform: none; | |
| width: unset; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1; | |
| } | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon::after { | |
| animation: sparkles-width .65s 1, sparkles-size .65s 1; | |
| } | |
| .layout-single-column .detailed-status__action-bar button.icon-button.activate.star-icon::before, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon::before { | |
| animation: ring-border-width .35s 1, ring-size .35s 1; | |
| } | |
| } | |
| /* Star sparkles, when activated */ | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| background-color: unset !important; | |
| content: ''; | |
| /* stylelint-disable-next-line */ | |
| height: 50px !important; | |
| /* stylelint-disable-next-line */ | |
| left: 50% !important; | |
| margin-left: -24px; | |
| margin-top: -20px; | |
| opacity: unset; | |
| position: absolute; | |
| top: calc(50% + 1px); | |
| transform: none; | |
| /* stylelint-disable-next-line */ | |
| width: 50px !important; | |
| z-index: unset; | |
| } | |
| /* Ensure everything shows up on mobile */ | |
| .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| display: block !important; | |
| } | |
| /* Star circle/ring */ | |
| .layout-single-column .detailed-status__action-bar button.icon-button.activate.star-icon::before, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon::before { | |
| border: 0px solid var(--color-yellow); | |
| border-radius: 10em; | |
| content: ''; | |
| height: 0em; | |
| left: 50%; | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| transform-origin: 50px 50px; | |
| width: 0em; | |
| } | |
| .layout-single-column .icon-button.star-icon.active, | |
| .layout-single-column .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--color-yellow); | |
| } | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .fa-star::before, | |
| .layout-single-column .status__action-bar button.icon-button.deactivate.star-icon:hover .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar .icon-butto.deactivate .fa-star::before, | |
| .layout-single-column .detailed-status button.icon-button.deactivate .fa-star::before, | |
| .layout-single-column .status button.icon-button.deactivate .fa-star::before { | |
| color: var(--color-dim); | |
| /* stylelint-disable-next-line */ | |
| content: '\f006' !important; | |
| } | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-single-column .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-single-column .status button.icon-button:hover .fa-star::before { | |
| color: var(--color-yellow); | |
| /* stylelint-disable-next-line */ | |
| content: "\f006" !important; | |
| position: relative; | |
| top: 0; | |
| } | |
| /* Prevent the star from being highlighted when the button is focused, especially while logged out */ | |
| .layout-single-column .detailed-status__action-bar .icon-button:focus .fa-star::before, | |
| .layout-single-column .detailed-status button.icon-button:focus .fa-star::before, | |
| .layout-single-column .status button.icon-button:hover .fa-star::before { | |
| color: var(--color-dim); | |
| } | |
| /* Fix focus for mouse users on v4.1.4-nighly-20230721 */ | |
| .layout-single-column button:focus, | |
| .layout-single-column .icon-button:focus { | |
| outline: 0; | |
| } | |
| .layout-single-column button:focus-visible, | |
| .layout-single-column .icon-button:focus-visible { | |
| outline: 2px solid var(--color-accent); | |
| } | |
| /* Alignment fixes */ | |
| /* Fix the x position in recent searches, | |
| @link https://nileane.fr/@nileane/111110441774473219 */ | |
| .layout-single-column .search__popout__menu__item { | |
| align-items: initial; | |
| } | |
| /* Sparkle offset on numbered item */ | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.icon-button--with-counter.star-icon.activate::after, | |
| .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 14px) !important; | |
| /* stylelint-disable-next-line */ | |
| top: calc(50% + -1px) !important; | |
| } | |
| /* Circle offset on numbered item */ | |
| .layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before, | |
| .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 14px) !important; | |
| } | |
| /* Mobile devices */ | |
| @media (hover: none) { | |
| .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before, | |
| .layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before, | |
| .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-single-column .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-single-column .status button.icon-button:hover .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: '\f005' !important; | |
| } | |
| } | |
| /* Fix the sparkle and circle position on small screens on the Explore */ | |
| @media (max-width: 888px) { | |
| /* Sparkle offset on numbered item */ | |
| .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 11px) !important; | |
| } | |
| /* Circle offset on numbered item */ | |
| .layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before, | |
| .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 11px) !important; | |
| } | |
| } | |
| @keyframes popping { | |
| 0% { | |
| transform: scale(0, 0); | |
| } | |
| 40% { | |
| transform: scale(0, 0); | |
| } | |
| 75% { | |
| transform: scale(1.3, 1.3); | |
| } | |
| 100% { | |
| transform: scale(1, 1); | |
| } | |
| } | |
| @keyframes ring-border-width { | |
| 0% { | |
| border-width: 0; | |
| } | |
| 50% { | |
| border-width: 0.22em; | |
| } | |
| 100% { | |
| border-width: 0; | |
| } | |
| } | |
| @keyframes ring-size { | |
| 0% { | |
| height: 0; | |
| width: 0; | |
| } | |
| 100% { | |
| height: 2em; | |
| width: 2em; | |
| } | |
| } | |
| @keyframes sparkles-width { | |
| 0% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.3' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 1% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 2% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.9' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 3% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 4% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.5' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 5% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 6% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.1' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 7% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 8% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.7' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 9% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 10% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.3' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 11% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='15.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 12% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='16.9' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 13% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 14% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 15% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='18' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 16% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 17% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 18% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 19% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 20% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 21% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 22% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 23% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 24% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 25% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 26% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 27% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 28% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 29% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 30% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 31% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 32% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 33% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 34% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 35% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 36% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 37% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 38% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 39% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 40% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 41% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 42% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 43% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 44% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 45% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 46% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 47% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 48% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 49% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 50% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 51% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 52% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 53% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 54% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 55% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 56% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 57% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 58% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 59% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 60% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 61% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 62% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 63% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 64% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 65% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 66% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 67% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 68% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 69% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 70% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 71% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 72% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 73% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 74% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 75% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 76% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 77% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 78% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 79% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 80% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 81% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 82% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 83% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 84% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 86% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.8' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 87% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.6' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 88% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.4' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 89% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.2' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 90% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 91% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 92% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 93% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 94% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 95% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 96% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 97% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 98% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 99% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| 100% { | |
| content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E"); | |
| } | |
| } | |
| @keyframes sparkles-size { | |
| 0% { | |
| transform: scale(0.1, 0.1); | |
| } | |
| 5% { | |
| transform: scale(0.1, 0.1); | |
| } | |
| 85% { | |
| transform: scale(1, 1); | |
| } | |
| } | |
| /* stylelint-enable no-duplicate-selectors */ | |
| /* | |
| * Star animation micro-interactions end | |
| * ------------------------------------- | |
| */ | |
| /* Mastodon Bird UI by @[email protected] | |
| 1.8.3 */ | |
| /* CSS variables */ | |
| :root { | |
| /* Brand colors */ | |
| --color-brand-twitter: #1d9bf0; | |
| --color-brand-twitter-bg: #15202b; | |
| --color-brand-twitter-dim: #8b98a5; | |
| --color-brand-twitter-mud: #273340; | |
| --color-brand-twitter-dark: #232543; | |
| --color-brand-twitter-threaded-line: #425364; | |
| --color-brand-mastodon: #595aff; | |
| --color-brand-mastodon-links: #8c8dff; | |
| --color-brand-mastodon-bg: #1e2028; | |
| --color-brand-mastodon-dim: #717c9b; | |
| --color-brand-mastodon-mud: #272c40; | |
| --color-brand-mastodon-dark: #232543; | |
| --color-brand-mastodon-threaded-line: #232543; | |
| --color-brand-mastodon-text-light: #8493a7; | |
| /* Colors */ | |
| /* Note: Remember to search for the DIM hex | |
| and replace it inside the SVG icons if you decide to change it */ | |
| --color-bg: black; | |
| --color-bg-75: black; | |
| --color-fg: #fff; | |
| --color-border: #1f0f31; | |
| --color-dim: var(--color-brand-mastodon-dim); | |
| --color-accent: var(--color-brand-mastodon-links); | |
| --color-accent-dark: #6728ae; | |
| --color-accent-dark-50: #595aff80; | |
| --color-green: #00ba7c; | |
| --color-red: #f91880; | |
| --color-red-75: #f91880bf; | |
| --color-yellow: #ffac33; | |
| --color-light-shade: #ffffff05; | |
| --color-focusable-toot: #ffffff09; | |
| --color-light-text: #f7f9f9; | |
| --color-mud: black; | |
| --color-black-coral: #5a5371; | |
| --color-profile-button-hover: #f1eff41a; | |
| --color-column-link-hover: #f7f7f91a; | |
| --color-modal-overlay: #5b708366; | |
| --color-dark: var(--color-brand-mastodon-dark); | |
| --color-thread-line: var(--color-brand-mastodon-threaded-line); | |
| --color-gainsboro: #dcd9e8; | |
| --color-light-purple: #9baec8; | |
| --color-lighter-purple: #a5b8d3; | |
| --color-dark-electric-blue: #576078; | |
| --color-button-text: #f7f9f9; | |
| --color-ghost-button-text: var(--color-button-text); | |
| --color-verified: #79bd9a; | |
| --color-destructive: #df405a; | |
| --color-light-fuchsia-pink: #ff8cfd; | |
| --color-hashtag: var(--color-accent); | |
| --color-mention: var(--color-accent); | |
| --color-link: var(--color-accent); | |
| --color-bg-compose-form: rgb(39 44 64 / .4); | |
| --color-bg-compose-form-focus: rgb(39 44 64 / .8); | |
| /* In the original UI this color is lighten($ui-base-color, 12%) */ | |
| --color-outer-space: #42485a; | |
| /* Font related */ | |
| --font-size: 15px; | |
| --font-size-smaller: 13px; | |
| --font-size-12: 12px; | |
| --font-size-mid: 14px; | |
| --font-size-bigger: 17px; | |
| --font-size-title: 19px; | |
| --font-size-heading: 20px; | |
| --font-weight-regular: 400; | |
| --font-weight-semibold: 500; | |
| --font-weight-bold: 700; | |
| --line-height: 22px; | |
| --line-height-mid: 20px; | |
| /* Grids and gaps */ | |
| --gap-default: 12px; | |
| --gap-column-link: 12px; | |
| /* Element sizes */ | |
| --size-avatar: 48px; | |
| --size-avatar-small: 32px; | |
| --size-icon-notification: 30px; | |
| --width-main-panel: 600px; | |
| --width-side-panel: 260px; | |
| --width-column: 380px; | |
| --border-radius: 16px; | |
| --border-radius-badges: 4px; | |
| --badges-distance-from-edge: 12px; | |
| /* Misc */ | |
| --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3); | |
| --active-header-radial-gradient: radial-gradient(ellipse, rgba(99, 100, 255, .23) 0, rgba(99, 100, 255, 0) 60%); | |
| --compose-form-linear-gradient: linear-gradient(180deg, rgba(30, 32, 40, 1) 0%, rgba(30, 32, 40, 1) 53%, rgba(30, 32, 40, 0.8141631652661064) 76%, rgba(30, 32, 40, 0.7077205882352942) 87%, rgba(30, 32, 40, 0.458420868347339) 97%, rgba(30, 32, 40, 0) 100%); | |
| /* Logo */ | |
| --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'); | |
| /* Icons */ | |
| --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="%23717c9b" 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="%23717c9b" 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="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E'); | |
| --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%2300ba7c' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23f7f9f9' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-wrapper: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 136 136'%3E%3Cpath fill='%2300ba7c' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23f7f9f9" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23f7f9f9" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A'); | |
| --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" 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="%23f7f9f9" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23f7f9f9" 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="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9"%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-star-active: '\f005'; | |
| --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='%23f7f9f9' 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='%23f7f9f9'%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="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" 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="%23f7f9f9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9"%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="%23f7f9f9" 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="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%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="%23f7f9f9" 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="%23717c9b" 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="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%23f7f9f9'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E"); | |
| --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%23f7f9f9' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%23f7f9f9' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E"); | |
| --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" 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="%23f7f9f9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23717c9b" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); | |
| --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); | |
| --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); | |
| /* Profile icons */ | |
| --icon-github: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"%3E%3Cpath d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-youtube: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"%3E%3Cpath d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"%3E%3C/path%3E%3Cpolygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"%3E%3C/polygon%3E%3C/svg%3E'); | |
| --icon-link: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"%3E%3Cpath d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"%3E%3C/path%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-twitter: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"%3E%3Cpath fill="%23717c9b" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/%3E%3C/svg%3E'); | |
| --icon-twitch: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"%3E%3Cpath d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-patreon: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPatreon icon%3C/title%3E%3Cpath d='M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003'/%3E%3C/svg%3E"); | |
| --icon-threads: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='18' fill='%23717c9b' width='18' viewBox='0 0 448 512'%3E%3Cpath d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z'/%3E%3C/svg%3E"); | |
| --icon-bluesky: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='18' height='18'%3E%3Cpath fill='%23717c9b' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); | |
| --icon-nostr: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 860 847'%3E%3Cpath d='M454.5 1.1c-67.6 10.3-115.8 27.2-160.4 56.4-16.5 10.9-19.3 12-29.1 12-9.5 0-14.6-2-20.8-7.9-5.5-5.1-7.5-9.9-9.2-22-1.9-13.1-6.8-20.4-17.3-25.7l-5.8-3-92.2.3c-68.2.3-93.1.7-95.6 1.6-4.5 1.5-11.4 8.3-15.2 14.8L6 32.8l.2 391.8.3 391.9 2.7 5c1.4 2.8 4.6 6.9 7.1 9.2 8.7 8 .9 7.3 96 8 88.7.6 108.3 0 116.7-3.3 5.9-2.4 13.5-11.7 14.9-18.4 1.4-6.4 1.4-67.7.1-103.3-3-78.6-15.8-158-48.1-297.2-21.2-91.3-27.3-126.1-28.6-162.6-1.5-43.2 7-69.1 28.8-87.6 6.9-5.8 19.7-12.8 29.7-16.2 14.8-5 57.5-12 96.2-15.7 21-2.1 84.2-2.4 104.4-.6 25.3 2.3 54.4 8.4 76 15.9 36.2 12.5 62.9 33.9 75.5 60.4 5.2 10.8 7.6 20.5 9.6 38.2 1.9 16.7 3.6 24 7.4 32.2 7.1 15.3 26.3 28.9 50.7 36 20.1 5.9 42 8.1 86.4 9 33.3.7 41.1 1.5 47.9 5 7.7 3.9 15.4 11.6 18.7 18.7 2.8 6 2.9 6.9 2.9 20.8 0 13.3-.2 14.9-2.4 19.5-1.4 2.8-5.6 8.1-9.5 12-10.8 10.7-28 18.8-48.8 23-13.6 2.7-38.7 3.5-110.3 3.5-73.4 0-79.9.3-96.7 4.5-33.7 8.5-56.9 25.7-70.1 52.1-15.4 30.7-26.8 91.8-31.7 170.4-2.9 46.1-3 159.5-.1 166.5 1.9 4.7 11.1 13.4 15.3 14.5 8.4 2.3 51.4 3 196.8 3 155 0 184.6-.6 191.7-3.5 5.5-2.3 12.1-9.2 13.4-13.9.6-2.1 1.5-10.5 2-18.5 1.9-32.6.2-482.7-2-504.1-4.6-44.3-20-97.2-39.7-136.1-14.5-28.7-30.3-50.8-51.9-72.5-27-27.1-54.5-45.9-89.8-61.4-31.8-13.9-71.3-24.3-104.5-27.5-16.8-1.7-98.5-1.9-108.7-.4z' fill='%23717c9b'/%3E%3Cpath d='M448 211.5c-21.4 5.9-38.1 21.3-45.8 42.7-2.4 6.5-2.7 8.7-2.6 19.8 0 11.3.3 13.3 3 21 3.9 11 8.7 18.2 18.1 27 11.2 10.4 22.4 15.1 39.8 16.5 27.9 2.3 56.6-18.3 64.9-46.5 8.1-27.5-5.4-60.4-30.1-73.3-12.3-6.4-17.5-7.8-30.3-8.3-8.2-.3-13.1 0-17 1.1z' fill='%23717c9b'/%3E%3C/svg%3E"); | |
| --icon-paypal: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPayPal icon%3C/title%3E%3Cpath d='M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z'/%3E%3C/svg%3E"); | |
| --icon-kofi: url("data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EKo-fi icon%3C/title%3E%3Cpath d='M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z'/%3E%3C/svg%3E"); | |
| --icon-mastodon: url("data:image/svg+xml, %0A%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EMastodon icon%3C/title%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E"); | |
| --icon-verified: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-verified-smaller: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="15" height="15" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-label: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"%3E%3C/path%3E%3Cline x1="7" y1="7" x2="7.01" y2="7"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-discord: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" %3E%3Cpath fill="%23717c9b" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"/%3E%3C/svg%3E'); | |
| --icon-linkedin: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"%3E%3Cpath d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"%3E%3C/path%3E%3Crect x="2" y="9" width="4" height="12"%3E%3C/rect%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); | |
| --icon-instagram: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"%3E%3Crect x="2" y="2" width="20" height="20" rx="5" ry="5"%3E%3C/rect%3E%3Cpath d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"%3E%3C/path%3E%3Cline x1="17.5" y1="6.5" x2="17.51" y2="6.5"%3E%3C/line%3E%3C/svg%3E'); | |
| } | |
| /* High Contrast theme */ | |
| body.theme-contrast.layout-multiple-columns { | |
| --color-dim: #b8b3c0; | |
| /* Icons */ | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23b8b3c0' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23f7f9f9' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --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="%23b8b3c0" 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="%23b8b3c0" 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="%23b8b3c0" 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-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' 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-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="%23b8b3c0" 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="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23b8b3c0" 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-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b8b3c0" 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'); | |
| } | |
| /* Light theme */ | |
| body.theme-mastodon-light.layout-multiple-columns { | |
| --color-bg: #fff; | |
| --color-fg: #000; | |
| --color-border: #e6e1ed; | |
| --color-dim: #9388a6; | |
| --color-green: #17bf63; | |
| --color-red: #e0245e; | |
| --color-red-75: #e0245ebf; | |
| --color-light-shade: #00000005; | |
| --color-focusable-toot: rgba(0, 0, 0, 0.035); | |
| --color-light-text: #1f1b23; | |
| --color-mud: #e5e1ed; | |
| --color-black-coral: #9188a6; | |
| --color-profile-button-hover: #1e1b231a; | |
| --color-column-link-hover: #1e1b231a; | |
| --color-modal-overlay: #6a5b8366; | |
| --color-dark: #f7f9f9; | |
| --color-thread-line: #e1e8ed; | |
| --color-gainsboro: #8899a6; | |
| --color-light-purple: #9588a6; | |
| --color-dark-electric-blue: #9088a6; | |
| --color-bg-75: #ffffffbf; | |
| --color-accent: var(--color-accent-dark); | |
| --color-ghost-button-text: var(--color-accent-dark); | |
| --color-bg-compose-form: rgb(147 136 166 / .2); | |
| --color-bg-compose-form-focus: rgb(147 136 166 / .3); | |
| --color-hashtag: var(--color-accent-dark); | |
| --color-mention: var(--color-accent-dark); | |
| /* Misc */ | |
| --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%); | |
| /* Icons for light theme */ | |
| --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%239388a6' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%239388a6' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| --icon-boost-notification-filter-bar: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%23717c9b' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%231f1b23' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); | |
| --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); | |
| --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%231f1b23" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%231f1b23" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A'); | |
| --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%239388a6' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" 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="%231f1b23" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%231f1b23" 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="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); | |
| --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%239388a6' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); | |
| --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-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='%231f1b23' 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='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%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="%231f1b23" 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="%231f1b23" 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-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="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" 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="%231f1b23" 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="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" 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="%231f1b23" 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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239388a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%231f1b23"%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="%231f1b23" 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="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%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="%231f1b23" 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="%23717c9b" 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="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" 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="%231f1b23" 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="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); | |
| --icon-cog: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' width='26' height='26' viewBox='0 0 512 512' fill='%231f1b23'%3E%3Cpath d='M456.7 242.27l-26.08-4.2a8 8 0 01-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08 8.08 0 013.9-8.62l23.09-12.82a8.05 8.05 0 003.9-9.92l-4-11a7.94 7.94 0 00-9.4-5l-25.89 5a8 8 0 01-8.59-4.11q-2.25-4.2-4.8-8.41a8.16 8.16 0 01.7-9.52l17.29-19.94a8 8 0 00.3-10.62l-7.49-9a7.88 7.88 0 00-10.5-1.51l-22.69 13.63a8 8 0 01-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8 8 0 01-2.5-9.11l9.4-24.75A8 8 0 00365 78.77l-10.2-5.91a8 8 0 00-10.39 2.21l-16.64 20.84a7.15 7.15 0 01-8.5 2.5s-5.6-2.3-9.8-3.71A8 8 0 01304 87l.4-26.45a8.07 8.07 0 00-6.6-8.42l-11.59-2a8.07 8.07 0 00-9.1 5.61l-8.6 25.05a8 8 0 01-7.79 5.41h-9.8a8.07 8.07 0 01-7.79-5.41l-8.6-25.05a8.07 8.07 0 00-9.1-5.61l-11.59 2a8.07 8.07 0 00-6.6 8.42l.4 26.45a8 8 0 01-5.49 7.71c-2.3.9-7.3 2.81-9.7 3.71-2.8 1-6.1.2-8.8-2.91l-16.51-20.34A8 8 0 00156.75 73l-10.2 5.91a7.94 7.94 0 00-3.3 10.09l9.4 24.75a8.06 8.06 0 01-2.5 9.11c-2.5 2-5 4.11-7.4 6.22a8 8 0 01-9.39.9L111 116.14a8 8 0 00-10.5 1.51l-7.49 9a8 8 0 00.3 10.62l17.29 19.94a8 8 0 01.7 9.52q-2.55 4-4.8 8.41a8.11 8.11 0 01-8.59 4.11l-25.89-5a8 8 0 00-9.4 5l-4 11a8.05 8.05 0 003.9 9.92L85.58 213a7.94 7.94 0 013.9 8.62c-.6 3.2-1.2 6.31-1.7 9.51a8.08 8.08 0 01-6.6 6.82l-26.08 4.2a8.09 8.09 0 00-7.1 7.92v11.72a7.86 7.86 0 007.1 7.92l26.08 4.2a8 8 0 016.6 6.82c.5 3.2 1 6.41 1.7 9.51a8.08 8.08 0 01-3.9 8.62L62.49 311.7a8.05 8.05 0 00-3.9 9.92l4 11a7.94 7.94 0 009.4 5l25.89-5a8 8 0 018.59 4.11q2.25 4.2 4.8 8.41a8.16 8.16 0 01-.7 9.52l-17.29 19.96a8 8 0 00-.3 10.62l7.49 9a7.88 7.88 0 0010.5 1.51l22.69-13.63a8 8 0 019.39.9c2.4 2.11 4.9 4.21 7.4 6.22a8 8 0 012.5 9.11l-9.4 24.75a8 8 0 003.3 10.12l10.2 5.91a8 8 0 0010.39-2.21l16.79-20.64c2.1-2.6 5.5-3.7 8.2-2.6 3.4 1.4 5.7 2.2 9.9 3.61a8 8 0 015.49 7.71l-.4 26.45a8.07 8.07 0 006.6 8.42l11.59 2a8.07 8.07 0 009.1-5.61l8.6-25a8 8 0 017.79-5.41h9.8a8.07 8.07 0 017.79 5.41l8.6 25a8.07 8.07 0 009.1 5.61l11.59-2a8.07 8.07 0 006.6-8.42l-.4-26.45a8 8 0 015.49-7.71c4.2-1.41 7-2.51 9.6-3.51s5.8-1 8.3 2.1l17 20.94A8 8 0 00355 439l10.2-5.91a7.93 7.93 0 003.3-10.12l-9.4-24.75a8.08 8.08 0 012.5-9.12c2.5-2 5-4.1 7.4-6.21a8 8 0 019.39-.9L401 395.66a8 8 0 0010.5-1.51l7.49-9a8 8 0 00-.3-10.62l-17.29-19.94a8 8 0 01-.7-9.52q2.55-4.05 4.8-8.41a8.11 8.11 0 018.59-4.11l25.89 5a8 8 0 009.4-5l4-11a8.05 8.05 0 00-3.9-9.92l-23.09-12.82a7.94 7.94 0 01-3.9-8.62c.6-3.2 1.2-6.31 1.7-9.51a8.08 8.08 0 016.6-6.82l26.08-4.2a8.09 8.09 0 007.1-7.92V250a8.25 8.25 0 00-7.27-7.73zM256 112a143.82 143.82 0 01139.38 108.12A16 16 0 01379.85 240H274.61a16 16 0 01-13.91-8.09l-52.1-91.71a16 16 0 019.85-23.39A146.94 146.94 0 01256 112zM112 256a144 144 0 0143.65-103.41 16 16 0 0125.17 3.47L233.06 248a16 16 0 010 15.87l-52.67 91.7a16 16 0 01-25.18 3.36A143.94 143.94 0 01112 256zm144 144a146.9 146.9 0 01-38.19-4.95 16 16 0 01-9.76-23.44l52.58-91.55a16 16 0 0113.88-8H379.9a16 16 0 0115.52 19.88A143.84 143.84 0 01256 400z'/%3E%3C/svg%3E"); | |
| --icon-globe: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 512.00 512.00'%3E%3Cpath fill='%231f1b23' d=' M 512.00 383.82 L 512.00 385.55 C 509.71 419.39 473.05 422.09 447.81 418.87 Q 423.66 415.79 400.31 408.70 Q 358.58 396.03 318.76 378.21 Q 218.90 333.52 129.46 270.53 C 92.32 244.38 56.82 216.22 27.43 182.58 C 14.63 167.94 1.88 149.41 0.00 128.96 L 0.00 125.94 C 3.19 91.33 40.56 90.05 66.57 93.40 Q 81.64 95.34 88.25 97.23 C 99.02 100.32 103.61 112.14 97.29 121.55 C 92.20 129.11 85.23 129.19 76.43 127.41 C 64.10 124.92 44.84 121.70 32.89 126.36 A 1.55 1.54 74.3 0 0 31.93 128.08 C 34.07 139.90 43.53 152.31 51.28 161.22 Q 68.49 181.02 88.94 198.55 Q 89.49 199.02 89.73 198.34 Q 110.62 140.43 161.78 107.51 C 234.44 60.76 331.69 75.26 388.09 139.91 C 446.04 206.35 446.71 303.97 388.97 370.93 Q 388.58 371.38 389.14 371.58 Q 413.92 380.31 439.48 385.26 C 451.88 387.65 467.05 389.92 479.11 385.65 A 1.51 1.50 -14.2 0 0 480.10 384.00 C 477.90 369.69 463.57 354.46 454.60 343.62 C 440.99 327.16 463.05 306.29 479.15 323.40 C 495.03 340.29 510.01 360.98 512.00 383.82 Z M 115.39 210.46 Q 136.86 228.57 159.38 244.15 C 223.66 288.63 294.05 327.49 367.32 354.98 A 1.46 1.44 30.8 0 0 368.93 354.58 Q 400.10 318.66 405.76 270.75 Q 407.08 259.64 406.38 249.56 C 401.05 172.60 342.31 113.52 265.72 106.81 Q 255.74 105.94 245.77 106.92 C 185.42 112.87 134.96 151.32 114.89 208.65 Q 114.52 209.72 115.39 210.46 Z M 295.33 328.94 A 0.34 0.34 0.0 0 0 295.16 329.58 L 299.51 331.72 A 0.34 0.34 0.0 0 0 300.00 331.41 L 300.00 329.51 A 0.34 0.34 0.0 0 0 299.68 329.17 L 295.33 328.94 Z'%0A/%3E%3Cpath fill='%231f1b23' d=' M 307.69 408.30 C 316.86 412.38 316.05 421.82 306.19 424.66 C 209.45 452.48 109.79 396.22 85.13 298.09 Q 83.95 293.40 84.37 291.18 C 85.73 284.03 93.55 284.22 98.50 287.80 Q 197.11 359.12 307.69 408.30 Z M 263.31 410.94 Q 262.74 410.51 262.12 410.23 Q 199.27 381.56 142.55 342.19 Q 129.49 333.13 117.25 323.09 A 0.18 0.18 0.0 0 0 116.97 323.31 C 142.74 377.01 195.57 410.10 255.44 411.80 Q 261.32 411.97 263.93 411.40 Q 264.37 411.30 264.00 411.06 Q 263.69 410.85 263.31 410.94 Z'%0A/%3E%3C/svg%3E"); | |
| --icon-globe-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" 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="%231f1b23" 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="%231f1b23" 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="%231f1b23" 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-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239FA4BB' 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"); | |
| /* Profile icons */ | |
| --icon-github: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"%3E%3Cpath d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-youtube: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"%3E%3Cpath d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"%3E%3C/path%3E%3Cpolygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"%3E%3C/polygon%3E%3C/svg%3E'); | |
| --icon-link: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"%3E%3Cpath d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"%3E%3C/path%3E%3Cline x1="8" y1="12" x2="16" y2="12"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-twitter: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"%3E%3Cpath fill="%23717c9b" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/%3E%3C/svg%3E'); | |
| --icon-twitch: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"%3E%3Cpath d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-patreon: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPatreon icon%3C/title%3E%3Cpath d='M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003'/%3E%3C/svg%3E"); | |
| --icon-threads: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='18' fill='%23717c9b' width='18' viewBox='0 0 448 512'%3E%3Cpath d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z'/%3E%3C/svg%3E"); | |
| --icon-bluesky: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='18' height='18'%3E%3Cpath fill='%23717c9b' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E"); | |
| --icon-nostr: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 860 847'%3E%3Cpath d='M454.5 1.1c-67.6 10.3-115.8 27.2-160.4 56.4-16.5 10.9-19.3 12-29.1 12-9.5 0-14.6-2-20.8-7.9-5.5-5.1-7.5-9.9-9.2-22-1.9-13.1-6.8-20.4-17.3-25.7l-5.8-3-92.2.3c-68.2.3-93.1.7-95.6 1.6-4.5 1.5-11.4 8.3-15.2 14.8L6 32.8l.2 391.8.3 391.9 2.7 5c1.4 2.8 4.6 6.9 7.1 9.2 8.7 8 .9 7.3 96 8 88.7.6 108.3 0 116.7-3.3 5.9-2.4 13.5-11.7 14.9-18.4 1.4-6.4 1.4-67.7.1-103.3-3-78.6-15.8-158-48.1-297.2-21.2-91.3-27.3-126.1-28.6-162.6-1.5-43.2 7-69.1 28.8-87.6 6.9-5.8 19.7-12.8 29.7-16.2 14.8-5 57.5-12 96.2-15.7 21-2.1 84.2-2.4 104.4-.6 25.3 2.3 54.4 8.4 76 15.9 36.2 12.5 62.9 33.9 75.5 60.4 5.2 10.8 7.6 20.5 9.6 38.2 1.9 16.7 3.6 24 7.4 32.2 7.1 15.3 26.3 28.9 50.7 36 20.1 5.9 42 8.1 86.4 9 33.3.7 41.1 1.5 47.9 5 7.7 3.9 15.4 11.6 18.7 18.7 2.8 6 2.9 6.9 2.9 20.8 0 13.3-.2 14.9-2.4 19.5-1.4 2.8-5.6 8.1-9.5 12-10.8 10.7-28 18.8-48.8 23-13.6 2.7-38.7 3.5-110.3 3.5-73.4 0-79.9.3-96.7 4.5-33.7 8.5-56.9 25.7-70.1 52.1-15.4 30.7-26.8 91.8-31.7 170.4-2.9 46.1-3 159.5-.1 166.5 1.9 4.7 11.1 13.4 15.3 14.5 8.4 2.3 51.4 3 196.8 3 155 0 184.6-.6 191.7-3.5 5.5-2.3 12.1-9.2 13.4-13.9.6-2.1 1.5-10.5 2-18.5 1.9-32.6.2-482.7-2-504.1-4.6-44.3-20-97.2-39.7-136.1-14.5-28.7-30.3-50.8-51.9-72.5-27-27.1-54.5-45.9-89.8-61.4-31.8-13.9-71.3-24.3-104.5-27.5-16.8-1.7-98.5-1.9-108.7-.4z' fill='%23717c9b'/%3E%3Cpath d='M448 211.5c-21.4 5.9-38.1 21.3-45.8 42.7-2.4 6.5-2.7 8.7-2.6 19.8 0 11.3.3 13.3 3 21 3.9 11 8.7 18.2 18.1 27 11.2 10.4 22.4 15.1 39.8 16.5 27.9 2.3 56.6-18.3 64.9-46.5 8.1-27.5-5.4-60.4-30.1-73.3-12.3-6.4-17.5-7.8-30.3-8.3-8.2-.3-13.1 0-17 1.1z' fill='%23717c9b'/%3E%3C/svg%3E"); | |
| --icon-paypal: url("data:image/svg+xml, %0A%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EPayPal icon%3C/title%3E%3Cpath d='M6.908 24H3.804c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186L8.39 22.812c-.149.645-.81 1.17-1.47 1.17L6.908 24zm-2.677-2.695H1.126c-.663 0-1.084-.529-.936-1.18L4.563 1.182C4.714.529 5.378 0 6.044 0h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169L5.7 20.097c-.149.646-.817 1.172-1.485 1.172l.016.036zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605l.019.001z'/%3E%3C/svg%3E"); | |
| --icon-kofi: url("data:image/svg+xml, %3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EKo-fi icon%3C/title%3E%3Cpath d='M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z'/%3E%3C/svg%3E"); | |
| --icon-mastodon: url("data:image/svg+xml, %0A%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b'%3E%3Ctitle%3EMastodon icon%3C/title%3E%3Cpath d='M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z'/%3E%3C/svg%3E"); | |
| --icon-verified: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-verified-smaller: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="15" height="15" %3E%3Cpath fill="%236364ff" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"%3E%3C/path%3E%3C/svg%3E'); | |
| --icon-label: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"%3E%3C/path%3E%3Cline x1="7" y1="7" x2="7.01" y2="7"%3E%3C/line%3E%3C/svg%3E'); | |
| --icon-discord: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" %3E%3Cpath fill="%23717c9b" d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"/%3E%3C/svg%3E'); | |
| --icon-linkedin: 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="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"%3E%3Cpath d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"%3E%3C/path%3E%3Crect x="2" y="9" width="4" height="12"%3E%3C/rect%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); | |
| --icon-instagram: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"%3E%3Crect x="2" y="2" width="20" height="20" rx="5" ry="5"%3E%3C/rect%3E%3Cpath d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"%3E%3C/path%3E%3Cline x1="17.5" y1="6.5" x2="17.51" y2="6.5"%3E%3C/line%3E%3C/svg%3E'); | |
| } | |
| /* Vars on iPad, landscape */ | |
| @media (min-width: 1175px) and (max-width: 1260px) { | |
| :root { | |
| --width-main-panel: 500px; | |
| --width-side-panel: 265px; | |
| } | |
| } | |
| /* Vars in mobile */ | |
| @media (max-width: 500px) { | |
| :root { | |
| --font-size-heading: 17px; | |
| --badges-distance-from-edge: 10px; | |
| } | |
| /* Hide scrollbar on mobile, since we can't pick the handle anyway */ | |
| .layout-multiple-columns::-webkit-scrollbar { | |
| display: none; | |
| } | |
| } | |
| /* Search popout offset */ | |
| .layout-multiple-columns .search__popout, | |
| .layout-multiple-columns .search-popout { | |
| left: calc(30px / 2); | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| max-width: calc(100% - 30px) !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: calc(100% - 30px) !important; | |
| } | |
| body.layout-multiple-columns { | |
| background-color: var(--color-bg); | |
| color: var(--color-fg); | |
| } | |
| .layout-multiple-columns .ui { | |
| display: flex; | |
| width: 100%; | |
| } | |
| /* Text color */ | |
| .layout-multiple-columns .account__header__tabs__name h1, | |
| .layout-multiple-columns .account__header__bio .account__header__content, | |
| .layout-multiple-columns .reply-indicator__content, | |
| .layout-multiple-columns .status__content { | |
| color: var(--color-fg); | |
| } | |
| /* Link color variants */ | |
| .layout-multiple-columns .status-link.hashtag { | |
| color: var(--color-hashtag); | |
| } | |
| .layout-multiple-columns .status-link.mention:not(.hashtag) { | |
| color: var(--color-mention); | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns .status-link.mention:not(.hashtag):not(.mention) { | |
| color: var(--color-link); | |
| } | |
| /* Logo */ | |
| .layout-multiple-columns .ui__header__logo, | |
| .layout-multiple-columns .column-link.column-link--logo { | |
| background-image: var(--logo); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: 32px auto; | |
| height: 50px; | |
| padding: 0; | |
| width: 50px; | |
| } | |
| .layout-multiple-columns .ui__header__logo img, | |
| .layout-multiple-columns .ui__header__logo svg { | |
| display: none; | |
| } | |
| /* Things that should have the default font-size */ | |
| .layout-multiple-columns .notification__message, | |
| .layout-multiple-columns .account__header__tabs__name h1 small, | |
| .layout-multiple-columns .button, | |
| .layout-multiple-columns .status__content__read-more-button, | |
| .layout-multiple-columns .status__prepend, | |
| .layout-multiple-columns .status__info, | |
| .layout-multiple-columns .status__relative-time, | |
| .layout-multiple-columns .status__info .status__display-name, | |
| .layout-multiple-columns .account__section-headline a, | |
| .layout-multiple-columns .account__section-headline button, | |
| .layout-multiple-columns .notification__filter-bar a, | |
| .layout-multiple-columns .notification__filter-bar button { | |
| font-size: var(--font-size); | |
| } | |
| /* Things that should have the mid font-size */ | |
| .layout-multiple-columns .account__header__extra__links, | |
| .layout-multiple-columns .columns-area__panels__pane--compositional .account__header__account-note textarea, | |
| .layout-multiple-columns .account__header__content, | |
| .layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea, | |
| .layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .spoiler-input__input { | |
| font-size: var(--font-size-mid); | |
| line-height: var(--line-height-mid); | |
| } | |
| /* Exceptions */ | |
| .layout-multiple-columns .account__header__content { | |
| line-height: 18px; | |
| } | |
| /* Things that will have even smaller font size */ | |
| .layout-multiple-columns .account__header__account-note label { | |
| font-size: var(--font-size-12); | |
| } | |
| /* Line heights */ | |
| .layout-multiple-columns .reply-indicator__content, | |
| .layout-multiple-columns .status__content { | |
| line-height: var(--line-height); | |
| } | |
| /* Modal overlay */ | |
| .layout-multiple-columns .modal-root__overlay { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-modal-overlay) !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-light-text) !important; | |
| } | |
| .layout-multiple-columns .modal-root__modal .display-name strong, | |
| .layout-multiple-columns .modal-root__modal .status__content { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-light-text) !important; | |
| } | |
| /* Hide footer buttons in modals */ | |
| .layout-multiple-columns .media-modal__overlay .picture-in-picture__footer { | |
| display: none; | |
| } | |
| /* Report modal */ | |
| .layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .layout-multiple-columns .media-modal__navigation .fa-times::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| /* List adder input */ | |
| .layout-multiple-columns .list-editor input.setting-text, | |
| .layout-multiple-columns .list-adder input.setting-text { | |
| background-color: transparent; | |
| border-color: var(--color-black-coral); | |
| height: 38px; | |
| } | |
| .layout-multiple-columns .list-editor .column-inline-form button, | |
| .layout-multiple-columns .list-adder .column-inline-form button, | |
| .layout-multiple-columns .list-editor .column-inline-form button::before { | |
| min-height: 38px; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 100% !important; | |
| } | |
| .layout-multiple-columns .list-editor__search { | |
| padding: 15px; | |
| } | |
| .layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html { | |
| color: var(--color-light-text); | |
| } | |
| .layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html, | |
| .layout-multiple-columns .list-editor__search .search__input { | |
| background-color: transparent; | |
| border-color: var(--color-black-coral); | |
| height: 38px; | |
| } | |
| .layout-multiple-columns .list-editor .drawer__inner.backdrop { | |
| box-shadow: 2px 4px 15px rgba(0, 0, 0, .2); | |
| } | |
| .layout-multiple-columns .column-back-button, | |
| .layout-multiple-columns .drawer__header, | |
| .layout-multiple-columns .drawer__inner__mastodon { | |
| background-color: transparent; | |
| } | |
| /* Hide the elephant */ | |
| .layout-multiple-columns .drawer__inner__mastodon { | |
| display: none; | |
| } | |
| .layout-multiple-columns .list-editor__search .search__icon .fa { | |
| margin: 15px; | |
| } | |
| .layout-multiple-columns .list-editor .list__display-name, | |
| .layout-multiple-columns .list-adder .list__display-name { | |
| display: flex; | |
| gap: var(--gap-default); | |
| } | |
| .layout-multiple-columns .list__display-name .fa-list-ul::before { | |
| top: -2px; | |
| } | |
| /* URL preview cards */ | |
| .layout-multiple-columns .status-card, | |
| .layout-multiple-columns .status-card:hover, | |
| .layout-multiple-columns .status-card:focus { | |
| background-color: transparent; | |
| border-color: var(--color-border); | |
| } | |
| /* URL preview card summary text */ | |
| .layout-multiple-columns .status-card .status-card__host, | |
| .layout-multiple-columns .status-card .status-card__description { | |
| color: var(--color-dim); | |
| } | |
| /* URL preview card box */ | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns .status-card .status-card__content { | |
| padding: var(--gap-default); | |
| } | |
| .layout-multiple-columns .status-card.expanded .status-card__content { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| /* Preview cards */ | |
| .layout-multiple-columns .status-card { | |
| background-color: var(--color-bg); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| transition: all 200ms; | |
| } | |
| .layout-multiple-columns .status-card.expanded { | |
| display: block; | |
| } | |
| .layout-multiple-columns a.status-card .status-card__host { | |
| font-size: var(--font-size); | |
| } | |
| .layout-multiple-columns .status-card a:active .status-card__author, | |
| .layout-multiple-columns .status-card a:active .status-card__title, | |
| .layout-multiple-columns .status-card a:focus .status-card__author, | |
| .layout-multiple-columns .status-card a:focus .status-card__title, | |
| .layout-multiple-columns .status-card a:hover .status-card__author, | |
| .layout-multiple-columns .status-card a:hover .status-card__title, | |
| .layout-multiple-columns a.status-card:active .status-card__author, | |
| .layout-multiple-columns a.status-card:active .status-card__title, | |
| .layout-multiple-columns a.status-card:focus .status-card__author, | |
| .layout-multiple-columns a.status-card:focus .status-card__title, | |
| .layout-multiple-columns a.status-card:hover .status-card__author, | |
| .layout-multiple-columns a.status-card:hover .status-card__title, | |
| .layout-multiple-columns a.status-card:focus .status-card__description, | |
| .layout-multiple-columns a.status-card:hover .status-card__description { | |
| color: var(--color-fg); | |
| } | |
| .layout-multiple-columns .status-card a:active .status-card__host, | |
| .layout-multiple-columns .status-card a:hover .status-card__host, | |
| .layout-multiple-columns .status-card a:focus .status-card__host, | |
| .layout-multiple-columns a.status-card:active .status-card__host, | |
| .layout-multiple-columns a.status-card:focus .status-card__host, | |
| .layout-multiple-columns a.status-card:hover .status-card__host { | |
| color: var(--color-dim); | |
| } | |
| /* Show minimal status card if there's no image */ | |
| .layout-multiple-columns .status-card .status-card__image:not(:has(img)) { | |
| display: none; | |
| } | |
| /* Show iframe in status card if status contains embedded media */ | |
| .layout-multiple-columns .status-card .status-card-video:has(iframe) { | |
| display: inherit; | |
| } | |
| /* Hide empty status cards alltogether (Mastodon 4.1.5-2023-07-29) */ | |
| .layout-multiple-columns .status-card:has(.fa-file-text) { | |
| display: none; | |
| } | |
| /* Hide empty YouTube description */ | |
| .layout-multiple-columns .status-card__description:empty { | |
| display: none; | |
| } | |
| .layout-multiple-columns .status-card:focus, | |
| .layout-multiple-columns .status-card:hover { | |
| background-color: rgba(255 255 255 / .03); | |
| } | |
| .layout-multiple-columns .fa-file-text::before { | |
| content: ""; | |
| } | |
| .layout-multiple-columns .status-card__image-image, | |
| .layout-multiple-columns .status-card__image-preview, | |
| .layout-multiple-columns .status-card .status-card__image { | |
| background-color: var(--color-arsenic); | |
| border-radius: 0; | |
| } | |
| .layout-multiple-columns a.status-card .status-card__content { | |
| padding: 16px; | |
| } | |
| .layout-multiple-columns a.status-card .status-card__title { | |
| color: var(--color-fg); | |
| font-size: var(--font-size-title); | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 1.3; | |
| margin: 0; | |
| } | |
| .layout-multiple-columns a.status-card.expanded .status-card__title { | |
| white-space: inherit; | |
| } | |
| .layout-multiple-columns .status-card.expanded .status-card__host { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| margin-bottom: 0; | |
| margin-top: 0; | |
| } | |
| .layout-multiple-columns .status-card.expanded .status-card__description { | |
| margin-top: 0; | |
| } | |
| /* Announcements */ | |
| .layout-multiple-columns .announcements__pagination .fa, | |
| .layout-multiple-columns .announcements__pagination { | |
| color: var(--color-dim); | |
| } | |
| .layout-multiple-columns .announcements__pagination .icon-button:hover i { | |
| color: var(--color-light-purple); | |
| } | |
| /* Dark panels like modals and boxes */ | |
| .layout-multiple-columns .account-memorial-banner, | |
| .layout-multiple-columns .follow-request-banner, | |
| .layout-multiple-columns .moved-account-banner, | |
| .layout-multiple-columns .column-select__menu *, | |
| .layout-multiple-columns .column-select__menu, | |
| .layout-multiple-columns .column-settings__hashtags .column-select__control, | |
| .layout-multiple-columns .about__meta, | |
| .layout-multiple-columns .about__section__title, | |
| .layout-multiple-columns .announcements, | |
| .layout-multiple-columns .report-dialog-modal, | |
| .layout-multiple-columns .report-modal__target, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions, | |
| .layout-multiple-columns .privacy-dropdown__dropdown, | |
| .layout-multiple-columns .drawer__backdrop, | |
| .layout-multiple-columns .list-editor__account, | |
| .layout-multiple-columns .list-editor, | |
| .layout-multiple-columns .list-editor__lists, | |
| .layout-multiple-columns .list-adder__account, | |
| .layout-multiple-columns .list-adder, | |
| .layout-multiple-columns .list-adder__lists, | |
| .layout-multiple-columns .dropdown-menu__arrow::before, | |
| .layout-multiple-columns .dropdown-menu, | |
| .layout-multiple-columns .dropdown-menu__item a, | |
| .layout-multiple-columns .dropdown-menu__item button, | |
| .layout-multiple-columns .emoji-mart-category-label span, | |
| .layout-multiple-columns .emoji-mart-bar:first-child, | |
| .layout-multiple-columns .emoji-picker-dropdown__menu, | |
| .layout-multiple-columns .privacy-dropdown.active .privacy-dropdown__value, | |
| .layout-multiple-columns .emoji-mart-search input, | |
| .layout-multiple-columns .emoji-mart-scroll, | |
| .layout-multiple-columns .emoji-mart-search, | |
| .layout-multiple-columns .follow_requests-unlocked_explanation, | |
| .layout-multiple-columns .dismissable-banner, | |
| .layout-multiple-columns .block-modal__action-bar, | |
| .layout-multiple-columns .boost-modal__action-bar, | |
| .layout-multiple-columns .confirmation-modal__action-bar, | |
| .layout-multiple-columns .mute-modal__action-bar, | |
| .layout-multiple-columns .setting-text__wrapper, | |
| .layout-multiple-columns .setting-text, | |
| .layout-multiple-columns .report-modal__comment, | |
| .layout-multiple-columns .report-modal__container, | |
| .layout-multiple-columns .actions-modal, | |
| .layout-multiple-columns .block-modal, | |
| .layout-multiple-columns .boost-modal, | |
| .layout-multiple-columns .compare-history-modal, | |
| .layout-multiple-columns .confirmation-modal, | |
| .layout-multiple-columns .mute-modal, | |
| .layout-multiple-columns .report-modal, | |
| .layout-multiple-columns .column-header__collapsible-inner { | |
| background-color: var(--color-dark); | |
| border-color: var(--color-dark); | |
| color: var(--color-light-text); | |
| } | |
| /* Column-header border */ | |
| .layout-multiple-columns .column-header__collapsible { | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .layout-multiple-columns .column-header__collapsible, | |
| .layout-multiple-columns .column-header__collapsible.collapsed { | |
| opacity: 1; | |
| } | |
| /* Hashtag list */ | |
| .layout-multiple-columns .column-settings__hashtags .column-select__multi-value, | |
| .layout-multiple-columns .column-settings__hashtags .column-select__control { | |
| color: var(--color-light-purple); | |
| } | |
| .layout-multiple-columns .column-settings__hashtags .column-select__multi-value { | |
| background-color: var(--color-bg-75); | |
| } | |
| /* Has dark 1px border */ | |
| .layout-multiple-columns .dismissable-banner { | |
| border: 1px solid var(--color-dark); | |
| } | |
| /* More subtle box-shadow for dropdown-menu */ | |
| .layout-multiple-columns .search-popout, | |
| .layout-multiple-columns .search__popout, | |
| .layout-multiple-columns .dropdown-menu { | |
| box-shadow: 2px 4px 16px rgb(0 0 0 / .01); | |
| } | |
| /* Autosuggest box shadow reset */ | |
| .layout-multiple-columns .column-select__menu, | |
| .layout-multiple-columns .search-popout, | |
| .layout-multiple-columns .search__popout, | |
| .layout-multiple-columns .dropdown-menu, | |
| .layout-multiple-columns .emoji-picker-dropdown__menu, | |
| .layout-multiple-columns .compose-form .compose-form__warning, | |
| .layout-multiple-columns .privacy-dropdown.active .privacy-dropdown__value, | |
| .layout-multiple-columns .privacy-dropdown__dropdown, | |
| .layout-multiple-columns .language-dropdown__dropdown, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions { | |
| box-shadow: none; | |
| } | |
| /* Composer form warnings */ | |
| .layout-multiple-columns .compose-form .compose-form__warning { | |
| background-color: var(--color-light-purple); | |
| color: var(--color-bg); | |
| } | |
| /* Content warning placeholder */ | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea::placeholder, | |
| .layout-multiple-columns .compose-form .spoiler-input__input::placeholder { | |
| color: var(--color-dim); | |
| } | |
| /* Border colors */ | |
| .layout-multiple-columns .search-results__section__header, | |
| .layout-multiple-columns .account__header__bar, | |
| .layout-multiple-columns .about__meta__divider, | |
| .layout-multiple-columns .poll__footer, | |
| .layout-multiple-columns .report-dialog-modal .poll__option.dialog-option, | |
| .layout-multiple-columns .account, | |
| .layout-multiple-columns .report-dialog-modal__container, | |
| .layout-multiple-columns .dropdown-menu__item.edited-timestamp__history__item, | |
| .layout-multiple-columns .dropdown-menu__container__header, | |
| .layout-multiple-columns .compare-history-modal .report-modal__target, | |
| .layout-multiple-columns .account__section-headline, | |
| .layout-multiple-columns .detailed-status__action-bar, | |
| .layout-multiple-columns .column-back-button, | |
| .layout-multiple-columns .column-header, | |
| .layout-multiple-columns .audio-player, | |
| .layout-multiple-columns .video-player, | |
| .layout-multiple-columns .media-gallery, | |
| .layout-multiple-columns .compose-form .spoiler-input__input, | |
| .layout-multiple-columns .compose-form__autosuggest-wrapper, | |
| .layout-multiple-columns .compose-form__poll-wrapper, | |
| .layout-multiple-columns .compose-form__poll-wrapper select, | |
| .layout-multiple-columns .poll__option input[type="text"], | |
| .layout-multiple-columns .report-dialog-modal__textarea, | |
| .layout-multiple-columns .search__input, | |
| .layout-multiple-columns .setting-text, | |
| .layout-multiple-columns .dropdown-menu__separator, | |
| .layout-multiple-columns .status, | |
| .layout-multiple-columns .emoji-mart-search input, | |
| .layout-multiple-columns .conversation, | |
| .layout-multiple-columns .setting-text__wrapper { | |
| border-color: var(--color-border); | |
| } | |
| /* Change panel order */ | |
| .layout-multiple-columns .columns-area__panels__pane { | |
| order: 3; | |
| } | |
| .layout-multiple-columns .columns-area__panels__main { | |
| order: 2; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { | |
| order: 1; | |
| } | |
| /* Make the side input last in order */ | |
| .layout-multiple-columns .drawer { | |
| order: 999999; | |
| padding: 0 10px; | |
| width: var(--width-column); | |
| } | |
| .layout-multiple-columns .drawer__header, | |
| .layout-multiple-columns .drawer__inner { | |
| background-color: var(--color-bg); | |
| border-color: var(--color-bg); | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane, | |
| .layout-multiple-columns .columns-area__panels__pane__inner, | |
| .layout-multiple-columns .compose-panel { | |
| min-width: var(--width-side-panel); | |
| width: var(--width-side-panel); | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--compositional { | |
| flex-grow: 1; | |
| height: 100vh; | |
| max-width: 350px; | |
| overflow: visible; | |
| position: sticky; | |
| top: 0; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner { | |
| position: static; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner, | |
| .compose-panel { | |
| /* stylelint-disable-next-line */ | |
| width: 100% !important; | |
| } | |
| .layout-multiple-columns .search { | |
| margin-inline: 10px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| @media (min-width: 1175px) { | |
| .layout-multiple-columns .columns-area__panels__main { | |
| max-width: calc(var(--width-main-panel) + calc(var(--gap-default) * 4)); | |
| padding-left: calc(var(--gap-default) * 2); | |
| padding-right: calc(var(--gap-default) * 2); | |
| } | |
| .layout-multiple-columns .navigation-panel { | |
| margin-right: -20px; | |
| /* stylelint-disable-next-line */ | |
| padding-left: 0 !important; | |
| padding-right: 20px; | |
| } | |
| } | |
| .layout-multiple-columns .emoji-mart-anchor-bar, | |
| .layout-multiple-columns .column-link.column-link--logo svg { | |
| display: none; | |
| } | |
| /* Accented items like links */ | |
| .layout-multiple-columns .about__section__title, | |
| .layout-multiple-columns .account__header__bio .account__header__fields a, | |
| .layout-multiple-columns .column-back-button, | |
| .layout-multiple-columns .emoji-mart-anchor.emoji-mart-anchor-selected, | |
| .layout-multiple-columns .text-icon-button.active, | |
| .layout-multiple-columns .empty-column-indicator a, | |
| .layout-multiple-columns .follow_requests-unlocked_explanation a, | |
| .layout-multiple-columns .column-header__back-button, | |
| .layout-multiple-columns .link-button, | |
| .layout-multiple-columns .reply-indicator__content a.unhandled-link, | |
| .layout-multiple-columns .status__content a.unhandled-link, | |
| .layout-multiple-columns .column-header > .column-header__back-button, | |
| .layout-multiple-columns .reply-indicator__content a, | |
| body.embed .status__content a, | |
| .layout-multiple-columns .status__content a, | |
| .layout-multiple-columns .column-link--transparent.active, | |
| .layout-multiple-columns .status__content__read-more-button { | |
| color: var(--color-accent); | |
| } | |
| /* Toggles etc. */ | |
| .layout-multiple-columns .search-results__header, | |
| .layout-multiple-columns .drawer__inner, | |
| .layout-multiple-columns .react-toggle .react-toggle-track { | |
| background-color: var(--color-bg); | |
| } | |
| /* Accented background colors */ | |
| .layout-multiple-columns .react-toggle--checked .react-toggle-track, | |
| .layout-multiple-columns .language-dropdown__dropdown__results__item.active, | |
| .layout-multiple-columns .icon-with-badge__badge, | |
| .layout-multiple-columns .button { | |
| background-color: var(--color-accent-dark); | |
| } | |
| .layout-multiple-columns .block-modal__cancel-button, | |
| .layout-multiple-columns .confirmation-modal__cancel-button, | |
| .layout-multiple-columns .confirmation-modal__secondary-button, | |
| .layout-multiple-columns .mute-modal__cancel-button { | |
| background-color: transparent; | |
| color: var(--color-dim); | |
| font-size: var(--font-size-mid); | |
| } | |
| .layout-multiple-columns .block-modal__cancel-button:focus, | |
| .layout-multiple-columns .confirmation-modal__cancel-button:focus, | |
| .layout-multiple-columns .confirmation-modal__secondary-button:focus, | |
| .layout-multiple-columns .mute-modal__cancel-button:focus, | |
| .layout-multiple-columns .block-modal__cancel-button:hover, | |
| .layout-multiple-columns .confirmation-modal__cancel-button:hover, | |
| .layout-multiple-columns .confirmation-modal__secondary-button:hover, | |
| .layout-multiple-columns .mute-modal__cancel-button:hover { | |
| background-color: transparent; | |
| color: var(--color-dark-electric-blue); | |
| } | |
| .column-link--transparent .icon-with-badge__badge, | |
| .layout-multiple-columns .icon-with-badge__badge { | |
| background-color: var(--color-accent-dark); | |
| border-color: var(--color-bg); | |
| } | |
| /* Accented strokes */ | |
| .layout-multiple-columns .trends__item__sparkline path:last-child { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| stroke: var(--color-accent) !important; | |
| } | |
| /* Mud background colors, reply-indicator */ | |
| .layout-multiple-columns .reply-indicator { | |
| background-color: var(--color-mud); | |
| color: var(--color-light-text); | |
| max-height: 20vh; | |
| } | |
| /* Dropdown hovers */ | |
| .layout-multiple-columns .language-dropdown__dropdown__results__item:hover, | |
| .layout-multiple-columns .language-dropdown__dropdown__results__item:focus { | |
| background-color: var(--color-accent-dark-50); | |
| color: var(--color-light-text); | |
| } | |
| /* Accented border colors */ | |
| .layout-multiple-columns .notification.unread::before, | |
| .layout-multiple-columns .status__wrapper.unread::before { | |
| border-color: var(--color-accent); | |
| display: none; | |
| } | |
| /* Filtered post */ | |
| .layout-multiple-columns .status__wrapper.status__wrapper--filtered { | |
| align-items: center; | |
| background-color: var(--color-focusable-toot); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| color: var(--color-light-purple); | |
| display: flex; | |
| flex-wrap: nowrap; | |
| font-size: var(--font-size-mid); | |
| justify-content: space-between; | |
| margin: var(--gap-default); | |
| overflow: hidden; | |
| padding: 4px 16px; | |
| text-align: left; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| width: calc(100% - calc(var(--gap-default) * 2)); | |
| } | |
| .layout-multiple-columns .notification:has(.status__wrapper--filtered) .notification__message { | |
| display: none; | |
| } | |
| /* Fix hover/focus on article that has filtered banner */ | |
| .layout-multiple-columns article:has(.status__wrapper--filtered):hover { | |
| background-color: transparent; | |
| } | |
| .layout-multiple-columns .status__wrapper.status__wrapper--filtered button { | |
| background-color: rgb(255 255 255 / 0); | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| color: var(--color-fg); | |
| font-weight: var(--font-weight-semibold); | |
| margin-left: auto; | |
| padding-bottom: 8px; | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| padding-top: 8px; | |
| transition: 200ms background; | |
| white-space: nowrap; | |
| } | |
| .layout-multiple-columns .status__wrapper.status__wrapper--filtered button:focus, | |
| .layout-multiple-columns .status__wrapper.status__wrapper--filtered button:hover { | |
| background-color: rgb(255 255 255 / .1); | |
| text-decoration: none; | |
| } | |
| /* Unread message */ | |
| .layout-multiple-columns .conversation--unread, | |
| .layout-multiple-columns .notification.unread:hover, | |
| .layout-multiple-columns .notification.unread, | |
| .layout-multiple-columns .status__wrapper.unread { | |
| background-color: var(--color-dark); | |
| } | |
| .layout-multiple-columns .notification:hover .notification__message { | |
| background-color: transparent; | |
| } | |
| /* Things like notification status update text that should be dim */ | |
| /* stylelint-disable-next-line selector-not-notation */ | |
| .layout-multiple-columns .notification .status-link.mention:not(.hashtag):not(.mention), | |
| .layout-multiple-columns .notification .status-link.hashtag, | |
| .layout-multiple-columns .notification .status-link.mention:not(.hashtag), | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea::placeholder, | |
| .layout-multiple-columns .compose-form .icon-button, | |
| .layout-multiple-columns .compose-form .spoiler-input__input::placeholder, | |
| .layout-multiple-columns .compose-form__poll-wrapper .button.button-secondary, | |
| .layout-multiple-columns .language-dropdown__dropdown__results__item__common-name, | |
| .layout-multiple-columns .report-dialog-modal__textarea::placeholder, | |
| .layout-multiple-columns .poll__link, | |
| .layout-multiple-columns .muted .poll, | |
| .layout-multiple-columns .status .status__relative-time, | |
| .layout-multiple-columns .status .status__visibility-icon, | |
| .layout-multiple-columns .block-modal__action-bar > div, | |
| .layout-multiple-columns .boost-modal__action-bar > div, | |
| .layout-multiple-columns .confirmation-modal__action-bar > div, | |
| .layout-multiple-columns .mute-modal__action-bar > div, | |
| .layout-multiple-columns .search-popout > h4, | |
| .layout-multiple-columns .search__popout > h4, | |
| .layout-multiple-columns .status-check-box__status .detailed-status__display-name, | |
| .layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text, | |
| .layout-multiple-columns .status-card .status-card__description, | |
| .layout-multiple-columns .report-dialog-modal .dialog-option .poll__input, | |
| .layout-multiple-columns .dropdown-menu__container__header, | |
| .layout-multiple-columns .sign-in-banner p, | |
| .layout-multiple-columns .navigation-bar > a, | |
| .layout-multiple-columns .character-counter, | |
| .layout-multiple-columns .text-icon-button, | |
| .layout-multiple-columns .empty-column-indicator, | |
| .layout-multiple-columns .follow_requests-unlocked_explanation, | |
| .layout-multiple-columns .poll__footer, | |
| .layout-multiple-columns .server-banner h4, | |
| .layout-multiple-columns .column-header__button, | |
| .layout-multiple-columns .search__icon .fa-times-circle, | |
| .layout-multiple-columns .timeline-hint, | |
| .layout-multiple-columns .status__display-name.muted, | |
| .layout-multiple-columns .setting-text-label, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dt, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dd, | |
| .layout-multiple-columns .link-footer p, | |
| .layout-multiple-columns .account__header__extra__links a, | |
| .layout-multiple-columns .trends__item__current, | |
| .layout-multiple-columns .emoji-mart-anchor, | |
| .layout-multiple-columns .emoji-mart, | |
| .layout-multiple-columns .emoji-mart-anchors, | |
| .layout-multiple-columns .reply-indicator .display-name *, | |
| .layout-multiple-columns .status__display-name, | |
| .layout-multiple-columns .status__prepend .status__display-name strong, | |
| .layout-multiple-columns .status__prepend, | |
| .layout-multiple-columns .compose-form .compose-form__modifiers, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea, | |
| .layout-multiple-columns .compose-form .spoiler-input__input, | |
| .layout-multiple-columns .autosuggest-textarea__suggestions, | |
| .layout-multiple-columns .compose-form .autosuggest-account .display-name__account, | |
| .layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper, | |
| .layout-multiple-columns .compose-form .compose-form__buttons-wrapper, | |
| .layout-multiple-columns .account__section-headline a, | |
| .layout-multiple-columns .account__section-headline button, | |
| .layout-multiple-columns .notification__filter-bar a, | |
| .layout-multiple-columns .notification__filter-bar button, | |
| .layout-multiple-columns .attachment-list.compact .fa, | |
| .layout-multiple-columns .attachment-list__list a, | |
| .layout-multiple-columns .notification__message .fa-user-plus, | |
| .layout-multiple-columns .notification__message .fa-home, | |
| .layout-multiple-columns .notification__message .fa-retweet, | |
| .layout-multiple-columns .link-footer p a, | |
| .layout-multiple-columns .trends__item__name, | |
| .layout-multiple-columns .muted .status__content, | |
| .layout-multiple-columns .muted .status__content a, | |
| .layout-multiple-columns .muted .status__content p, | |
| .layout-multiple-columns .muted .status__display-name strong, | |
| .layout-multiple-columns .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content { | |
| color: var(--color-dim); | |
| } | |
| /* Dim backgrounds */ | |
| .layout-multiple-columns .poll__chart { | |
| background-color: var(--color-dim); | |
| } | |
| /* Lighter border colors */ | |
| .layout-multiple-columns .report-dialog-modal .dialog-option .poll__input, | |
| .layout-multiple-columns .poll__input { | |
| border-color: var(--color-brand-mastodon-text-light); | |
| } | |
| /* Light grey things */ | |
| .layout-multiple-columns .navigation-bar, | |
| .layout-multiple-columns .navigation-bar strong { | |
| color: var(--color-gainsboro); | |
| } | |
| /* CW button */ | |
| .layout-multiple-columns .reply-indicator__content .status__content__spoiler-link, | |
| .layout-multiple-columns .status__content__spoiler-link { | |
| background-color: var(--color-dark); | |
| color: var(--color-light-purple); | |
| font-weight: var(--font-weight-semibold); | |
| /* Need to override forced styles */ | |
| /* stylelint-disable-next-line */ | |
| margin-left: calc(var(--gap-default) / 2) !important; | |
| vertical-align: baseline; | |
| } | |
| .layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:focus, | |
| .layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:hover, | |
| .layout-multiple-columns .status__content .status__content__spoiler-link:focus, | |
| .layout-multiple-columns .status__content .status__content__spoiler-link:hover { | |
| background-color: var(--color-dark); | |
| color: var(--color-lighter-purple); | |
| } | |
| /* CW button in notifications */ | |
| .layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link, | |
| .layout-multiple-columns .notification .status__content__spoiler-link { | |
| background-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| .layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link:focus, | |
| .layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link:hover, | |
| .layout-multiple-columns .notification .status__content .status__content__spoiler-link:focus, | |
| .layout-multiple-columns .notification .status__content .status__content__spoiler-link:hover { | |
| background-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| /* Light purple things */ | |
| .layout-multiple-columns .announcements__pagination .icon-button:hover i, | |
| .layout-multiple-columns .server-banner__introduction, | |
| .layout-multiple-columns .account__header__tabs__name h1 small, | |
| .layout-multiple-columns .account .account__display-name, | |
| .layout-multiple-columns .column-settings__section, | |
| .layout-multiple-columns .setting-toggle__label, | |
| .layout-multiple-columns .server-banner__number-label { | |
| color: var(--color-light-purple); | |
| } | |
| /* White things */ | |
| .layout-multiple-columns .compose-form__poll-wrapper select, | |
| .layout-multiple-columns .actions-modal ul li:not(:empty) a, | |
| .layout-multiple-columns .report-dialog-modal .status__content, | |
| .layout-multiple-columns .report-dialog-modal .status__content p, | |
| .layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong, | |
| .layout-multiple-columns .report-dialog-modal__lead, | |
| .layout-multiple-columns .detailed-status__display-name strong, | |
| .layout-multiple-columns .dismissable-banner__message, | |
| .layout-multiple-columns .privacy-dropdown__option.active, | |
| .layout-multiple-columns .privacy-dropdown__option:hover .privacy-dropdown__option__content, | |
| .layout-multiple-columns .privacy-dropdown__option:focus .privacy-dropdown__option__content, | |
| .layout-multiple-columns .privacy-dropdown__option, | |
| .layout-multiple-columns .privacy-dropdown__option__content strong, | |
| .layout-multiple-columns .status__info .display-name strong.display-name__html, | |
| .layout-multiple-columns .reply-indicator .display-name strong.display-name__html, | |
| .layout-multiple-columns .notification__message, | |
| .layout-multiple-columns .getting-started__trends h4 a, | |
| .layout-multiple-columns .trends__item__name a, | |
| .layout-multiple-columns .emoji-mart-search input, | |
| .layout-multiple-columns .language-dropdown__dropdown__results__item, | |
| .layout-multiple-columns .reply-indicator__content, | |
| .layout-multiple-columns .compose-form .compose-form__modifiers:focus, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea, | |
| .layout-multiple-columns .compose-form .spoiler-input__input:focus, | |
| .layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper:focus, | |
| .layout-multiple-columns .compose-form .compose-form__buttons-wrapper:focus, | |
| .layout-multiple-columns .autosuggest-textarea .autosuggest-textarea__textarea:focus, | |
| .layout-multiple-columns .account__section-headline a.active, | |
| .layout-multiple-columns .account__section-headline button.active, | |
| .layout-multiple-columns .notification__filter-bar a.active, | |
| .layout-multiple-columns .notification__filter-bar button.active { | |
| color: var(--color-light-text); | |
| } | |
| .layout-multiple-columns .muted .status__info *, | |
| .layout-multiple-columns .muted .status__info .display-name * { | |
| color: var(--color-light-text); | |
| } | |
| /* Account names */ | |
| .layout-multiple-columns .status__info .display-name .display-name__account, | |
| .layout-multiple-columns .display-name__account { | |
| color: var(--color-dim); | |
| } | |
| /* Main panel column */ | |
| .layout-multiple-columns .columns-area__panels__main > div { | |
| border-left: 1px solid var(--color-border); | |
| border-right: 1px solid var(--color-border); | |
| } | |
| /* Status header */ | |
| .layout-multiple-columns .status .status__info { | |
| align-items: flex-start; | |
| gap: var(--gap-default); | |
| height: calc(var(--gap-default) * 2); | |
| justify-content: flex-start; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| /* Status action bar */ | |
| .layout-multiple-columns .status__action-bar { | |
| margin-top: 12px; | |
| max-height: 27px; | |
| } | |
| /* Display name */ | |
| .layout-multiple-columns .status__info .status__display-name { | |
| align-items: flex-start; | |
| display: inline-flex; | |
| gap: var(--gap-default); | |
| order: 1; | |
| } | |
| .layout-multiple-columns .status__info .display-name { | |
| display: flex; | |
| gap: calc(var(--gap-default) / 2); | |
| } | |
| /* The separator dot */ | |
| .layout-multiple-columns .status__info::before { | |
| color: var(--color-dim); | |
| content: "·"; | |
| display: inline-block; | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| height: 20px; | |
| margin-left: -6px; | |
| margin-right: -10px; | |
| order: 2; | |
| position: relative; | |
| } | |
| .layout-multiple-columns .status__info .status__relative-time { | |
| height: unset; | |
| order: 3; | |
| } | |
| /* Visibility icon */ | |
| .layout-multiple-columns .status .status__visibility-icon { | |
| font-size: var(--font-size-mid); | |
| } | |
| /* Panels and things that should be transparent */ | |
| .layout-multiple-columns .search-results__section__header, | |
| .layout-multiple-columns .explore__search-results, | |
| .layout-multiple-columns .status__wrapper-direct, | |
| .layout-multiple-columns .focusable:focus .detailed-status, | |
| .layout-multiple-columns .focusable:focus .detailed-status__action-bar, | |
| .layout-multiple-columns .compose-form__poll-wrapper select, | |
| .layout-multiple-columns .poll__option input[type="text"], | |
| .layout-multiple-columns .language-dropdown__dropdown, | |
| body.embed .activity-stream .entry, | |
| .layout-multiple-columns .report-dialog-modal__textarea, | |
| .layout-multiple-columns .column-inline-form, | |
| .layout-multiple-columns .scrollable .account-card, | |
| .layout-multiple-columns .scrollable .account-card__title__avatar .account__avatar, | |
| .layout-multiple-columns .scrollable .account-card__title__avatar img, | |
| .layout-multiple-columns .explore__search-header, | |
| .layout-multiple-columns .empty-column-indicator, | |
| .layout-multiple-columns .follow_requests-unlocked_explanation, | |
| .layout-multiple-columns .column-link, | |
| .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel, | |
| .layout-multiple-columns .tabs-bar__wrapper .column-back-button, | |
| .layout-multiple-columns .account__header, | |
| .layout-multiple-columns .column-header__back-button, | |
| .layout-multiple-columns .compose-form .compose-form__modifiers, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea, | |
| .layout-multiple-columns .compose-form .spoiler-input__input, | |
| .layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper, | |
| .layout-multiple-columns .compose-form .compose-form__buttons-wrapper, | |
| .layout-multiple-columns .column-header__button, | |
| .layout-multiple-columns .account__section-headline button, | |
| .layout-multiple-columns .notification__filter-bar button, | |
| .layout-multiple-columns .account__section-headline, | |
| .layout-multiple-columns .notification__filter-bar, | |
| .layout-multiple-columns .tabs-bar__wrapper, | |
| .layout-multiple-columns .column-header, | |
| body.embed .detailed-status, | |
| .layout-multiple-columns .detailed-status, | |
| .layout-multiple-columns .detailed-status__action-bar, | |
| .layout-multiple-columns .column > .scrollable { | |
| background-color: transparent; | |
| } | |
| /* Avatar */ | |
| .account__avatar[style="width: 46px; height: 46px;"], | |
| .layout-multiple-columns .status__avatar { | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| max-height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| max-width: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| min-height: var(--size-avatar) !important; | |
| /* stylelint-disable-next-line */ | |
| min-width: var(--size-avatar) !important; | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| width: var(--size-avatar) !important; | |
| } | |
| /* Avatars */ | |
| .layout-multiple-columns .account-card__title__avatar .account__avatar, | |
| .layout-multiple-columns .account-card__title__avatar img, | |
| .layout-multiple-columns .account__avatar > img, | |
| .layout-multiple-columns .column > .scrollable .status__avatar img { | |
| border: 0; | |
| border-radius: 50%; | |
| box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset; | |
| } | |
| /* Things that should not have border */ | |
| .layout-multiple-columns .column-inline-form, | |
| .layout-multiple-columns .column > .scrollable, | |
| .layout-multiple-columns .error-column, | |
| .layout-multiple-columns .getting-started, | |
| .layout-multiple-columns .regeneration-indicator, | |
| .layout-multiple-columns .column-header { | |
| border: 0; | |
| } | |
| /* Nice active effect in the column header */ | |
| .layout-multiple-columns .column-header__wrapper.active { | |
| box-shadow: var(--active-header-box-shadow); | |
| } | |
| .layout-multiple-columns .column-header__wrapper.active::before { | |
| /* stylelint-disable-next-line */ | |
| background: var(--active-header-radial-gradient); | |
| } | |
| .layout-multiple-columns .compose-form__autosuggest-wrapper, | |
| .layout-multiple-columns .compose-form__buttons-wrapper { | |
| border: 0; | |
| } | |
| .layout-multiple-columns article, | |
| .layout-multiple-columns .status__prepend, | |
| .layout-multiple-columns .notification__message, | |
| .layout-multiple-columns .status { | |
| transition: all 200ms; | |
| } | |
| /* Toot hover effect */ | |
| .layout-multiple-columns article:focus, | |
| .layout-multiple-columns article:hover { | |
| background-color: var(--color-light-shade); | |
| } | |
| /* Focusable toot and other hilighted items */ | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item.selected, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:active, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:focus, | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:hover, | |
| .layout-multiple-columns .focusable:focus { | |
| /* stylelint-disable-next-line */ | |
| background: var(--color-focusable-toot); | |
| } | |
| /* Search panel that opens when focusing Search or paste URL field */ | |
| .layout-multiple-columns .explore__search-header .search__popout, | |
| .layout-multiple-columns .compose-form__poll-wrapper option, | |
| .layout-multiple-columns .search__popout, | |
| .layout-multiple-columns .search-popout { | |
| background-color: var(--color-dark); | |
| border-color: var(--color-dark); | |
| color: var(--color-dim); | |
| } | |
| .layout-multiple-columns .search__popout em, | |
| .layout-multiple-columns .search-popout em { | |
| color: var(--color-light-text); | |
| } | |
| /* Pill style tags */ | |
| .layout-multiple-columns .hashtag-bar a { | |
| background-color: var(--color-dark); | |
| border-radius: 9999px; | |
| color: var(--color-light-purple); | |
| display: inline-block; | |
| font-size: var(--font-size-smaller); | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 1.5; | |
| margin: 0 4px 4px 0; | |
| padding: 4px 8px; | |
| text-decoration: none; | |
| } | |
| .layout-multiple-columns .hashtag-bar .link-button { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-multiple-columns .hashtag-bar a:focus, | |
| .layout-multiple-columns .hashtag-bar a:hover { | |
| background-color: var(--color-accent-dark); | |
| /* It should be always light also on light mode, so not using variable here */ | |
| color: #f7f9f9; | |
| } | |
| .layout-multiple-columns .hashtag-bar a:focus span, | |
| .layout-multiple-columns .hashtag-bar a:hover span { | |
| text-decoration: none; | |
| } | |
| /* Status update tinted to right */ | |
| .layout-multiple-columns .status:not(.status--in-thread) .hashtag-bar, | |
| .layout-multiple-columns .status__content--collapsed + .status__content__read-more-button, | |
| .layout-multiple-columns .status:not(.status--in-thread) .status__action-bar, | |
| .layout-multiple-columns .status:not(.status--in-thread) .attachment-list, | |
| .layout-multiple-columns .status:not(.status--in-thread) .status__content { | |
| font-size: var(--font-size); | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| padding-top: 0; | |
| } | |
| /* Translate link and other padding resets */ | |
| .layout-multiple-columns .conversation .attachment-list, | |
| .layout-multiple-columns .translate ~ .status__content__read-more-button { | |
| padding-left: 0; | |
| } | |
| /* Make sure read more/translate button is always aligned to center vertically and to left horizontally */ | |
| .layout-multiple-columns .status__content__read-more-button { | |
| align-items: center; | |
| display: flex; | |
| justify-content: flex-start; | |
| margin-inline-start: 0; | |
| } | |
| /* Rtl version */ | |
| [dir="rtl"] .layout-multiple-columns .status__action-bar, | |
| [dir="rtl"] .layout-multiple-columns .attachment-list, | |
| [dir="rtl"] .layout-multiple-columns .status__content__read-more-button, | |
| [dir="rtl"] .layout-multiple-columns .status .status__content { | |
| padding-left: 0; | |
| padding-right: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Reset padding from attachment-list on reply indicator */ | |
| .layout-multiple-columns .reply-indicator .attachment-list { | |
| padding-left: 0; | |
| } | |
| .layout-multiple-columns .status__action-bar button, | |
| .layout-multiple-columns .detailed-status__action-bar button { | |
| border-radius: 50%; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button[disabled], | |
| .layout-multiple-columns .status__action-bar .icon-button[disabled] { | |
| opacity: .5; | |
| pointer-events: none; | |
| } | |
| /* Media inside status update tinted to right */ | |
| .layout-multiple-columns .status .audio-player, | |
| .layout-multiple-columns .status .video-player, | |
| .layout-multiple-columns .status .media-gallery { | |
| margin-left: auto; | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| width: calc(100% - calc(var(--size-avatar) + var(--gap-default))) !important; | |
| } | |
| /* Fix aspect-ratio for some videos in mastodon v4.1.5-nightly-2023-07-26 */ | |
| .layout-multiple-columns div[style*='aspect-ratio']:not([class]) { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| aspect-ratio: unset !important; | |
| } | |
| .layout-multiple-columns .status .status-card { | |
| margin-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Detailed status update */ | |
| .layout-multiple-columns .detailed-status .status__content { | |
| font-size: var(--font-size-bigger); | |
| line-height: 1.4; | |
| } | |
| body.embed .detailed-status__meta, | |
| .layout-multiple-columns .detailed-status__meta { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| } | |
| body.embed .detailed-status__meta { | |
| line-height: 1.5; | |
| } | |
| body.embed .detailed-status__reblogs, | |
| body.embed .detailed-status__favorites, | |
| .layout-multiple-columns .detailed-status__favorites, | |
| .layout-multiple-columns .detailed-status__reblogs { | |
| display: inline-flex; | |
| font-size: var(--font-size); | |
| gap: 4px; | |
| } | |
| body.embed .detailed-status__meta .animated-number, | |
| .layout-multiple-columns .detailed-status__meta .animated-number { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| body.embed .detailed-status__reblogs, | |
| .layout-multiple-columns .detailed-status__reblogs { | |
| font-size: var(--font-size); | |
| } | |
| body.embed .detailed-status__reblogs, | |
| body.embed .detailed-status__favorites { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| /* Textual labels for detailed metrics */ | |
| body.embed .detailed-status__link > .fa-reply + span::after, | |
| .layout-multiple-columns .detailed-status__link > .fa-reply + span::after { | |
| color: var(--color-dim); | |
| content: 'Replies'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__link > .fa-retweet + span::after, | |
| .layout-multiple-columns .detailed-status__link > .fa-retweet + span::after { | |
| color: var(--color-dim); | |
| content: 'Boosts'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__link > .fa-star + span::after, | |
| .layout-multiple-columns .detailed-status__link > .fa-star + span::after { | |
| color: var(--color-dim); | |
| content: 'Favourites'; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| body.embed .detailed-status__meta .detailed-status__link .fa-star, | |
| body.embed .detailed-status__meta .detailed-status__link .fa-retweet, | |
| .layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-star, | |
| .layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-retweet { | |
| display: none; | |
| } | |
| /* Icon buttons */ | |
| .layout-multiple-columns .icon-button { | |
| color: var(--color-dim); | |
| } | |
| /* Hide/Show media button */ | |
| .layout-multiple-columns .spoiler-button.spoiler-button--minified > button { | |
| background-color: var(--color-bg); | |
| border-radius: var(--border-radius-badges); | |
| color: var(--color-ghost-button-text); | |
| opacity: .5; | |
| } | |
| /* Alt badge */ | |
| .layout-multiple-columns .media-gallery__item__badges > span { | |
| border-radius: var(--border-radius-badges); | |
| } | |
| /* Distance from the edge */ | |
| .layout-multiple-columns .spoiler-button--minified { | |
| inset-inline-start: var(--badges-distance-from-edge); | |
| top: var(--badges-distance-from-edge); | |
| } | |
| .layout-multiple-columns .media-gallery__item__badges { | |
| bottom: var(--badges-distance-from-edge); | |
| inset-inline-start: var(--badges-distance-from-edge); | |
| } | |
| .layout-multiple-columns .spoiler-button.spoiler-button--minified > button:hover, | |
| .layout-multiple-columns .spoiler-button.spoiler-button--minified > button:focus { | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .icon-button:hover { | |
| color: var(--color-accent); | |
| } | |
| /* Other general buttons */ | |
| .layout-multiple-columns .column-header__button.active:active, | |
| .column-header__button.active:focus, | |
| .layout-multiple-columns .column-header__button.active:hover { | |
| background-color: var(--color-focusable-toot); | |
| color: var(--color-fg); | |
| } | |
| /* Bars on panels */ | |
| .layout-multiple-columns .ui__header, | |
| .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-multiple-columns .tabs-bar__wrapper { | |
| backdrop-filter: blur(12px); | |
| background-color: var(--color-bg-75); | |
| border-color: var(--color-border); | |
| padding: 0; | |
| } | |
| @media (min-width: 1175px) { | |
| .layout-multiple-columns .ui__header, | |
| .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-multiple-columns .tabs-bar__wrapper { | |
| margin-right: -2px; | |
| } | |
| } | |
| /* Hidden things */ | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) { | |
| display: none; | |
| } | |
| /* Column headers */ | |
| .layout-multiple-columns .column-header { | |
| font-size: var(--font-size-heading); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| /* Column sub-headers */ | |
| .layout-multiple-columns .column-subheading { | |
| background-color: transparent; | |
| color: var(--color-fg); | |
| /* stylelint-disable-next-line */ | |
| font-size: var(--font-size-bigger) !important; | |
| /* stylelint-disable-next-line */ | |
| font-weight: var(--font-weight-bold) !important; | |
| /* stylelint-disable-next-line */ | |
| padding-bottom: 12px !important; | |
| /* stylelint-disable-next-line */ | |
| padding-top: 24px !important; | |
| text-transform: unset; | |
| } | |
| /* "Your lists" view */ | |
| .layout-multiple-columns .column-subheading ~ article { | |
| padding-left: var(--gap-default); | |
| padding-right: var(--gap-default); | |
| } | |
| /* Notifications */ | |
| .layout-multiple-columns .notification__message { | |
| display: grid; | |
| gap: var(--gap-default); | |
| grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr); | |
| height: calc(var(--gap-default) * 2); | |
| } | |
| .layout-multiple-columns .notification__message i { | |
| font-size: var(--size-icon-notification); | |
| } | |
| /* Make sure notification user is clickable */ | |
| .layout-multiple-columns .notification__display-name { | |
| position: relative; | |
| z-index: 99; | |
| } | |
| /* Hack to display notification message title on one line */ | |
| .layout-multiple-columns .notification__message > span { | |
| display: block; | |
| margin-top: calc(var(--size-avatar-small) + 6px); | |
| overflow: visible; | |
| } | |
| .layout-multiple-columns .notification__message > span > span { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Truncate too long unfollow buttons and texts beside it so they don't overlap in notifications */ | |
| @media (max-width: 600px) { | |
| .layout-multiple-columns .notification .account__relationship > .button, | |
| .layout-multiple-columns .notification__report__actions .button { | |
| max-width: 24vw; | |
| } | |
| .layout-multiple-columns .notification__message > span > span { | |
| max-width: 50vw; | |
| } | |
| } | |
| .layout-multiple-columns .notification__message > div { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .layout-multiple-columns .muted .status__avatar { | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .notification .account__avatar-overlay-base { | |
| display: none; | |
| } | |
| .layout-multiple-columns .notification .account__avatar, | |
| .layout-multiple-columns .notification .account__avatar-overlay-overlay .account__avatar, | |
| .layout-multiple-columns .notification .account__avatar-overlay-overlay { | |
| /* Need to override inline styles */ | |
| /* stylelint-disable-next-line */ | |
| height: var(--size-avatar-small) !important; | |
| /* stylelint-disable-next-line */ | |
| min-height: var(--size-avatar-small) !important; | |
| /* stylelint-disable-next-line */ | |
| min-width: var(--size-avatar-small) !important; | |
| position: absolute; | |
| /* stylelint-disable-next-line */ | |
| width: var(--size-avatar-small) !important; | |
| } | |
| .layout-multiple-columns .notification .status__info .status__display-name { | |
| overflow: visible; | |
| } | |
| /* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */ | |
| .layout-multiple-columns .notification.notification-reblog .status__info .status__display-name, | |
| .layout-multiple-columns .notification.notification-follow .status__info .status__display-name, | |
| .layout-multiple-columns .notification.notification-favourite .status__info .status__display-name { | |
| pointer-events: none; | |
| } | |
| /* Hack to show follow notification more minimal way */ | |
| .layout-multiple-columns .notification.notification-admin-report .notification__report, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .account__wrapper, | |
| .layout-multiple-columns .notification.notification-update .account__wrapper, | |
| .layout-multiple-columns .notification.notification-follow .account__wrapper { | |
| position: relative; | |
| } | |
| .layout-multiple-columns .notification.notification-admin-report .account__avatar-overlay-overlay { | |
| top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default) + 4px)); | |
| } | |
| /* Hack to show follow notification more minimal way */ | |
| .layout-multiple-columns .notification.notification-poll .display-name, | |
| .layout-multiple-columns .notification.notification-update .display-name__html, | |
| .layout-multiple-columns .notification.notification-update .display-name__account, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .display-name__html, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .display-name, | |
| .layout-multiple-columns .notification.notification-follow .display-name__html { | |
| visibility: hidden; | |
| } | |
| .layout-multiple-columns .notification.notification-update .account__avatar-wrapper, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .account__avatar-wrapper, | |
| .layout-multiple-columns .notification.notification-follow .account__avatar-wrapper, | |
| .layout-multiple-columns .notification .account__avatar-overlay { | |
| left: calc(var(--size-avatar-small) + var(--gap-default) + 18px); | |
| margin-top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default))); | |
| position: absolute; | |
| top: 4px; | |
| } | |
| .layout-multiple-columns .notification.notification-admin-report .account__avatar-overlay { | |
| margin-top: 0; | |
| top: 0; | |
| } | |
| .layout-multiple-columns .notification.notification-status .notification__message > span { | |
| display: none; | |
| } | |
| .layout-multiple-columns .notification.notification-follow .verified-badge, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .account__contents, | |
| .layout-multiple-columns .notification.notification-follow .account__contents, | |
| .layout-multiple-columns .notification.notification-follow .display-name, | |
| .layout-multiple-columns .notification.notification-admin-sign-up .display-name + span, | |
| .layout-multiple-columns .notification.notification-follow .display-name + span, | |
| .layout-multiple-columns .notification.notification-favourite .status__wrapper-direct .status__prepend, | |
| .layout-multiple-columns .notification.notification-reblog .display-name, | |
| .layout-multiple-columns .notification.notification-favourite .display-name { | |
| display: none; | |
| } | |
| /* Minimal boost notification fix */ | |
| .layout-multiple-columns .notification.notification-reblog .notification__message > span { | |
| margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); | |
| } | |
| /* Minimal follow notification fix */ | |
| .layout-multiple-columns .notification.notification-follow .notification__message > span { | |
| margin-top: calc(calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px); | |
| } | |
| .layout-multiple-columns .notification.notification.notification-admin-sign-up .account__relationship, | |
| .layout-multiple-columns .notification.notification-follow .account__relationship { | |
| transform: translateY(-8px); | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns .notification.notification-follow .account__avatar-wrapper { | |
| top: 6px; | |
| } | |
| /* Minimal fav notification fix */ | |
| .layout-multiple-columns .notification.notification-favourite .notification__message > span { | |
| margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); | |
| } | |
| /* If a status content is empty and there's only attachment, remove gap */ | |
| .layout-multiple-columns .notification .status__content:has(.status__content__text:empty) + .attachment-list { | |
| margin-top: 0; | |
| } | |
| /* Less space before attachments if no status content */ | |
| .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .audio-player, | |
| .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .video-player, | |
| .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .media-gallery, | |
| .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .audio-player, | |
| .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .video-player, | |
| .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery { | |
| margin-top: calc(var(--gap-default) / 2); | |
| } | |
| .layout-multiple-columns .status__prepend { | |
| padding-left: calc(var(--size-avatar) - 4px); | |
| } | |
| .layout-multiple-columns .notification.notification-update .account__display-name, | |
| .layout-multiple-columns .notification.notification-follow .account__display-name { | |
| display: inline-flex; | |
| gap: var(--gap-default); | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| /* Admin reports and other admin notifications */ | |
| .layout-multiple-columns .notification-admin-report .notification__report { | |
| border-color: var(--color-border); | |
| display: flex; | |
| font-size: var(--font-size); | |
| gap: 16px; | |
| margin-top: 22px; | |
| padding: 16px; | |
| padding-left: calc(var(--size-avatar) + var(--gap-default)); | |
| } | |
| .layout-multiple-columns .notification-admin-report .notification__report__details { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| } | |
| .layout-multiple-columns .notification-admin-report .notification__report__details strong { | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Revert hack for notification admin message that has no avatar visible */ | |
| .layout-multiple-columns .notification-admin-report .notification__message > span { | |
| display: block; | |
| margin-top: calc(var(--size-avatar-small) + 4px); | |
| overflow: visible; | |
| } | |
| /* Hide things in notifications */ | |
| .layout-multiple-columns .notification .status__relative-time, | |
| .layout-multiple-columns .notification .status__info::before { | |
| display: none; | |
| } | |
| /* Right side panel */ | |
| .layout-multiple-columns .navigation-panel { | |
| box-sizing: border-box; | |
| margin-top: 0; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .layout-multiple-columns .navigation-panel hr { | |
| /* Hide but reserve space */ | |
| visibility: hidden; | |
| } | |
| .columns-area__panels__pane--navigational .navigation-panel { | |
| border: 0; | |
| height: 100%; | |
| } | |
| .layout-multiple-columns .navigation-panel__logo hr { | |
| margin: 0; | |
| } | |
| /* Attempt to hide scrollbars for .navigation-panel for Firefox */ | |
| .dropdown-menu__container__list--scrollable, | |
| .layout-multiple-columns .navigation-panel { | |
| scrollbar-width: none; | |
| } | |
| /* Hide scrollbars for .navigation-panel for Chrome and Safari */ | |
| .dropdown-menu__container__list--scrollable::-webkit-scrollbar, | |
| .layout-multiple-columns .navigation-panel::-webkit-scrollbar { | |
| display: none; | |
| width: 4px; | |
| } | |
| /* Columns */ | |
| .layout-multiple-columns .column { | |
| border-right: 1px solid var(--color-border); | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| width: var(--width-column); | |
| } | |
| .layout-multiple-columns .column-subheading, | |
| .layout-multiple-columns .column-link { | |
| align-items: center; | |
| color: var(--color-light-text); | |
| display: flex; | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-semibold); | |
| gap: var(--gap-column-link); | |
| overflow: visible; | |
| padding-bottom: 8px; | |
| padding-left: var(--gap-column-link); | |
| padding-right: calc(var(--gap-column-link) * 1.5); | |
| padding-top: 8px; | |
| transition: all 100ms; | |
| } | |
| [dir="rtl"] .layout-multiple-columns .column-link { | |
| margin-left: auto; | |
| margin-right: 0; | |
| } | |
| .layout-multiple-columns .column-link > i { | |
| min-width: 20px; | |
| width: 26px; | |
| } | |
| .layout-multiple-columns .column-link > span { | |
| position: relative; | |
| } | |
| .layout-multiple-columns .account__section-headline a { | |
| transition: all 200ms; | |
| } | |
| .layout-multiple-columns .dropdown-menu__item a:hover, | |
| .layout-multiple-columns .notification__filter-bar button:hover, | |
| .layout-multiple-columns .account__section-headline a:hover { | |
| background-color: var(--color-column-link-hover); | |
| } | |
| /* Mobile devices */ | |
| @media (hover: none) { | |
| .layout-multiple-columns .notification__filter-bar button.active:hover, | |
| .layout-multiple-columns .account__section-headline a.active:hover { | |
| background-color: transparent; | |
| } | |
| } | |
| /* Notification filter bar */ | |
| .layout-multiple-columns .notification__filter-bar { | |
| border-bottom: 1px solid var(--color-border); | |
| border-left: 0; | |
| border-right: 0; | |
| } | |
| .layout-multiple-columns .column-link__icon { | |
| margin: 0; | |
| } | |
| /* Notification badge on side panel */ | |
| .layout-multiple-columns .icon-with-badge__badge { | |
| border-radius: 50%; | |
| font-size: 11px; | |
| left: 12px; | |
| top: -6px; | |
| } | |
| .layout-multiple-columns .column-link--transparent.active { | |
| color: var(--color-light-text); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| /* Top panel */ | |
| .layout-multiple-columns .account__section-headline a.active::after, | |
| .layout-multiple-columns .account__section-headline button.active::after, | |
| .layout-multiple-columns .notification__filter-bar a.active::after, | |
| .layout-multiple-columns .notification__filter-bar button.active::after { | |
| background-color: var(--color-accent); | |
| border: 0; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| bottom: -1px; | |
| content: ""; | |
| display: block; | |
| height: 4px; | |
| left: 50%; | |
| min-width: 56px; | |
| position: absolute; | |
| transform: translateX(-50%); | |
| } | |
| .layout-multiple-columns .account__section-headline a.active::before, | |
| .layout-multiple-columns .account__section-headline button.active::before, | |
| .layout-multiple-columns .notification__filter-bar a.active::before, | |
| .layout-multiple-columns .notification__filter-bar button.active::before { | |
| display: none; | |
| } | |
| .layout-multiple-columns .notification.notification-reblog .status__action-bar, | |
| .layout-multiple-columns .notification.notification-favourite .status__action-bar { | |
| display: none; | |
| } | |
| .layout-multiple-columns .search .search__icon .fa-search::before { | |
| content: ''; | |
| } | |
| .layout-multiple-columns .status__prepend .fa-retweet::before { | |
| content: var(--icon-boost-status-prepend); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .notification .notification__message .fa { | |
| font-size: 27px; | |
| margin-right: 4px; | |
| max-width: 30px; | |
| } | |
| .layout-multiple-columns .notification .fa:not(.fa-link)::before { | |
| font-size: 22px; | |
| height: 27px; | |
| } | |
| .layout-multiple-columns .notification .fa.fa-user-plus:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| font-size: 20px; | |
| } | |
| .layout-multiple-columns .account__relationship .fa.fa-user-plus:not(.fa-link)::before, | |
| .layout-multiple-columns .notification .account__relationship .fa.fa-user-plus:not(.fa-link)::before { | |
| color: var(--color-dim); | |
| } | |
| .layout-multiple-columns .notification .fa.fa-flag::before, | |
| .layout-multiple-columns .notification .fa.fa-tasks:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| } | |
| .layout-multiple-columns .notification .fa.fa-home:not(.fa-link)::before { | |
| color: var(--color-accent-dark); | |
| font-size: 24px; | |
| } | |
| /* Follow/unfollow button */ | |
| .layout-multiple-columns .account__relationship .icon-button, | |
| .layout-multiple-columns .notification .account__relationship .icon-button { | |
| background-color: transparent; | |
| } | |
| .layout-multiple-columns .notification .account__relationship .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-dim); | |
| font-size: 20px; | |
| } | |
| .layout-multiple-columns .list-adder__lists .fa-times::before, | |
| .layout-multiple-columns .account__wrapper .account__relationship .icon-button.active .fa::before, | |
| .layout-multiple-columns .explore__search-results .account__relationship .icon-button.active .fa::before, | |
| .layout-multiple-columns .notification .account__relationship .icon-button.active .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-green); | |
| opacity: .75; | |
| } | |
| .layout-multiple-columns .list-adder__lists .fa-times:hover::before, | |
| .layout-multiple-columns .explore__search-results .icon-button.active:hover .fa::before, | |
| .layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-red); | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .explore__search-results .icon-button:focus .fa::before, | |
| .layout-multiple-columns .notification .account__relationship .icon-button:focus .fa::before, | |
| .layout-multiple-columns .explore__search-results .icon-button.active:focus .fa::before, | |
| .layout-multiple-columns .notification .account__relationship .icon-button.active:focus .fa::before, | |
| .layout-multiple-columns .explore__search-results .icon-button:hover .fa::before, | |
| .layout-multiple-columns .notification .account__relationship .icon-button:hover .fa::before { | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-green); | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .notification .account__relationship { | |
| border-radius: 50%; | |
| height: 24px; | |
| transform: translateY(-4px); | |
| } | |
| /* Emoji-mart search input */ | |
| .layout-multiple-columns .emoji-mart-search-icon svg { | |
| fill: var(--color-border); | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg { | |
| fill: var(--color-accent); | |
| } | |
| .layout-multiple-columns .emoji-mart-search > input { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-multiple-columns .compose-form__autosuggest-wrapper textarea::placeholder, | |
| .layout-multiple-columns .report-dialog-modal__textarea::placeholder, | |
| .layout-multiple-columns .emoji-mart-search > input::placeholder { | |
| color: var(--color-dim); | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .report-dialog-modal__textarea, | |
| .layout-multiple-columns .report-dialog-modal__textarea:focus, | |
| .layout-multiple-columns .emoji-mart-search > input:focus { | |
| color: var(--color-light-text); | |
| } | |
| .layout-multiple-columns .emoji-mart-search-icon:disabled { | |
| opacity: 1; | |
| } | |
| /* Search */ | |
| .layout-multiple-columns .search .search__icon .fa-search { | |
| background-color: var(--color-mud); | |
| background-image: var(--icon-search); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: 20px; | |
| display: inline-block; | |
| height: 24px; | |
| top: 10px; | |
| width: 24px; | |
| } | |
| .layout-multiple-columns input.setting-text, | |
| .layout-multiple-columns .search__input { | |
| background-color: var(--color-mud); | |
| border-color: var(--color-mud); | |
| border-radius: 32px; | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| height: 42px; | |
| padding: 0 20px; | |
| } | |
| /* Input texts */ | |
| .layout-multiple-columns .poll__option input[type="text"], | |
| .layout-multiple-columns input.setting-text:focus, | |
| .layout-multiple-columns .search__input:focus { | |
| color: var(--color-light-text); | |
| } | |
| /* Poll input */ | |
| .layout-multiple-columns .poll__option input[type="text"] { | |
| background-color: transparent; | |
| border-color: var(--color-border); | |
| } | |
| .layout-multiple-columns .poll__option input[type="text"]:focus { | |
| border-color: var(--color-accent); | |
| } | |
| /* Placeholders */ | |
| .layout-multiple-columns .poll__option input[type="text"]::placeholder, | |
| .layout-multiple-columns .search__input::placeholder, | |
| .layout-multiple-columns input::placeholder, | |
| .layout-multiple-columns input.setting-text::placeholder { | |
| color: var(--color-dim); | |
| opacity: 1; | |
| } | |
| /* Profile */ | |
| .layout-multiple-columns .getting-started__trends h4, | |
| .layout-multiple-columns .account__header__bar { | |
| border-color: var(--color-border); | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields { | |
| background-color: transparent; | |
| color: var(--color-dim); | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--gap-default); | |
| padding: 0; | |
| } | |
| /* Truncate too long links in the profile, like Nostr */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields a { | |
| display: block; | |
| max-width: 220px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl::after { | |
| content: '|'; | |
| order: 2; | |
| } | |
| /* Recognize empty field and remove pipe */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dd > span:empty)::after { | |
| display: none; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dt { | |
| order: 1; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dd { | |
| order: 3; | |
| } | |
| /* Hide the character in between Joined label */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:first-of-type::before, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:first-of-type::after { | |
| display: none; | |
| } | |
| /* Make full width... */ | |
| /* stylelint-disable no-duplicate-selectors */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl { | |
| width: 100%; | |
| } | |
| /* stylelint-enable no-duplicate-selectors */ | |
| /* ...except on those that have label with GitHub, github, YouTube or similar */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i]) { | |
| /* Move to last */ | |
| order: 9999; | |
| width: auto; | |
| } | |
| /* Hide labels that show "Website", "YouTube", etc. */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i]) dt { | |
| display: none; | |
| } | |
| /* Hide pipe after link icon and the link icon from the ones that already have an icon */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="website" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i])::before { | |
| display: none; | |
| } | |
| /* If GitHub etc. move even further from links */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"]) { | |
| /* Move to last-last */ | |
| order: 99999; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="github" i])::after { | |
| content: var(--icon-github); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="discord" i])::after { | |
| content: var(--icon-discord); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="linkedin" i])::after { | |
| content: var(--icon-linkedin); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title="IG"], dt[title*="instagram" i])::after { | |
| content: var(--icon-instagram); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="youtube" i])::after { | |
| content: var(--icon-youtube); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="twitch" i])::after { | |
| content: var(--icon-twitch); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title="x" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="twitter" i])::after { | |
| content: var(--icon-twitter); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="patreon" i])::after { | |
| content: var(--icon-patreon); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="paypal" i])::after { | |
| content: var(--icon-paypal); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="kofi" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="ko-fi" i])::after { | |
| content: var(--icon-kofi); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="masto" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title*="mastodon" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title="Alt account" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title~="account" i])::after, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:has(dt[title~="Mastodon account" i])::after { | |
| content: var(--icon-mastodon); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* Default link icon */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl::before { | |
| content: var(--icon-link); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* If the profile item has no link element, show just label icon */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl:not(:has(a))::before { | |
| content: var(--icon-label); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| /* Verified colors for Firefox before :has */ | |
| .layout-multiple-columns .account__details .verified-badge a, | |
| .layout-multiple-columns .account__header__bar .account__header__fields .verified__mark, | |
| .layout-multiple-columns .account__header__bar .account__header__fields .verified a, | |
| .layout-multiple-columns .account__header__bar .account__header__bio .account__header__fields .verified a, | |
| .layout-multiple-columns .account__header__bar .account__header__bio .account__header__fields .verified dd { | |
| color: var(--color-verified); | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Reset verified colors */ | |
| .layout-multiple-columns .account__details .verified-badge a, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified a, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified a, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified dd { | |
| color: var(--color-accent); | |
| font-weight: var(--font-weight-regular); | |
| } | |
| /* Replace verified__mark */ | |
| .layout-multiple-columns .account__details .verified-badge .verified-badge__mark::before, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark { | |
| content: var(--icon-verified-smaller); | |
| } | |
| .layout-multiple-columns .account__details .verified-badge, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd { | |
| align-items: center; | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .layout-multiple-columns .account__details .verified-badge .verified-badge__mark, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(1) { | |
| align-items: center; | |
| display: flex; | |
| order: 2; | |
| } | |
| .layout-multiple-columns .account__details .verified-badge > span, | |
| .layout-multiple-columns .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(2) { | |
| order: 1; | |
| } | |
| /* Joined label */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dt:not([title]) { | |
| display: inline-flex; | |
| font-weight: var(--font-weight-regular); | |
| gap: calc(var(--gap-default) / 2); | |
| text-transform: unset; | |
| } | |
| .layout-multiple-columns h4, | |
| .layout-multiple-columns .search__popout h4, | |
| .layout-multiple-columns .search-popout h4, | |
| .layout-multiple-columns .server-banner h4 { | |
| text-transform: unset; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dt:not([title])::before { | |
| content: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); | |
| height: 18.5px; | |
| width: 18.5px; | |
| } | |
| .layout-multiple-columns .account__header__bio .account__header__fields dd, | |
| .layout-multiple-columns .account__header__bio .account__header__fields dt { | |
| color: var(--color-dim); | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| text-transform: unset; | |
| } | |
| /* stylelint-disable no-duplicate-selectors */ | |
| .layout-multiple-columns .account__header__bio .account__header__fields dl { | |
| background-color: transparent; | |
| border: 0; | |
| color: var(--color-dim); | |
| display: inline-flex; | |
| font-size: var(--font-size); | |
| font-weight: var(--font-weight-regular); | |
| gap: calc(var(--gap-default) / 2); | |
| padding: 0; | |
| } | |
| /* stylelint-enable no-duplicate-selectors */ | |
| .layout-multiple-columns .getting-started__trends h4 { | |
| border: 0; | |
| font-size: var(--font-size-heading); | |
| font-weight: var(--font-weight-bold); | |
| line-height: 24px; | |
| margin-bottom: var(--gap-default); | |
| text-transform: unset; | |
| } | |
| .layout-multiple-columns .getting-started__trends { | |
| margin-top: calc(var(--gap-default) * 2); | |
| } | |
| .layout-multiple-columns .flex-spacer, | |
| .layout-multiple-columns .getting-started, | |
| .layout-multiple-columns .getting-started__wrapper { | |
| background-color: transparent; | |
| } | |
| .layout-multiple-columns .trends__item__name a { | |
| font-size: var(--font-size); | |
| } | |
| .layout-multiple-columns .trends__item__name { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .layout-multiple-columns .account__header__image { | |
| height: 200px; | |
| } | |
| .layout-multiple-columns .account__header__bar .avatar .account__avatar { | |
| background-color: transparent; | |
| border: 0; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: 90px !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 90px !important; | |
| } | |
| .layout-multiple-columns .account__header__tabs { | |
| overflow: visible; | |
| } | |
| .layout-multiple-columns .account__header__tabs .account-role { | |
| display: none; | |
| width: 90px; | |
| } | |
| /* Follow/unfollow button */ | |
| .layout-multiple-columns .button.button--with-bell { | |
| padding: 7px 18px; | |
| } | |
| /* Follow/unfollow button */ | |
| body.embed .button.logo-button, | |
| .layout-multiple-columns .notification__report__actions .button, | |
| .layout-multiple-columns .column-inline-form button, | |
| .layout-multiple-columns .explore__suggestions .account-card__actions__button button, | |
| .layout-multiple-columns .account__header__tabs__buttons .button, | |
| .layout-multiple-columns .account .account__relationship > .button, | |
| .layout-multiple-columns .notification .account__relationship > .button { | |
| background-color: transparent; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| color: var(--color-light-text); | |
| font-size: var(--font-size); | |
| max-width: 36vw; | |
| overflow: hidden; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| text-overflow: ellipsis; | |
| transition: all 200ms; | |
| white-space: nowrap; | |
| } | |
| /* Dark button borders and other things that have borders all around */ | |
| body.embed .button.logo-button, | |
| .layout-multiple-columns .notification__report__actions .button, | |
| .layout-multiple-columns .column-inline-form button, | |
| .layout-multiple-columns .explore__suggestions .account-card__actions__button button, | |
| .layout-multiple-columns .account__header__tabs__buttons .button, | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button, | |
| .layout-multiple-columns .notification .account__relationship > .button, | |
| .layout-multiple-columns .account .account__relationship > .button { | |
| border: 1px solid var(--color-outer-space); | |
| } | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button { | |
| color: var(--color-light-text); | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button { | |
| align-items: center; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| display: inline-flex; | |
| justify-content: center; | |
| } | |
| /* Exception for close icon that seem to align wrongly when active */ | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button .fa.fa-close { | |
| align-self: start; | |
| } | |
| body.embed .button.logo-button:hover, | |
| .layout-multiple-columns .column-inline-form button:hover, | |
| .layout-multiple-columns .explore__suggestions .account-card__actions__button button:hover, | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button.active { | |
| color: var(--color-light-text); | |
| } | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button .fa::before { | |
| font-size: 17px; | |
| } | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-bell-o::before, | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-bell::before { | |
| content: var(--icon-bell-header-tabs); | |
| } | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button.active .fa-bell-o::before, | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button.active .fa-bell::before { | |
| content: var(--icon-bell-header-tabs-active); | |
| } | |
| .layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-ellipsis-v::before { | |
| position: relative; | |
| top: -2px; | |
| } | |
| .layout-multiple-columns .explore__suggestions .account-card__actions__button button:hover, | |
| .layout-multiple-columns .account__header__tabs__buttons .button:focus, | |
| .layout-multiple-columns .account__header__tabs__buttons .button:hover { | |
| background-color: var(--color-profile-button-hover); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:focus, | |
| .layout-multiple-columns .status__action-bar .icon-button:focus, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover, | |
| .layout-multiple-columns .status__action-bar .icon-button:hover { | |
| background-color: transparent; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover::after, | |
| .layout-multiple-columns .status__action-bar .icon-button:hover::after { | |
| opacity: 1; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button::after, | |
| .layout-multiple-columns .status__action-bar .icon-button::after { | |
| background-color: rgba(96, 105, 132, .15); | |
| border-radius: 50%; | |
| content: ''; | |
| height: 36px; | |
| left: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| position: absolute; | |
| top: -8px; | |
| transform: translateX(1px) translateY(0px); | |
| width: 36px; | |
| z-index: -1; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button.star-icon::after, | |
| .layout-multiple-columns .status__action-bar .icon-button.star-icon::after { | |
| transform: translateX(2px) translateY(1px); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:has(.fa-ellipsis-h)::after, | |
| .layout-multiple-columns .status__action-bar .icon-button:has(.fa-ellipsis-h)::after { | |
| transform: translateX(7px) translateY(1px); | |
| } | |
| .layout-multiple-columns .conversation .icon-button::after { | |
| transform: translateX(-8px) translateY(1px); | |
| } | |
| .layout-multiple-columns .conversation__content { | |
| overflow: visible; | |
| } | |
| .layout-multiple-columns .detailed-status__button { | |
| position: relative; | |
| } | |
| .layout-multiple-columns .detailed-status__button .icon-button.star-icon::after { | |
| transform: translateX(3px); | |
| } | |
| .layout-multiple-columns .status__action-bar .icon-button.icon-button--with-counter::after { | |
| transform: translateX(-6px) translateY(2px); | |
| } | |
| /* Misc UI fixes */ | |
| .layout-multiple-columns .search__icon .fa.active { | |
| opacity: 1; | |
| } | |
| /* Explore -> For you shade in bio */ | |
| .layout-multiple-columns .scrollable .account-card__bio::after { | |
| /* stylelint-disable-next-line */ | |
| background: linear-gradient(270deg, var(--color-bg), transparent); | |
| } | |
| /* Empty column */ | |
| .layout-multiple-columns .empty-column-indicator { | |
| min-height: 120px; | |
| } | |
| .layout-multiple-columns .status__prepend + .status { | |
| padding-top: 10px; | |
| } | |
| .layout-multiple-columns .search__icon .fa-times-circle { | |
| top: 14px; | |
| } | |
| .layout-multiple-columns .setting-text__toolbar { | |
| align-items: center; | |
| } | |
| .layout-multiple-columns .timeline-hint strong { | |
| display: block; | |
| margin-bottom: var(--gap-default); | |
| } | |
| .layout-multiple-columns .timeline-hint br { | |
| display: none; | |
| } | |
| /* General fixes */ | |
| .layout-multiple-columns .account__header__bar .avatar { | |
| /* stylelint-disable-next-line */ | |
| margin-left: 0 !important; | |
| } | |
| /* Fix for button line-height */ | |
| .layout-multiple-columns .button.logo-button { | |
| line-height: 22px; | |
| } | |
| /* Visual indicator about direct messages | |
| @source https://github.com/mastodon/mastodon/issues/22158#issuecomment-1353661031 */ | |
| .layout-multiple-columns .detailed-status-direct { | |
| position: relative; | |
| } | |
| .layout-multiple-columns .status__wrapper-direct::after, | |
| .layout-multiple-columns .detailed-status-direct::after { | |
| border-left: 20px solid transparent; | |
| border-top: 20px solid var(--color-accent); | |
| /* Add a ribbon to the corner */ | |
| content: ''; | |
| height: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 0; | |
| } | |
| .layout-multiple-columns .notification .status__wrapper-direct::after { | |
| top: -40px; | |
| } | |
| /* Private message conversations */ | |
| .layout-multiple-columns .conversation .status__action-bar { | |
| padding-left: 0; | |
| } | |
| /* Default buttons */ | |
| .layout-multiple-columns .compose-form__buttons button, | |
| .layout-multiple-columns .button { | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| border-top-left-radius: 9999px; | |
| border-top-right-radius: 9999px; | |
| } | |
| /* Compose hover and focus fix */ | |
| .layout-multiple-columns .report-dialog-modal__actions .button:hover, | |
| .layout-multiple-columns .server-banner .button, | |
| .layout-multiple-columns .sign-in-banner .button, | |
| .layout-multiple-columns .ui__header__links .button, | |
| .layout-multiple-columns .compose-form__publish-button-wrapper button { | |
| background-color: var(--color-accent-dark); | |
| border-color: var(--color-accent-dark); | |
| color: var(--color-button-text); | |
| transition: all 200ms; | |
| } | |
| /* Compose form */ | |
| .layout-multiple-columns .compose-panel .compose-form { | |
| background-color: transparent; | |
| margin-bottom: 0; | |
| position: relative; | |
| z-index: 4; | |
| } | |
| /* Footer items */ | |
| .link-footer { | |
| position: relative; | |
| z-index: 5; | |
| } | |
| .layout-multiple-columns .compose-panel .compose-form, | |
| .layout-multiple-columns .compose-panel, | |
| .layout-multiple-columns .compose-form__autosuggest-wrapper { | |
| overflow: visible; | |
| } | |
| /* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */ | |
| @media (min-width: 889px) { | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea { | |
| /* stylelint-disable-next-line */ | |
| max-height: 20vh !important; /* stylelint-disable-next-line */ | |
| overflow-y: auto !important; | |
| resize: none; | |
| } | |
| /* Add slight background color for the compose form */ | |
| .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper, | |
| .layout-multiple-columns .compose-form .compose-form__buttons-wrapper { | |
| background-color: var(--color-bg-compose-form); | |
| border-color: var(--color-bg-compose-form); | |
| padding-top: 0; | |
| transition: all 200ms; | |
| } | |
| /* Smooth color transition on focus */ | |
| .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within, | |
| .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { | |
| background-color: var(--color-bg-compose-form-focus); | |
| border-color: var(--color-bg-compose-form-focus); | |
| } | |
| /* Fixes bottom row padding when there's a background */ | |
| .layout-multiple-columns .compose-form .compose-form__buttons-wrapper { | |
| padding: calc(var(--gap-default) / 2); | |
| } | |
| .layout-multiple-columns .navigation-bar + .compose-form { | |
| padding-top: 10px; | |
| } | |
| .layout-multiple-columns .compose-form .emoji-picker-dropdown { | |
| inset-inline-end: 3px; | |
| position: absolute; | |
| top: 3px; | |
| } | |
| } | |
| @media (min-width: 889px) and (max-height: 1000px) { | |
| .layout-multiple-columns .compose-form .autosuggest-textarea__textarea { | |
| /* stylelint-disable-next-line */ | |
| max-height: 10vh !important; | |
| resize: none; | |
| } | |
| } | |
| .layout-multiple-columns .server-banner .button:hover, | |
| .layout-multiple-columns .server-banner .button:focus, | |
| .layout-multiple-columns .sign-in-banner .button:hover, | |
| .layout-multiple-columns .sign-in-banner .button:hover:focus, | |
| .layout-multiple-columns .ui__header__links .button:hover, | |
| .layout-multiple-columns .ui__header__links .button:focus, | |
| .layout-multiple-columns .compose-form__publish-button-wrapper button:hover, | |
| .layout-multiple-columns .compose-form__publish-button-wrapper button:focus { | |
| background-color: var(--color-brand-mastodon-links); | |
| border-color: var(--color-brand-mastodon-links); | |
| color: var(--color-button-text); | |
| } | |
| /* Tertiary button */ | |
| .layout-multiple-columns .button.button-tertiary { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| /* stylelint-disable-next-line */ | |
| border: 1px solid var(--color-accent-dark) !important; | |
| color: var(--color-ghost-button-text); | |
| padding: 6px 17px; | |
| } | |
| .layout-multiple-columns .button.button-tertiary:active, | |
| .layout-multiple-columns .button.button-tertiary:focus, | |
| .layout-multiple-columns .button.button-tertiary:hover { | |
| border: 1px solid var(--color-accent-dark); | |
| } | |
| /* Secondary button */ | |
| .layout-multiple-columns .button.button-secondary { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| border: 1px solid var(--color-dim); | |
| color: var(--color-dim); | |
| } | |
| .layout-multiple-columns .button.button-secondary:hover { | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-light-text) !important; | |
| border-color: var(--color-light-text); | |
| color: var(--color-bg); | |
| } | |
| .layout-multiple-columns .button.button-tertiary:focus, | |
| .layout-multiple-columns .button.button-tertiary:hover { | |
| /* stylelint-disable-next-line */ | |
| background-color: var(--color-brand-mastodon-links) !important; | |
| /* stylelint-disable-next-line */ | |
| border-color: var(--color-brand-mastodon-links) !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-bg) !important; | |
| /* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */ | |
| padding: 6px 17px; | |
| } | |
| /* Smaller icon for back button */ | |
| .layout-multiple-columns .column-back-button i, | |
| .layout-multiple-columns .column-header__back-button i { | |
| font-size: 12px; | |
| } | |
| .layout-multiple-columns .icon-button__counter { | |
| font-size: var(--font-size-smaller); | |
| } | |
| .layout-multiple-columns .notification__favourite-icon-wrapper .fa.fa-retweet { | |
| color: var(--color-green); | |
| } | |
| /* Smaller icons for status action bar */ | |
| .layout-multiple-columns .status__action-bar .fa { | |
| font-size: 14.6px; | |
| min-width: 18px; | |
| } | |
| .layout-multiple-columns .status__action-bar .icon-button--with-counter { | |
| align-items: center; | |
| display: inline-flex; | |
| gap: 6px; | |
| } | |
| .layout-multiple-columns .status__action-bar .icon-button { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: unset !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: unset !important; | |
| } | |
| @media screen and (min-width: 890px) { | |
| /* Hide the space between Lists and the actual lists */ | |
| .layout-multiple-columns .list-panel > hr, | |
| .layout-multiple-columns .list-panel + hr { | |
| display: none; | |
| } | |
| /* Hide lists if there's not enough space on desktop vertically */ | |
| .layout-multiple-columns .list-panel { | |
| display: none; | |
| opacity: 0; | |
| transition: all 200ms; | |
| } | |
| .layout-multiple-columns .list-panel:focus, | |
| .layout-multiple-columns .list-panel:hover, | |
| .layout-multiple-columns .column-link[href="/lists"]:focus ~ .list-panel, | |
| .layout-multiple-columns .column-link[href="/lists"]:hover ~ .list-panel { | |
| display: block; | |
| opacity: 1; | |
| } | |
| /* Order of the side nav items */ | |
| .layout-multiple-columns .navigation-panel__logo { | |
| order: 1; | |
| } | |
| .layout-multiple-columns .column-link[href="/home"] { | |
| order: 2; | |
| } | |
| .layout-multiple-columns .column-link[href="/notifications"] { | |
| order: 3; | |
| } | |
| .layout-multiple-columns .column-link[href="/explore"] { | |
| order: 4; | |
| } | |
| .layout-multiple-columns .column-link[href="/public/local"] { | |
| order: 5; | |
| } | |
| .layout-multiple-columns .column-link[href="/public"] { | |
| order: 6; | |
| } | |
| .layout-multiple-columns .column-link[href="/conversations"] { | |
| order: 7; | |
| } | |
| .layout-multiple-columns .column-link[href='/follow_requests'] { | |
| order: 8; | |
| } | |
| .layout-multiple-columns .column-link[href="/bookmarks"] { | |
| order: 9; | |
| } | |
| .layout-multiple-columns .column-link[href="/favourites"] { | |
| order: 10; | |
| } | |
| .layout-multiple-columns .column-link[href="/lists"] { | |
| order: 12; | |
| } | |
| /* stylelint-disable-next-line no-duplicate-selectors */ | |
| .layout-multiple-columns .list-panel { | |
| order: 13; | |
| } | |
| .layout-multiple-columns .column-link[href="/settings/preferences"] { | |
| order: 11; | |
| } | |
| .layout-multiple-columns .navigation-panel__sign-in-banner, | |
| .layout-multiple-columns .navigation-panel__legal { | |
| order: 14; | |
| } | |
| .layout-multiple-columns .flex-spacer { | |
| order: 15; | |
| } | |
| .layout-multiple-columns .getting-started__trends { | |
| order: 16; | |
| } | |
| .layout-multiple-columns .status__action-bar .icon-button { | |
| position: relative; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 50px !important; | |
| } | |
| .layout-multiple-columns .conversation .status__action-bar .icon-button { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: auto !important; | |
| } | |
| /* Fix list links if they are too short */ | |
| .layout-multiple-columns .list-panel .column-link { | |
| display: flex; | |
| } | |
| } | |
| /* Replace bookmark icon */ | |
| .layout-multiple-columns .detailed-status .fa-bookmark::before, | |
| .layout-multiple-columns .status .fa-bookmark::before { | |
| content: var(--icon-bookmark); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .column-link .fa-bookmark::before { | |
| content: var(--icon-bookmark-column-link); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-column-link-active); | |
| } | |
| /* Replace bookmark icon */ | |
| .layout-multiple-columns .status .icon-button:hover:focus .fa-bookmark::before, | |
| .layout-multiple-columns .status .icon-button:focus .fa-bookmark::before, | |
| .layout-multiple-columns .status .icon-button.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-active); | |
| } | |
| .layout-multiple-columns .status button.icon-button:hover .fa-bookmark::before { | |
| content: var(--icon-bookmark-status-hover); | |
| } | |
| /* Notifications icon */ | |
| .layout-multiple-columns .column-link .fa-bell::before { | |
| content: var(--icon-bell); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-bell::before { | |
| content: var(--icon-bell-active); | |
| } | |
| /* Home icon */ | |
| .layout-multiple-columns .notification__filter-bar .fa-home::before { | |
| content: var(--icon-home-notification); | |
| } | |
| .layout-multiple-columns .notification__filter-bar .active .fa-home::before { | |
| content: var(--icon-home-notification-active); | |
| } | |
| .layout-multiple-columns .column-link .fa-home::before { | |
| content: var(--icon-home); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Federated icon */ | |
| .layout-multiple-columns .column-link .fa-globe::before { | |
| content: var(--icon-globe); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-globe::before { | |
| content: var(--icon-globe-active); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-home::before { | |
| content: var(--icon-home-column-link-active); | |
| } | |
| /* Explore icon */ | |
| .layout-multiple-columns .column-link .fa-hashtag::before { | |
| content: var(--icon-hashtag); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .column-link.active .fa-hashtag::before { | |
| content: var(--icon-hashtag-active); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Direct messages icon */ | |
| .layout-multiple-columns .column-link .fa-at::before { | |
| content: var(--icon-direct-messages); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .column-link.active .fa-at { | |
| transform: scale(1.15); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-at::before { | |
| content: var(--icon-direct-messages-active); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* Preferences icon */ | |
| .layout-multiple-columns .column-link .fa-cog::before { | |
| content: var(--icon-cog); | |
| position: relative; | |
| top: 1px; | |
| } | |
| /* Replace retweet icon */ | |
| .layout-multiple-columns .notification__filter-bar .fa-retweet::before { | |
| content: var(--icon-boost-notification-filter-bar); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-multiple-columns .notification__filter-bar .active .fa-retweet::before { | |
| content: var(--icon-boost-notification-filter-bar-active); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-multiple-columns .notification__filter-bar .fa-tasks::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-user-plus::before { | |
| font-size: 18px; | |
| } | |
| .layout-multiple-columns .notification__filter-bar .active .fa-mailre-ply::before, | |
| .layout-multiple-columns .notification__filter-bar .active .fa-reply-all::before, | |
| .layout-multiple-columns .notification__filter-bar .active .fa-reply::before { | |
| content: var(--icon-reply-nofitication-filter-bar-active); | |
| } | |
| .layout-multiple-columns .detailed-status button.icon-button i.fa-retweet, | |
| .layout-multiple-columns .status button.icon-button i.fa-retweet { | |
| background-image: var(--icon-boost-status); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| /* Replace notification retweet icon */ | |
| .layout-multiple-columns .notification__favourite-icon-wrapper .fa-retweet::before { | |
| content: var(--icon-boost-notification-wrapper); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns button.icon-button i.fa-retweet { | |
| background-image: var(--icon-boost); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .layout-multiple-columns button.icon-button:hover i.fa-retweet, | |
| .layout-multiple-columns button.icon-button.active i.fa-retweet { | |
| background-image: var(--icon-boost-active); | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| /* Un-boost and un-bookmark styles */ | |
| /* Mobile devices */ | |
| .layout-multiple-columns button.icon-button:not(.active):focus i.fa-retweet, | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet { | |
| animation: none; | |
| background-image: var(--icon-boost); | |
| } | |
| .layout-multiple-columns .status button.icon-button:not(.active):focus .fa-bookmark::before, | |
| .layout-multiple-columns .status button.icon-button:not(.active):hover .fa-bookmark::before { | |
| content: var(--icon-bookmark); | |
| } | |
| /* Un-boost and un-bookmark numbers on explore page */ | |
| .layout-multiple-columns button.icon-button:not(.active):focus i.fa-retweet ~ span, | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet ~ span { | |
| color: var(--color-dim); | |
| } | |
| /* If a hover device */ | |
| @media (hover: hover) { | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet, | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet ~ span { | |
| color: var(--color-green); | |
| } | |
| .layout-multiple-columns .status button.icon-button:not(.active):hover i.fa-bookmark::before { | |
| /* stylelint-disable-next-line */ | |
| content: var(--icon-bookmark-status-hover-red); | |
| } | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet { | |
| /* stylelint-disable-next-line */ | |
| background-image: var(--icon-boost-active) !important; | |
| } | |
| } | |
| .layout-multiple-columns button.icon-button:hover i.fa-retweet ~ span, | |
| .layout-multiple-columns button.icon-button.active i.fa-retweet ~ span { | |
| color: var(--color-green); | |
| } | |
| .layout-multiple-columns button.icon-button:hover i.fa-star ~ span, | |
| .layout-multiple-columns button.icon-button.active i.fa-star ~ span { | |
| color: var(--color-red); | |
| } | |
| /* Replace reply icon */ | |
| .layout-multiple-columns .notification__filter-bar .fa-mail-reply::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-reply::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-reply-all::before { | |
| position: relative; | |
| top: 4px; | |
| } | |
| .layout-multiple-columns .conversation .fa-reply::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-mail-reply::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-reply::before, | |
| .layout-multiple-columns .notification__filter-bar .fa-reply-all::before, | |
| .layout-multiple-columns .detailed-status .fa-mail-reply::before, | |
| .layout-multiple-columns .detailed-status .fa-reply::before, | |
| .layout-multiple-columns .detailed-status .fa-reply-all::before, | |
| .layout-multiple-columns .status .fa-mail-reply::before, | |
| .layout-multiple-columns .status .fa-reply::before, | |
| .layout-multiple-columns .status .fa-reply-all::before { | |
| content: var(--icon-reply); | |
| position: relative; | |
| top: 2px; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .fa-mail-reply::before, | |
| .layout-multiple-columns .detailed-status__action-bar .fa-reply::before, | |
| .layout-multiple-columns .detailed-status__action-bar .fa-reply-all::before { | |
| content: var(--icon-reply-detailed-status-action-bar); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-mail-reply::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply-all::before { | |
| content: var(--icon-reply-detailed-status-action-bar-hover); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .conversation .icon-button:hover .fa-reply::before { | |
| content: var(--icon-reply-conversation); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar-hover); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button.active .fa-bookmark::before { | |
| content: var(--icon-bookmark-detailed-status-action-bar-active); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .status button.icon-button:hover .fa-mail-reply::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-reply::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-reply-all::before { | |
| content: var(--icon-reply-status-hover); | |
| } | |
| /* More icons */ | |
| .layout-multiple-columns .fa-list-ul::before { | |
| content: var(--icon-list); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .relationship-tag { | |
| background-color: var(--color-mud); | |
| color: var(--color-light-text); | |
| font-size: 11px; | |
| font-weight: var(--font-weight-semibold); | |
| line-height: 12px; | |
| opacity: 1; | |
| } | |
| /* iPad etc. */ | |
| @media (max-width: 1174px) { | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button::after, | |
| .layout-multiple-columns .status__action-bar .icon-button::after, | |
| .layout-multiple-columns .detailed-status__action-bar-dropdown .icon-button::after { | |
| display: none; | |
| } | |
| .layout-multiple-columns .ui__header, | |
| .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-multiple-columns .tabs-bar__wrapper { | |
| backdrop-filter: unset; | |
| background-color: transparent; | |
| padding: 0; | |
| } | |
| .layout-multiple-columns .columns-area__panels__main { | |
| width: calc(100% - var(--width-side-panel)); | |
| } | |
| } | |
| /* In-between breakpoint */ | |
| @media (min-width: 889px) and (max-width: 1174px) { | |
| .layout-multiple-columns .columns-area__panels__main > div { | |
| border-right: 0; | |
| } | |
| .layout-multiple-columns .ui__header, | |
| .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper, | |
| .layout-multiple-columns .tabs-bar__wrapper { | |
| backdrop-filter: blur(12px); | |
| background-color: var(--color-bg-75); | |
| border-color: var(--color-border); | |
| } | |
| .layout-multiple-columns .columns-area__panels { | |
| width: calc(100% - 1px); | |
| } | |
| .layout-multiple-columns .columns-area__panels__main > .tabs-bar__wrapper { | |
| border-right: 0; | |
| } | |
| } | |
| /* iPad */ | |
| @media screen and (max-width: 889px) { | |
| .layout-multiple-columns .ui__header { | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .layout-multiple-columns .ui::after { | |
| display: none; | |
| } | |
| } | |
| /* Mobile */ | |
| @media screen and (max-width: 630px) { | |
| /* Better blur overlay for ui-header */ | |
| .layout-multiple-columns .ui::after { | |
| backdrop-filter: blur(12px); | |
| background-color: var(--color-bg-75); | |
| content: ''; | |
| /* Height is .ui__header + .tabs-bar__wrapper */ | |
| height: calc(48px + 56px); | |
| left: 0; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| /* Fix navigation-bar getting underneath layer */ | |
| .layout-multiple-columns .navigation-bar { | |
| z-index: 2; | |
| } | |
| .layout-multiple-columns .tabs-bar__wrapper { | |
| margin-right: 0; | |
| position: sticky; | |
| top: 55px; | |
| z-index: 2; | |
| } | |
| .layout-multiple-columns .columns-area__panels__main { | |
| order: 1; | |
| position: unset; | |
| width: 100%; | |
| } | |
| .layout-multiple-columns .columns-area__panels { | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| } | |
| .layout-multiple-columns .columns-area__panels__main::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { | |
| background-color: var(--color-bg); | |
| border-top: 1px solid var(--color-border); | |
| bottom: 0; | |
| height: 3.5rem; | |
| left: 0; | |
| max-height: 16vh; | |
| width: 100vw; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel { | |
| flex-direction: row; | |
| gap: 0; | |
| height: 100%; | |
| overflow-x: auto; | |
| padding: 0; | |
| } | |
| .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { | |
| display: none; | |
| } | |
| .layout-multiple-columns .column-link { | |
| justify-content: center; | |
| margin-right: unset; | |
| padding-bottom: 0; | |
| padding-left: var(--gap-column-link); | |
| padding-right: var(--gap-column-link); | |
| padding-top: 0; | |
| width: 38px; | |
| } | |
| .layout-multiple-columns .item-list .column-link { | |
| padding-bottom: 4px; | |
| padding-top: 4px; | |
| width: unset; | |
| } | |
| .layout-multiple-columns .column-link:hover, | |
| .layout-multiple-columns .column-link:focus { | |
| /* stylelint-disable-next-line */ | |
| background-color: transparent !important; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-home { | |
| font-size: 27px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-ellipsis-h { | |
| position: relative; | |
| top: -4px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-users, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bell { | |
| font-size: 20px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon { | |
| font-size: 24px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-fw { | |
| font-size: 22px; | |
| } | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-star, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bookmark, | |
| .columns-area__panels__pane--navigational .column-link__icon.fa-bell { | |
| font-size: 18px; | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .columns-area__panels__main > div, | |
| .layout-multiple-columns .columns-area__panels__main > div.columns-area.columns-area--mobile { | |
| border: 0; | |
| } | |
| .layout-multiple-columns .ui__header { | |
| align-items: center; | |
| border-bottom: 0; | |
| box-sizing: border-box; | |
| display: flex; | |
| height: 56px; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| .layout-multiple-columns .account__header__bar .avatar .account__avatar { | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| height: 106px !important; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| width: 106px !important; | |
| } | |
| .layout-multiple-columns .account__header__image { | |
| height: 157px; | |
| } | |
| .layout-multiple-columns .column > .scrollable { | |
| padding-bottom: 55px; | |
| } | |
| .layout-multiple-columns .actions-modal ul li:not(:empty) a { | |
| color: var(--color-light-text); | |
| } | |
| /* "Your lists" view */ | |
| .layout-multiple-columns .column-subheading ~ article { | |
| padding-bottom: calc(var(--gap-default) / 2); | |
| padding-top: calc(var(--gap-default) / 2); | |
| } | |
| .layout-multiple-columns .compose-form { | |
| padding-bottom: calc(3.5rem + calc(var(--gap-default) * 2)); | |
| } | |
| /* Column items order */ | |
| .layout-multiple-columns .navigation-panel .column-link, | |
| .layout-multiple-columns .navigation-panel .list-panel, | |
| .layout-multiple-columns .navigation-panel hr, | |
| .layout-multiple-columns .navigation-panel .navigation-panel__logo { | |
| order: 99; | |
| } | |
| /* Make the column link 1/4 of width of the screen */ | |
| .layout-multiple-columns .navigation-panel .navigation-panel__legal, | |
| .layout-multiple-columns .navigation-panel .column-link { | |
| border: 0; | |
| flex: 0 0 calc(100vw / 4); | |
| margin-inline: 0; | |
| padding: 0; | |
| padding-inline: 0; | |
| } | |
| .layout-multiple-columns .navigation-panel .navigation-panel__legal { | |
| order: 999; | |
| text-align: center; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(1) { | |
| order: 2; | |
| } | |
| /* Home */ | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(2) { | |
| order: 1; | |
| } | |
| /* Notifications */ | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(3) { | |
| order: 4; | |
| } | |
| /* Explore */ | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(4) { | |
| order: 2; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(5) { | |
| order: 5; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(6) { | |
| order: 6; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(7) { | |
| order: 7; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(8) { | |
| order: 8; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(9) { | |
| order: 9; | |
| } | |
| /* Lists */ | |
| .layout-multiple-columns .column-link[href="/lists"] { | |
| order: 4; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(11) { | |
| order: 11; | |
| } | |
| .layout-multiple-columns .navigation-panel .column-link:nth-child(12) { | |
| order: 12; | |
| } | |
| } | |
| /* Add bottom padding to the navigation panel for the | |
| Safari PWA on iPhones with the portrait mode home bar */ | |
| @media screen and (device-width: 375px) and (device-height: 812px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */ screen and (device-width: 390px) and (device-height: 844px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro */ screen and (device-width: 393px) and (device-height: 852px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone XR and iPhone 11 */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone Xs Max and iPhone 11 Pro Max */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */ screen and (device-width: 428px) and (device-height: 926px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro Max */ screen and (device-width: 430px) and (device-height: 932px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone) { | |
| .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { | |
| padding-bottom: 26px; | |
| } | |
| /* Fix top header overlapping in /publish on iPhone */ | |
| .layout-multiple-columns .columns-area--mobile:has(.compose-form) { | |
| top: 34px; | |
| } | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button { | |
| position: relative; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar-dropdown .icon-button::after, | |
| .layout-multiple-columns .detailed-status__button .icon-button::after { | |
| transform: translateX(-6px); | |
| } | |
| /* Add border radius to media */ | |
| .layout-multiple-columns .media-gallery, | |
| .layout-multiple-columns .audio-player, | |
| .layout-multiple-columns .video-player, | |
| .layout-multiple-columns .media-gallery__gifv, | |
| .layout-multiple-columns .media-gallery__preview { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| } | |
| /* Exception for your own profile media gallery */ | |
| .layout-multiple-columns .account-gallery__container .media-gallery__gifv { | |
| border-radius: 0; | |
| } | |
| /* Hide autoplaying gifs in notifications (they get annoying if you have favs/boosts on) */ | |
| .layout-multiple-columns .notification.notification-reblog .media-gallery:has(.media-gallery__gifv.autoplay), | |
| .layout-multiple-columns .notification.notification-favourite .media-gallery:has(.media-gallery__gifv.autoplay) { | |
| display: none; | |
| } | |
| /* More distinct focus color for accessibility, instead of just white */ | |
| .layout-multiple-columns input:focus-visible { | |
| outline-color: var(--color-accent); | |
| outline-style: solid; | |
| } | |
| /* Embeds outside Mastodon */ | |
| body.embed .entry .detailed-status { | |
| backface-visibility: hidden; | |
| background-color: #00000059; | |
| /* It's inlined so we have to use !important */ | |
| /* stylelint-disable-next-line */ | |
| border-radius: 10px !important; | |
| overflow: hidden; | |
| } | |
| /* Destructive colors (For you -suggestions, users when focused to the follow button */ | |
| .layout-multiple-columns .button.logo-button.button--destructive:active, | |
| .layout-multiple-columns .button.logo-button.button--destructive:focus { | |
| background-color: var(--color-destructive); | |
| border-color: var(--color-destructive); | |
| } | |
| /* Fix character counter color when it's over the limit */ | |
| .layout-multiple-columns .character-counter.character-counter--over { | |
| color: var(--color-destructive); | |
| } | |
| /* Follow hashtag icon */ | |
| .layout-multiple-columns .column-header__button .column-header__icon.fa-user-plus::before { | |
| content: var(--icon-follow-hashtag); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* Unfollow hashtag icon */ | |
| .layout-multiple-columns .column-header__button .column-header__icon.fa-user-times::before { | |
| content: var(--icon-unfollow-hashtag); | |
| position: relative; | |
| top: 2px; | |
| } | |
| /* Show more in server banner */ | |
| .layout-multiple-columns .server-banner__meta__column { | |
| max-width: 60%; | |
| width: unset; | |
| } | |
| /* Increase gap for server-banner__meta */ | |
| .layout-multiple-columns .server-banner__meta { | |
| gap: 25px; | |
| } | |
| /* Native Mastodon 4.1.2-nightly threaded lines */ | |
| .layout-multiple-columns .status__line--first { | |
| height: calc(100% + var(--size-avatar)); | |
| } | |
| .layout-multiple-columns .status__line--full { | |
| height: calc(100% + 32px); | |
| } | |
| /* Default lines when replying in real time */ | |
| .layout-multiple-columns div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { | |
| height: 0; | |
| } | |
| /* Hide line before first in thread */ | |
| .layout-multiple-columns div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), | |
| .layout-multiple-columns div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { | |
| height: 0; | |
| } | |
| .layout-multiple-columns div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, | |
| .layout-multiple-columns .status__line--full.status__line--first { | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .layout-multiple-columns .detailed-status { | |
| background-color: transparent; | |
| border-top: 0; | |
| } | |
| /* Threaded line, actually */ | |
| .layout-multiple-columns .status__line { | |
| border-inline-start: 2px solid var(--color-thread-line); | |
| -webkit-border-start: 2px solid var(--color-thread-line); | |
| } | |
| .layout-multiple-columns .status__line--full::before { | |
| background-color: var(--color-thread-line); | |
| } | |
| /* Hide the "stub" from the first status line */ | |
| div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, | |
| .layout-multiple-columns .status-reply.status--in-thread.status--first-in-thread > .status__line, | |
| .layout-multiple-columns .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { | |
| top: 32px; | |
| } | |
| .layout-multiple-columns .status--in-thread .status__action-bar, | |
| .layout-multiple-columns .status--in-thread .status__content { | |
| padding-left: 4px; | |
| } | |
| /* Scrollbars */ | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar, | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar, | |
| .layout-multiple-columns textarea::-webkit-scrollbar, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar, | |
| .layout-multiple-columns::-webkit-scrollbar { | |
| height: 6px; | |
| width: 6px; | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-thumb, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb, | |
| .layout-multiple-columns::-webkit-scrollbar-thumb { | |
| background-color: var(--color-border); | |
| border: 0px solid var(--color-border); | |
| border-radius: 50px; | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:hover, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-thumb:hover, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb:hover, | |
| .layout-multiple-columns::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-light-purple); | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:active, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-thumb:active, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb:active, | |
| .layout-multiple-columns::-webkit-scrollbar-thumb:active { | |
| background-color: var(--color-black-coral); | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-track, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-track, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-track, | |
| .layout-multiple-columns::-webkit-scrollbar-track { | |
| background-color: var(--color-bg); | |
| border: 0px solid var(--color-border); | |
| border-radius: 0; | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-track:hover, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-track:hover, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-track:hover, | |
| .layout-multiple-columns::-webkit-scrollbar-track:hover { | |
| background-color: var(--color-bg); | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-track:active, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-track:active, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:active, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-track:active, | |
| .layout-multiple-columns::-webkit-scrollbar-track:active { | |
| background-color: var(--color-bg); | |
| } | |
| .layout-multiple-columns .scrollable::-webkit-scrollbar-corner, | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-corner, | |
| .layout-multiple-columns textarea::-webkit-scrollbar-corner, | |
| .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-corner, | |
| .layout-multiple-columns .reply-indicator::-webkit-scrollbar-corner, | |
| .layout-multiple-columns::-webkit-scrollbar-corner { | |
| background-color: transparent; | |
| } | |
| /* Drawer scollbars */ | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-thumb { | |
| background-color: var(--color-dim); | |
| border: 0; | |
| border-radius: 50px; | |
| } | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-light-purple); | |
| } | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-thumb:active { | |
| background-color: var(--color-light-text); | |
| } | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-track { | |
| background-color: var(--color-dark); | |
| border: 0; | |
| border-radius: 0; | |
| } | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-track:hover, | |
| .layout-multiple-columns .drawer__inner::-webkit-scrollbar-track:active { | |
| background-color: var(--color-dark); | |
| } | |
| /* | |
| * Boost animation micro-interaction start | |
| * --------------------------------------- | |
| */ | |
| @keyframes boost-animate { | |
| 100% { | |
| background-position: -7770px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| /* While active, hide the original icon */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .fa-retweet { | |
| /* stylelint-disable-next-line */ | |
| background-image: none !important; | |
| } | |
| .layout-multiple-columns.no-reduce-motion .icon-button.active { | |
| position: relative; | |
| } | |
| .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .fa-retweet::before { | |
| /* 37 frames */ | |
| animation: boost-animate 1.65s steps(37) forwards; | |
| background-position: left; | |
| background-repeat: no-repeat; | |
| /* stylelint-disable-next-line */ | |
| content: '' !important; | |
| /* stylelint-disable-next-line */ | |
| display: block !important; | |
| height: 101px; | |
| left: -76px; | |
| min-height: 23px; | |
| min-width: 42.22px; | |
| pointer-events: none; | |
| position: absolute; | |
| top: -40.4px; | |
| transform: scale(0.85); | |
| width: 200px; | |
| } | |
| /* Detailed status offset for boost animation */ | |
| .layout-multiple-columns.no-reduce-motion .detailed-status__button .icon-button.active:focus .fa-retweet::before { | |
| left: -89px; | |
| top: -39px; | |
| } | |
| /* Offset in numbered item */ | |
| .layout-multiple-columns.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .fa-retweet::before { | |
| left: -88px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .fa-retweet::before { | |
| /* stylelint-disable-next-line */ | |
| content: var(--icon-boost-active) !important; | |
| } | |
| } | |
| /* Detailed status offset for boost animation on mobile */ | |
| @media (max-width: 890px) { | |
| /* stylelint-disable-next-line */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .fa-retweet:before { | |
| left: -90px; | |
| } | |
| } | |
| /* | |
| * Boost animation micro-interaction ends | |
| * -------------------------------------- | |
| */ | |
| /* | |
| * Heart animation micro-interaction start | |
| * --------------------------------------- | |
| */ | |
| @keyframes heart-animate { | |
| 100% { | |
| background-position: -2800px; | |
| } | |
| } | |
| /* Left sidebar column links */ | |
| .layout-multiple-columns .column-link .fa-star::before { | |
| content: var(--icon-heart-column-link); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-star::before { | |
| content: var(--icon-heart-column-link-active); | |
| } | |
| .layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before { | |
| content: var(--icon-heart-notification); | |
| } | |
| .layout-multiple-columns .notification__filter-bar .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button .fa-star::before, | |
| .layout-multiple-columns .status__action-bar .icon-button .fa-star::before { | |
| content: var(--icon-heart); | |
| position: relative; | |
| top: 1px; | |
| } | |
| .layout-multiple-columns .notification__filter-bar .active .fa-star::before { | |
| content: var(--icon-heart-active); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .active:not(.activated) .fa-star::before, | |
| .layout-multiple-columns .status__action-bar .active:not(.activated) .fa-star::before { | |
| content: var(--icon-heart-active-red); | |
| } | |
| .layout-multiple-columns .notification__filter-bar .fa-star::before { | |
| position: relative; | |
| top: 2px; | |
| } | |
| .icon-button.star-icon.active, | |
| .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--color-red); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-star::before { | |
| content: var(--icon-heart-hover); | |
| } | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon { | |
| min-height: 23px; | |
| min-width: 42.22px; | |
| position: relative; | |
| } | |
| /* Disable default Mastodon animation: spring-rotate-in 1s linear; */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon .fa-star { | |
| /* stylelint-disable-next-line */ | |
| animation: none !important; | |
| } | |
| /* While active, hide the original icon */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate:hover .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: '' !important; | |
| } | |
| /* If a hover device */ | |
| @media (hover: hover) { | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star, | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star ~ span, | |
| .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star::before { | |
| color: var(--color-yellow); | |
| } | |
| .layout-multiple-columns button.icon-button.active:hover i.fa-star ~ span { | |
| color: var(--color-dim); | |
| } | |
| } | |
| /* stylelint-disable no-duplicate-selectors */ | |
| /* Left sidebar column links */ | |
| .layout-multiple-columns .column-link .fa-star::before { | |
| content: var(--icon-star-column-link); | |
| } | |
| .layout-multiple-columns .column-link.active .fa-star::before { | |
| content: var(--icon-star-column-link-active); | |
| } | |
| .layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before { | |
| content: var(--icon-star-notification); | |
| } | |
| /* Replace notification tab bar icon with star */ | |
| .layout-multiple-columns .notification__filter-bar .active .fa-star::before { | |
| content: var(--icon-star-active); | |
| } | |
| /* Numbers on hover */ | |
| .layout-multiple-columns button.icon-button:hover i.fa-star ~ span { | |
| color: var(--color-dim); | |
| } | |
| /* Numbers when the star is active/activated */ | |
| .layout-multiple-columns button.icon-button.activate i.fa-star ~ span, | |
| .layout-multiple-columns button.icon-button.active i.fa-star ~ span { | |
| color: var(--color-yellow); | |
| } | |
| /* The actual star icon */ | |
| .layout-multiple-columns .notification__filter-bar .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button .fa-star::before, | |
| .layout-multiple-columns .status__action-bar .icon-button .fa-star::before { | |
| content: "\f006"; | |
| font-size: 20px; | |
| left: 0; | |
| position: relative; | |
| top: 0; | |
| } | |
| /* Active star icon */ | |
| .layout-multiple-columns .notification__filter-bar button.icon-button.active .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.active .fa-star::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.active .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: "\f005" !important; | |
| display: block; | |
| } | |
| /* Active star when activated */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| background-color: unset !important; | |
| /* stylelint-disable-next-line */ | |
| background-image: none !important; | |
| /* stylelint-disable-next-line */ | |
| color: var(--color-yellow); | |
| /* stylelint-disable-next-line */ | |
| content: "\f005" !important; | |
| height: unset; | |
| /* stylelint-disable-next-line */ | |
| left: unset !important; | |
| position: relative; | |
| top: 0; | |
| transform: none; | |
| width: unset; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { | |
| animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::after { | |
| animation: sparkles-width .65s 1, sparkles-size .65s 1; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.activate.star-icon::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::before { | |
| animation: ring-border-width .35s 1, ring-size .35s 1; | |
| } | |
| } | |
| /* Star sparkles, when activated */ | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| background-color: unset !important; | |
| content: ''; | |
| /* stylelint-disable-next-line */ | |
| height: 50px !important; | |
| /* stylelint-disable-next-line */ | |
| left: 50% !important; | |
| margin-left: -24px; | |
| margin-top: -20px; | |
| opacity: unset; | |
| position: absolute; | |
| top: calc(50% + 1px); | |
| transform: none; | |
| /* stylelint-disable-next-line */ | |
| width: 50px !important; | |
| z-index: unset; | |
| } | |
| /* Ensure everything shows up on mobile */ | |
| .layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate::after, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| display: block !important; | |
| } | |
| /* Star circle/ring */ | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.activate.star-icon::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::before { | |
| border: 0px solid var(--color-yellow); | |
| border-radius: 10em; | |
| content: ''; | |
| height: 0em; | |
| left: 50%; | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| transform-origin: 50px 50px; | |
| width: 0em; | |
| } | |
| .layout-multiple-columns .icon-button.star-icon.active, | |
| .layout-multiple-columns .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--color-yellow); | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .fa-star::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.deactivate.star-icon:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-butto.deactivate .fa-star::before, | |
| .layout-multiple-columns .detailed-status button.icon-button.deactivate .fa-star::before, | |
| .layout-multiple-columns .status button.icon-button.deactivate .fa-star::before { | |
| color: var(--color-dim); | |
| /* stylelint-disable-next-line */ | |
| content: '\f006' !important; | |
| } | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-star::before { | |
| color: var(--color-yellow); | |
| /* stylelint-disable-next-line */ | |
| content: "\f006" !important; | |
| position: relative; | |
| top: 0; | |
| } | |
| /* Prevent the star from being highlighted when the button is focused, especially while logged out */ | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:focus .fa-star::before, | |
| .layout-multiple-columns .detailed-status button.icon-button:focus .fa-star::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-star::before { | |
| color: var(--color-dim); | |
| } | |
| /* Fix focus for mouse users on v4.1.4-nighly-20230721 */ | |
| .layout-multiple-columns button:focus, | |
| .layout-multiple-columns .icon-button:focus { | |
| outline: 0; | |
| } | |
| .layout-multiple-columns button:focus-visible, | |
| .layout-multiple-columns .icon-button:focus-visible { | |
| outline: 2px solid var(--color-accent); | |
| } | |
| /* Alignment fixes */ | |
| /* Fix the x position in recent searches, | |
| @link https://nileane.fr/@nileane/111110441774473219 */ | |
| .layout-multiple-columns .search__popout__menu__item { | |
| align-items: initial; | |
| } | |
| /* Sparkle offset on numbered item */ | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.icon-button--with-counter.star-icon.activate::after, | |
| .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 14px) !important; | |
| /* stylelint-disable-next-line */ | |
| top: calc(50% + -1px) !important; | |
| } | |
| /* Circle offset on numbered item */ | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 14px) !important; | |
| } | |
| /* Mobile devices */ | |
| @media (hover: none) { | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before, | |
| .layout-multiple-columns .status button.icon-button:hover .fa-star::before { | |
| /* stylelint-disable-next-line */ | |
| content: '\f005' !important; | |
| } | |
| } | |
| /* Fix the sparkle and circle position on small screens on the Explore */ | |
| @media (max-width: 888px) { | |
| /* Sparkle offset on numbered item */ | |
| .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 11px) !important; | |
| } | |
| /* Circle offset on numbered item */ | |
| .layout-multiple-columns .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before, | |
| .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before { | |
| /* stylelint-disable-next-line */ | |
| left: calc(50% - 11px) !important; | |
| } | |
| } | |
| @keyframes popping { | |
| 0% { | |
| transform: scale(0, 0); | |
| } | |
| 40% { | |
| transform: scale(0, 0); | |
| } | |
| 75% { | |
| transform: scale(1.3, 1.3); | |
| } | |
| 100% { | |
| transform: scale(1, 1); | |
| } | |
| } | |
| @keyframes ring-border-width { | |
| 0% { | |
| border-width: 0; | |
| } | |
| 50% { | |
| border-width: 0.22em; | |
| } | |
| 100% { | |
| border-width: 0; | |
| } | |
| } | |
| @keyframes ring-size { | |
| 0% { | |
| height: 0; | |
| width: 0; | |
| } | |
| 100% { | |
| height: 2em; | |
| width: 2em; | |
| } | |
| } | |
| .account__header__fields { | |
| border: none !important; | |
| } | |
| .search__icon { | |
| /* display: none; */ | |
| translate: -22px -45px; | |
| } | |
| .column-link.column-link--logo::after { | |
| content: "astodon.social"; | |
| display: block; | |
| font-weight: 700; | |
| font-size: 20pt; | |
| translate: 42px -6px; | |
| text-shadow: 2px 2px 3px blueviolet; | |
| } | |
| .layout-single-column .reply-indicator { | |
| background-color: transparent; | |
| } | |
| .compose-form__highlightable { | |
| background: black | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment