mastodon-bird-ui/layout-single-column.css

4653 lines
269 KiB
CSS
Raw Normal View History

2023-03-10 19:19:42 +02:00
/* Mastodon Bird UI by @rolle@mementomori.social
2023-09-14 02:03:38 +03:00
1.7.5rc2-nightly */
2023-03-09 14:40:26 +02:00
2023-03-08 15:28:39 +02:00
/* CSS variables */
:root {
/* Brand colors */
--color-brand-twitter: #1d9bf0;
--color-brand-twitter-bg: #15202b;
--color-brand-twitter-dim: #8b98a5;
--color-brand-twitter-mud: #273340;
2023-03-08 19:49:03 +02:00
--color-brand-twitter-dark: #232543;
2023-03-08 22:06:46 +02:00
--color-brand-twitter-threaded-line: #425364;
--color-brand-mastodon: #6364ff;
--color-brand-mastodon-links: #858afa;
--color-brand-mastodon-bg: #1e2028;
--color-brand-mastodon-dim: #717c9b;
--color-brand-mastodon-mud: rgb(39 44 64 / .5);
2023-03-08 19:49:03 +02:00
--color-brand-mastodon-dark: #232543;
2023-03-08 22:06:46 +02:00
--color-brand-mastodon-threaded-line: #434264;
2023-03-09 12:16:25 +02:00
--color-brand-mastodon-text-light: #8493a7;
2023-03-08 15:28:39 +02:00
/* Colors */
2023-03-10 13:25:31 +02:00
/* 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-75: #1e2028bf;
2023-03-09 14:39:37 +02:00
--color-fg: #fff;
--color-border: #38384d;
--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;
2023-03-08 18:34:27 +02:00
--color-green: #00ba7c;
--color-red: #f91880;
2023-03-12 17:55:37 +02:00
--color-red-75: #f91880bf;
--color-yellow: #ffac33;
--color-light-shade: #ffffff05;
--color-focusable-toot: #ffffff09;
2023-03-08 18:34:27 +02:00
--color-light-text: #f7f9f9;
--color-mud: var(--color-brand-mastodon-mud);
--color-arsenic: #393f4f;
--color-black-coral: #5a5371;
--color-profile-button-hover: #f1eff41a;
--color-column-link-hover: #f7f7f91a;
2023-03-08 18:34:27 +02:00
--color-modal-overlay: #5b708366;
2023-03-08 19:49:03 +02:00
--color-dark: var(--color-brand-mastodon-dark);
--color-thread-line: var(--color-brand-mastodon-threaded-line);
--color-topaz: #dadaf3;
--color-light-purple: #9baec8;
2023-04-22 13:41:28 +03:00
--color-lighter-purple: #a5b8d3;
2023-03-18 14:15:07 +02:00
--color-dark-electric-blue: #576078;
--color-button-text: #f7f9f9;
--color-ghost-button-text: var(--color-button-text);
2023-03-26 13:34:18 +03:00
--color-verified: #79bd9a;
2023-03-28 09:49:46 +03:00
--color-destructive: #df405a;
2023-07-05 17:51:51 +03:00
--color-light-fuchsia-pink: #ff8cfd;
--color-hashtag: var(--color-accent);
--color-mention: var(--color-accent);
2023-07-05 18:14:12 +03:00
--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;
2023-03-08 15:28:39 +02:00
/* Font related */
--font-size: 15px;
--font-size-smaller: 13px;
--font-size-12: 12px;
2023-03-18 14:15:07 +02:00
--font-size-mid: 14px;
2023-03-08 15:28:39 +02:00
--font-size-bigger: 17px;
--font-size-title: 19px;
2023-03-08 15:28:39 +02:00
--font-size-heading: 20px;
--font-weight-regular: 400;
--font-weight-semibold: 500;
2023-03-08 15:28:39 +02:00
--font-weight-bold: 700;
--line-height: 22px;
--line-height-mid: 20px;
2023-03-08 15:28:39 +02:00
/* Grids and gaps */
--gap-default: 12px;
/* Element sizes */
--size-avatar: 48px;
--size-avatar-small: 32px;
--size-icon-notification: 30px;
--width-main-panel: 600px;
--width-side-panel: 260px;
2023-07-05 01:36:21 +03:00
--border-radius: 16px;
--border-radius-badges: 4px;
2023-07-05 02:31:06 +03:00
--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%);
2023-07-05 18:21:06 +03:00
/* 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 */
2023-03-30 20:15:30 +03:00
--icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%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, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
--icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%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-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%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");
2023-04-28 19:31:58 +03:00
--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-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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");
2023-04-05 19:28:39 +03:00
--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-globe: 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-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');
2023-09-14 01:16:28 +03:00
--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.81
2023-09-14 01:47:08 +03:00
--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 */
2023-04-04 19:15:46 +03:00
body.theme-contrast.layout-single-column {
--color-dim: #b8b3c0;
2023-04-05 19:28:39 +03:00
/* 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="%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-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%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-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%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");
2023-04-28 19:31:58 +03:00
--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");
2023-04-05 19:28:39 +03:00
--icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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');
2023-09-14 01:16:28 +03:00
--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.81
2023-09-14 01:47:08 +03:00
--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');
2023-04-04 19:15:46 +03:00
}
/* Light theme */
body.theme-mastodon-light.layout-single-column {
--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;
2023-03-25 18:28:40 +02:00
--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;
2023-03-25 18:28:40 +02:00
--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);
/* 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, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
--icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
--icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%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='%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-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%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");
2023-04-28 19:31:58 +03:00
--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-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
--icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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='%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");
2023-04-05 19:28:39 +03:00
--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="%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="%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-globe: 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');
2023-09-14 01:16:28 +03:00
--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="%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.81
2023-09-14 01:47:08 +03:00
--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');
2023-03-08 15:28:39 +02:00
}
2023-03-28 21:54:33 +03:00
/* Vars on iPad, landscape */
@media (min-width: 1175px) and (max-width: 1260px) {
:root {
--width-main-panel: 500px;
--width-side-panel: 265px;
}
}
2023-03-08 18:18:32 +02:00
/* Vars in mobile */
@media (max-width: 500px) {
:root {
2023-07-05 23:40:36 +03:00
--font-size: 16px;
--line-height: 1.4;
2023-03-08 18:18:32 +02:00
--font-size-heading: 17px;
2023-07-05 02:31:06 +03:00
--badges-distance-from-edge: 10px;
2023-03-08 18:18:32 +02:00
}
2023-03-13 19:58:21 +02:00
/* Hide scrollbar on mobile, since we can't pick the handle anyway */
.layout-single-column::-webkit-scrollbar {
2023-03-13 19:58:21 +02:00
display: none;
}
2023-04-06 20:56:55 +03:00
}
2023-03-23 21:54:28 +02:00
2023-04-06 20:56:55 +03:00
/* Search popout offset */
.layout-single-column .search__popout,
.layout-single-column .search-popout {
left: calc(30px / 2);
2023-03-23 21:54:28 +02:00
2023-04-06 20:56:55 +03:00
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
max-width: calc(100% - 30px) !important;
2023-03-23 21:54:28 +02:00
2023-04-06 20:56:55 +03:00
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width: calc(100% - 30px) !important;
2023-03-08 18:18:32 +02:00
}
body.layout-single-column {
2023-03-08 15:28:39 +02:00
background-color: var(--color-bg);
2023-03-09 14:39:37 +02:00
color: var(--color-fg);
2023-03-08 15:28:39 +02:00
}
.layout-single-column .ui {
2023-03-13 19:58:21 +02:00
display: flex;
width: 100%;
2023-03-12 00:14:17 +02:00
}
/* 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);
}
2023-07-05 17:51:51 +03:00
/* 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) {
2023-07-05 18:14:12 +03:00
color: var(--color-link);
}
2023-03-08 15:28:39 +02:00
/* Logo */
.layout-single-column .ui__header__logo,
.layout-single-column .column-link.column-link--logo {
2023-07-05 18:21:06 +03:00
background-image: var(--logo);
2023-03-08 15:28:39 +02:00
background-position: center;
background-repeat: no-repeat;
background-size: 32px auto;
height: 50px;
padding: 0;
width: 50px;
}
2023-07-08 20:18:12 +03:00
.layout-single-column .ui__header__logo img,
.layout-single-column .ui__header__logo svg {
2023-03-08 18:18:32 +02:00
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 {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size);
line-height: var(--line-height);
2023-03-08 15:28:39 +02:00
}
2023-07-05 18:01:29 +03:00
/* 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,
2023-07-06 11:30:50 +03:00
.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 {
2023-07-05 18:01:29 +03:00
font-size: var(--font-size-mid);
line-height: var(--line-height-mid);
}
2023-07-05 23:40:36 +03:00
/* 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);
2023-07-05 18:01:29 +03:00
}
/* Line heights */
.layout-single-column .reply-indicator__content,
.layout-single-column .status__content {
line-height: var(--line-height);
}
2023-03-08 15:28:39 +02:00
/* Modal overlay */
.layout-single-column .modal-root__overlay {
2023-03-08 17:16:39 +02:00
/* 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;
}
2023-03-30 20:15:30 +03:00
.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;
}
2023-03-15 15:46:41 +02:00
/* Hide footer buttons in modals */
.layout-single-column .media-modal__overlay .picture-in-picture__footer {
2023-03-15 15:46:41 +02:00
display: none;
}
2023-03-23 19:28:59 +02:00
/* Report modal */
.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text {
2023-03-23 19:28:59 +02:00
display: grid;
gap: 6px;
}
.layout-single-column .media-modal__navigation .fa-times::before {
2023-03-08 17:16:39 +02:00
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");
2023-03-08 15:28:39 +02:00
}
2023-03-09 21:21:43 +02:00
/* List adder input */
.layout-single-column .list-editor input.setting-text,
.layout-single-column .list-adder input.setting-text {
2023-03-09 21:21:43 +02:00
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 {
2023-03-10 15:08:38 +02:00
min-height: 38px;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
width: 100% !important;
2023-03-10 15:08:38 +02:00
}
.layout-single-column .list-editor__search {
2023-03-10 15:08:38 +02:00
padding: 15px;
}
.layout-single-column .embed-modal .embed-modal__container .embed-modal__html {
2023-03-12 19:38:38 +02:00
color: var(--color-light-text);
}
.layout-single-column .embed-modal .embed-modal__container .embed-modal__html,
.layout-single-column .list-editor__search .search__input {
2023-03-10 15:08:38 +02:00
background-color: transparent;
border-color: var(--color-black-coral);
height: 38px;
}
.layout-single-column .list-editor .drawer__inner.backdrop {
2023-03-10 15:08:38 +02:00
box-shadow: 2px 4px 15px rgba(0, 0, 0, .2);
}
.layout-single-column .list-editor__search .search__icon .fa {
2023-03-10 15:08:38 +02:00
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;
}
2023-08-01 18:15:21 +03:00
/* URL preview cards */
2023-07-06 01:34:30 +03:00
.layout-single-column .status-card,
2023-08-01 18:15:21 +03:00
.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 {
2023-03-09 21:35:44 +02:00
background-color: var(--color-bg);
2023-07-06 01:34:30 +03:00
border: 1px solid var(--color-border);
2023-07-05 01:36:21 +03:00
border-radius: var(--border-radius);
2023-07-06 20:08:19 +03:00
transition: all 200ms;
}
2023-08-01 18:15:21 +03:00
.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;
}
2023-07-06 20:21:20 +03:00
/* Hide empty YouTube description */
.layout-single-column .status-card__description:empty {
display: none;
}
2023-07-06 20:08:19 +03:00
.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;
}
2023-08-01 18:15:21 +03:00
.layout-single-column a.status-card .status-card__content {
padding: 16px;
}
2023-08-01 18:15:21 +03:00
.layout-single-column a.status-card .status-card__title {
2023-03-09 21:35:44 +02:00
color: var(--color-fg);
font-size: var(--font-size-title);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
margin: 0;
2023-08-01 18:15:21 +03:00
}
.layout-single-column a.status-card.expanded .status-card__title {
white-space: inherit;
}
2023-08-01 18:15:21 +03:00
.layout-single-column .status-card.expanded .status-card__host {
2023-03-09 21:21:43 +02:00
color: var(--color-dim);
font-size: var(--font-size);
2023-08-01 18:15:21 +03:00
margin-bottom: 0;
margin-top: 0;
}
.layout-single-column .status-card.expanded .status-card__description {
margin-top: 0;
}
2023-03-24 09:41:48 +02:00
/* Announcements */
.layout-single-column .announcements__pagination .fa,
.layout-single-column .announcements__pagination {
2023-03-24 09:41:48 +02:00
color: var(--color-dim);
}
2023-03-18 15:50:31 +02:00
/* Dark panels like modals and boxes */
.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 {
2023-03-08 15:28:39 +02:00
background-color: var(--color-dark);
border-color: var(--color-dark);
color: var(--color-light-text);
}
2023-04-06 20:56:55 +03:00
/* 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,
2023-04-06 20:56:55 +03:00
.layout-single-column .search__popout,
.layout-single-column .dropdown-menu {
box-shadow: 2px 4px 16px rgb(0 0 0 / .01);
}
/* Autosuggest box shadow reset */
2023-04-06 20:56:55 +03:00
.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 .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,
2023-04-05 21:35:50 +03:00
.layout-single-column .conversation,
.layout-single-column .setting-text__wrapper {
border-color: var(--color-border);
2023-03-08 15:28:39 +02:00
}
/* Change panel order */
.layout-single-column .columns-area__panels__pane {
2023-03-08 15:28:39 +02:00
order: 3;
}
.layout-single-column .columns-area__panels__main {
2023-03-08 15:28:39 +02:00
order: 2;
}
.layout-single-column .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational {
2023-03-08 15:28:39 +02:00
order: 1;
}
2023-04-01 22:43:11 +03:00
.layout-single-column .columns-area__panels__pane,
2023-03-28 21:54:33 +03:00
.layout-single-column .columns-area__panels__pane__inner,
.layout-single-column .compose-panel {
min-width: var(--width-side-panel);
2023-04-01 22:43:11 +03:00
width: var(--width-side-panel);
}
2023-04-01 22:43:11 +03:00
.layout-single-column .columns-area__panels__pane--compositional {
2023-04-01 22:43:11 +03:00
flex-grow: 1;
height: 100vh;
max-width: 350px;
overflow: visible;
2023-04-01 22:43:11 +03:00
position: sticky;
top: 0;
}
2023-04-01 22:43:11 +03:00
.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
position: static;
}
2023-04-01 22:43:11 +03:00
.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner,
.compose-panel {
2023-04-01 22:49:22 +03:00
/* stylelint-disable-next-line */
width: 100% !important;
}
2023-04-01 22:43:11 +03:00
.layout-single-column .search {
margin-inline: 10px;
2023-03-28 21:54:33 +03:00
}
2023-03-08 18:18:32 +02:00
/* stylelint-disable-next-line */
@media (min-width: 1175px) {
.layout-single-column .columns-area__panels__main {
2023-03-08 18:18:32 +02:00
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);
}
2023-03-27 19:37:46 +03:00
2023-03-26 15:33:15 -04:00
.layout-single-column .navigation-panel {
margin-right: -20px;
2023-03-27 19:37:46 +03:00
/* stylelint-disable-next-line */
padding-left: 0 !important;
2023-03-26 15:33:15 -04:00
padding-right: 20px;
}
2023-03-08 18:18:32 +02:00
}
.layout-single-column .emoji-mart-anchor-bar,
.layout-single-column .column-link.column-link--logo svg {
2023-03-08 15:28:39 +02:00
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,
2023-03-23 20:00:34 +02:00
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 {
2023-03-08 15:28:39 +02:00
color: var(--color-accent);
}
2023-05-13 21:09:11 +03:00
/* Toggles */
.layout-single-column .react-toggle .react-toggle-track {
background-color: var(--color-bg);
}
2023-03-08 15:28:39 +02:00
/* 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);
2023-03-08 15:28:39 +02:00
}
.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 {
2023-03-18 14:15:07 +02:00
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 {
2023-03-18 14:15:07 +02:00
background-color: transparent;
color: var(--color-dark-electric-blue);
}
2023-03-08 22:13:31 +02:00
.column-link--transparent .icon-with-badge__badge,
.layout-single-column .icon-with-badge__badge {
background-color: var(--color-accent-dark);
2023-03-08 22:13:31 +02:00
border-color: var(--color-bg);
}
2023-03-08 15:28:39 +02:00
/* Accented strokes */
.layout-single-column .trends__item__sparkline path:last-child {
2023-03-08 15:28:39 +02:00
/* 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 {
2023-03-08 15:28:39 +02:00
background-color: var(--color-mud);
color: var(--color-light-text);
max-height: 20vh;
2023-03-08 15:28:39 +02:00
}
/* 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);
}
2023-03-08 15:28:39 +02:00
/* Accented border colors */
.layout-single-column .notification.unread::before,
.layout-single-column .status__wrapper.unread::before {
2023-03-08 15:28:39 +02:00
border-color: var(--color-accent);
2023-03-09 12:46:06 +02:00
display: none;
2023-03-08 15:28:39 +02:00
}
2023-07-19 15:28:51 +03:00
/* 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;
}
2023-07-21 20:34:22 +03:00
/* Fix hover/focus on article that has filtered banner */
.layout-single-column article:has(.status__wrapper--filtered):hover {
background-color: transparent;
}
2023-07-19 15:28:51 +03:00
.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);
2023-07-19 15:28:51 +03:00
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;
}
2023-03-09 12:35:04 +02:00
/* Unread message */
2023-04-05 21:35:50 +03:00
.layout-single-column .conversation--unread,
.layout-single-column .notification.unread:hover,
.layout-single-column .notification.unread,
.layout-single-column .status__wrapper.unread {
2023-03-09 12:35:04 +02:00
background-color: var(--color-dark);
}
.layout-single-column .notification:hover .notification__message {
background-color: transparent;
}
2023-03-11 17:04:21 +02:00
/* Things like notification status update text that should be dim */
2023-07-05 23:40:36 +03:00
/* 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,
2023-04-05 19:28:39 +03:00
.layout-single-column .poll__link,
.layout-single-column .muted .poll,
.layout-single-column .status .status__relative-time,
.layout-single-column .status .status__visibility-icon,
2023-03-30 20:15:30 +03:00
.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,
2023-04-06 20:56:55 +03:00
.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,
2023-04-04 19:15:46 +03:00
.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 {
2023-03-08 15:28:39 +02:00
color: var(--color-dim);
}
2023-03-09 12:16:25 +02:00
/* Dim backgrounds */
.layout-single-column .poll__chart {
2023-03-09 12:16:25 +02:00
background-color: var(--color-dim);
}
2023-03-09 13:24:58 +02:00
/* Lighter border colors */
.layout-single-column .report-dialog-modal .dialog-option .poll__input,
.layout-single-column .poll__input {
2023-03-09 13:24:58 +02:00
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);
}
2023-03-25 18:28:40 +02:00
/* CW button */
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
.layout-single-column .status__content__spoiler-link {
2023-04-22 13:41:28 +03:00
background-color: var(--color-dark);
2023-04-22 13:34:54 +03:00
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;
2023-04-22 13:28:44 +03:00
vertical-align: baseline;
2023-03-25 18:28:40 +02:00
}
.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 {
2023-04-22 13:41:28 +03:00
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);
2023-03-25 18:28:40 +02:00
}
/* 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);
}
2023-03-08 15:28:39 +02:00
/* 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 {
2023-03-08 15:28:39 +02:00
color: var(--color-light-text);
}
.layout-single-column .muted .status__info *,
.layout-single-column .muted .status__info .display-name * {
2023-03-08 15:28:39 +02:00
color: var(--color-light-text);
}
/* Account names */
.layout-single-column .status__info .display-name .display-name__account,
.layout-single-column .display-name__account {
2023-03-08 15:28:39 +02:00
color: var(--color-dim);
}
/* Main panel column */
.layout-single-column .columns-area__panels__main > div {
2023-03-08 15:28:39 +02:00
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
}
/* Status header */
.layout-single-column .status .status__info {
2023-03-08 15:28:39 +02:00
align-items: flex-start;
gap: var(--gap-default);
height: calc(var(--gap-default) * 2);
justify-content: flex-start;
margin-bottom: 0;
2023-07-06 14:16:21 +03:00
padding-bottom: 0;
}
/* Status action bar */
.layout-single-column .status__action-bar {
margin-top: 12px;
max-height: 27px;
2023-03-08 15:28:39 +02:00
}
/* Display name */
.layout-single-column .status__info .status__display-name {
2023-03-08 15:28:39 +02:00
align-items: flex-start;
display: inline-flex;
gap: var(--gap-default);
order: 1;
}
.layout-single-column .status__info .display-name {
2023-03-08 15:28:39 +02:00
display: flex;
gap: calc(var(--gap-default) / 2);
}
/* The separator dot */
.layout-single-column .status__info::before {
2023-03-08 15:28:39 +02:00
color: var(--color-dim);
content: "·";
display: inline-block;
font-size: var(--font-size);
font-weight: var(--font-weight-regular);
2023-03-08 15:28:39 +02:00
height: 20px;
margin-left: -6px;
margin-right: -10px;
order: 2;
position: relative;
}
.layout-single-column .status__info .status__relative-time {
2023-03-08 15:28:39 +02:00
height: unset;
order: 3;
}
/* Visibility icon */
.layout-single-column .status .status__visibility-icon {
2023-03-18 14:15:07 +02:00
font-size: var(--font-size-mid);
2023-03-08 15:28:39 +02:00
}
/* Panels and things that should be transparent */
2023-04-05 21:35:50 +03:00
.layout-single-column .status__wrapper-direct,
2023-03-25 18:28:40 +02:00
.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,
2023-03-23 20:00:34 +02:00
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,
2023-04-05 21:03:45 +03:00
.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,
2023-03-23 20:00:34 +02:00
body.embed .detailed-status,
.layout-single-column .detailed-status,
.layout-single-column .detailed-status__action-bar,
.layout-single-column .column > .scrollable {
2023-03-08 15:28:39 +02:00
background-color: transparent;
}
/* Avatar */
2023-03-08 17:03:18 +02:00
.account__avatar[style="width: 46px; height: 46px;"],
.layout-single-column .status__avatar {
2023-03-08 17:03:18 +02:00
/* Need to override inline styles */
/* stylelint-disable-next-line */
height: var(--size-avatar) !important;
/* stylelint-disable-next-line */
2023-03-10 13:37:40 +02:00
max-height: var(--size-avatar) !important;
2023-03-10 13:21:39 +02:00
/* stylelint-disable-next-line */
2023-03-10 13:37:40 +02:00
max-width: var(--size-avatar) !important;
2023-03-10 13:21:39 +02:00
/* stylelint-disable-next-line */
2023-03-10 13:37:40 +02:00
min-height: var(--size-avatar) !important;
2023-03-10 13:21:39 +02:00
/* stylelint-disable-next-line */
min-width: var(--size-avatar) !important;
2023-03-08 17:03:18 +02:00
/* Need to override inline styles */
/* stylelint-disable-next-line */
width: var(--size-avatar) !important;
2023-03-08 15:28:39 +02:00
}
/* Avatars */
2023-08-01 08:10:20 +03:00
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);
2023-03-09 13:42:41 +02:00
border: 0;
2023-03-08 15:28:39 +02:00
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-back-button,
.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 {
2023-03-08 15:28:39 +02:00
transition: all 200ms;
}
/* Toot hover effect */
.layout-single-column article:focus,
.layout-single-column article:hover {
2023-03-08 15:28:39 +02:00
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 {
2023-03-25 18:28:40 +02:00
/* stylelint-disable-next-line */
background: var(--color-focusable-toot);
}
2023-03-23 22:19:17 +02:00
/* Search panel that opens when focusing Search or paste URL field */
2023-04-06 20:56:55 +03:00
.layout-single-column .explore__search-header .search__popout,
.layout-single-column .compose-form__poll-wrapper option,
2023-04-06 20:56:55 +03:00
.layout-single-column .search__popout,
.layout-single-column .search-popout {
2023-03-23 21:54:28 +02:00
background-color: var(--color-dark);
border-color: var(--color-dark);
color: var(--color-dim);
}
2023-04-06 20:56:55 +03:00
.layout-single-column .search__popout em,
.layout-single-column .search-popout em {
2023-03-23 21:54:28 +02:00
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;
}
2023-03-08 15:28:39 +02:00
/* Status update tinted to right */
2023-08-23 23:26:38 +03:00
.layout-single-column .status:not(.status--in-thread) .hashtag-bar,
2023-07-03 21:46:21 +03:00
.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 {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size);
padding-left: calc(var(--size-avatar) + var(--gap-default));
padding-top: 0;
2023-03-08 15:28:39 +02:00
}
/* Translate link and other padding resets */
.layout-single-column .conversation .attachment-list,
.layout-single-column .translate ~ .status__content__read-more-button {
2023-03-19 18:26:47 +02:00
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;
}
2023-03-13 21:04:56 +02:00
/* Rtl version */
[dir="rtl"] .layout-single-column .status__action-bar,
2023-07-06 01:41:24 +03:00
[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 {
2023-03-13 21:04:56 +02:00
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 {
2023-03-08 17:28:58 +02:00
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;
2023-03-12 16:37:18 +02:00
/* 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 */
2023-07-27 21:46:34 +03:00
.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 {
2023-03-08 15:28:39 +02:00
margin-left: calc(var(--size-avatar) + var(--gap-default));
}
/* Detailed status update */
.layout-single-column .detailed-status .status__content {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size-bigger);
line-height: 1.4;
2023-03-08 15:28:39 +02:00
}
2023-03-23 20:00:34 +02:00
body.embed .detailed-status__meta,
.layout-single-column .detailed-status__meta {
color: var(--color-dim);
font-size: var(--font-size);
}
2023-03-23 20:00:34 +02:00
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;
}
2023-03-23 20:00:34 +02:00
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);
}
2023-03-23 20:00:34 +02:00
body.embed .detailed-status__reblogs,
.layout-single-column .detailed-status__reblogs {
font-size: var(--font-size);
}
2023-03-23 20:00:34 +02:00
body.embed .detailed-status__reblogs,
body.embed .detailed-status__favorites {
color: var(--color-light-text);
font-weight: var(--font-weight-bold);
}
2023-07-27 17:47:00 +03:00
body.embed .activity-stream .entry {
background-color: var(--color-bg);
}
body.embed > .activity-stream {
backface-visibility: hidden;
2023-07-27 17:59:57 +03:00
/* stylelint-disable-next-line */
background: #313543 !important;
2023-07-27 17:47:00 +03:00
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
}
2023-07-27 21:41:13 +03:00
/* Textual labels for detailed metrics */
body.embed .detailed-status__link > .fa-reply + span::after,
.layout-single-column .detailed-status__link > .fa-reply + span::after {
2023-07-27 17:47:00 +03:00
color: var(--color-dim);
content: 'Replies';
font-weight: var(--font-weight-semibold);
}
2023-07-27 21:41:13 +03:00
body.embed .detailed-status__link > .fa-retweet + span::after,
.layout-single-column .detailed-status__link > .fa-retweet + span::after {
2023-03-23 20:00:34 +02:00
color: var(--color-dim);
content: 'Boosts';
font-weight: var(--font-weight-semibold);
}
2023-07-27 21:41:13 +03:00
body.embed .detailed-status__link > .fa-star + span::after,
.layout-single-column .detailed-status__link > .fa-star + span::after {
2023-03-23 20:00:34 +02:00
color: var(--color-dim);
content: 'Favourites';
font-weight: var(--font-weight-semibold);
}
2023-03-23 20:00:34 +02:00
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;
}
2023-03-08 15:28:39 +02:00
/* Icon buttons */
.layout-single-column .icon-button {
2023-03-08 15:28:39 +02:00
color: var(--color-dim);
}
/* Hide/Show media button */
2023-07-05 02:10:06 +03:00
.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 {
2023-07-05 02:31:06 +03:00
inset-inline-start: var(--badges-distance-from-edge);
top: var(--badges-distance-from-edge);
}
.layout-single-column .media-gallery__item__badges {
2023-07-05 02:31:06 +03:00
bottom: var(--badges-distance-from-edge);
inset-inline-start: var(--badges-distance-from-edge);
}
2023-07-05 02:10:06 +03:00
.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 {
2023-03-08 15:28:39 +02:00
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);
}
2023-03-08 15:28:39 +02:00
/* 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 {
2023-03-08 15:28:39 +02:00
backdrop-filter: blur(12px);
background-color: var(--color-bg-75);
border-color: var(--color-border);
2023-03-08 15:28:39 +02:00
padding: 0;
}
2023-03-12 00:14:17 +02:00
@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 {
2023-03-12 00:14:17 +02:00
margin-right: -2px;
}
}
2023-03-08 15:28:39 +02:00
/* Hidden things */
2023-03-08 22:34:05 +02:00
/* stylelint-disable-next-line */
.layout-single-column .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) {
2023-03-08 15:28:39 +02:00
display: none;
}
/* Column headers */
.layout-single-column .column-header {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size-heading);
font-weight: var(--font-weight-bold);
}
2023-03-09 14:39:37 +02:00
/* Column sub-headers */
.layout-single-column .column-subheading {
2023-03-09 14:39:37 +02:00
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 {
2023-03-09 14:39:37 +02:00
padding-left: var(--gap-default);
padding-right: var(--gap-default);
}
2023-03-08 15:28:39 +02:00
/* Notifications */
.layout-single-column .notification__message {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
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;
2023-03-08 15:28:39 +02:00
}
.layout-single-column .notification__message > div {
2023-03-08 15:28:39 +02:00
display: flex;
justify-content: flex-end;
}
.layout-single-column .muted .status__avatar {
2023-03-08 15:28:39 +02:00
opacity: 1;
}
.layout-single-column .notification .account__avatar-overlay-base {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
/* Need to override inline styles */
/* stylelint-disable-next-line */
height: var(--size-avatar-small) !important;
/* stylelint-disable-next-line */
2023-03-10 13:37:40 +02:00
min-height: var(--size-avatar-small) !important;
/* stylelint-disable-next-line */
min-width: var(--size-avatar-small) !important;
2023-03-16 13:49:35 +02:00
position: absolute;
2023-03-10 13:37:40 +02:00
/* stylelint-disable-next-line */
2023-03-08 15:28:39 +02:00
width: var(--size-avatar-small) !important;
}
.layout-single-column .notification .status__info .status__display-name {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
position: relative;
}
.layout-single-column .notification.notification-admin-report .account__avatar-overlay-overlay {
2023-03-16 13:49:35 +02:00
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 {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
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,
2023-04-05 23:14:52 +03:00
.layout-single-column .notification.notification-follow .display-name,
.layout-single-column .notification.notification-admin-sign-up .display-name + span,
2023-04-05 23:14:52 +03:00
.layout-single-column .notification.notification-follow .display-name + span,
2023-04-05 21:41:46 +03:00
.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 {
2023-03-08 15:28:39 +02:00
display: none;
}
2023-04-05 23:51:34 +03:00
/* 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));
}
2023-04-05 23:14:52 +03:00
/* Minimal follow notification fix */
.layout-single-column .notification.notification-follow .notification__message > span {
2023-04-08 11:36:23 +03:00
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);
}
2023-04-08 11:36:23 +03:00
/* stylelint-disable-next-line */
.layout-single-column .notification.notification-follow .account__avatar-wrapper {
top: 6px;
2023-04-05 23:14:52 +03:00
}
/* 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 {
2023-03-08 15:28:39 +02:00
padding-left: calc(var(--size-avatar) - 4px);
}
2023-04-05 23:14:52 +03:00
.layout-single-column .notification.notification-update .account__display-name,
.layout-single-column .notification.notification-follow .account__display-name {
2023-03-08 15:28:39 +02:00
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);
}
2023-03-15 20:22:16 +02:00
/* 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;
}
2023-03-08 15:28:39 +02:00
/* Hide things in notifications */
.layout-single-column .notification .status__relative-time,
.layout-single-column .notification .status__info::before {
2023-03-08 15:28:39 +02:00
display: none;
}
/* Right side panel */
2023-03-26 15:33:15 -04:00
.layout-single-column .navigation-panel {
2023-03-27 19:37:46 +03:00
box-sizing: border-box;
margin-top: 0;
overflow-y: auto;
2023-03-27 19:37:46 +03:00
padding: 10px;
2023-03-26 15:33:15 -04:00
}
2023-03-27 19:37:46 +03:00
.layout-single-column .navigation-panel hr {
2023-03-08 15:28:39 +02:00
/* Hide but reserve space */
visibility: hidden;
}
2023-03-08 18:18:32 +02:00
.columns-area__panels__pane--navigational .navigation-panel {
border: 0;
height: 100%;
2023-03-08 18:18:32 +02:00
}
2023-03-26 15:33:15 -04:00
.layout-single-column .navigation-panel__logo hr {
2023-03-27 19:37:46 +03:00
margin: 0;
2023-03-26 15:33:15 -04:00
}
2023-03-29 10:06:41 +03:00
/* 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 */
2023-03-15 20:32:02 +02:00
.dropdown-menu__container__list--scrollable::-webkit-scrollbar,
.layout-single-column .navigation-panel::-webkit-scrollbar {
display: none;
width: 4px;
}
.layout-single-column .column-link {
2023-03-08 17:53:25 +02:00
align-items: center;
2023-03-08 15:28:39 +02:00
color: var(--color-light-text);
display: inline-flex;
font-size: var(--font-size-heading);
gap: var(--gap-default);
2023-03-27 19:37:46 +03:00
overflow: visible;
2023-03-26 15:33:15 -04:00
padding-bottom: calc(var(--gap-default) + 4px);
2023-03-08 15:28:39 +02:00
padding-left: var(--gap-default);
padding-right: calc(var(--gap-default) * 1.5);
2023-03-26 15:33:15 -04:00
padding-top: calc(var(--gap-default) + 4px);
2023-03-08 15:28:39 +02:00
transition: all 100ms;
}
[dir="rtl"] .layout-single-column .column-link {
2023-03-13 21:04:56 +02:00
margin-left: auto;
margin-right: 0;
}
2023-03-26 15:33:15 -04:00
.layout-single-column .column-link > i {
min-width: 1.3em;
}
2023-03-27 19:37:46 +03:00
2023-03-26 15:33:15 -04:00
.layout-single-column .column-link > span {
position: relative;
}
2023-03-27 19:37:46 +03:00
2023-03-26 15:33:15 -04:00
.layout-single-column .column-link > span::before {
2023-03-08 15:28:39 +02:00
background-color: var(--color-column-link-hover);
2023-03-26 15:33:15 -04:00
border-radius: 32px;
2023-03-27 19:37:46 +03:00
bottom: calc(2px - var(--gap-default) * 1.5);
content: "";
inset-inline-end: calc(0px - (var(--gap-default) * 2));
2023-03-27 19:37:46 +03:00
inset-inline-start: calc(-1.28571429em - (var(--gap-default) * 2));
2023-03-26 15:33:15 -04:00
opacity: 0;
2023-03-27 19:37:46 +03:00
position: absolute;
top: calc(-4px - var(--gap-default));
2023-03-26 15:33:15 -04:00
transition: opacity 200ms;
}
2023-03-27 19:37:46 +03:00
.layout-single-column .column-link:focus-visible > span::before,
2023-03-27 19:43:22 +03:00
.layout-single-column .column-link:hover > span::before {
2023-03-26 15:33:15 -04:00
opacity: 1;
2023-03-08 15:28:39 +02:00
}
.layout-single-column .account__section-headline a {
2023-03-08 15:28:39 +02:00
transition: all 200ms;
}
.layout-single-column .notification__filter-bar button:hover,
.layout-single-column .account__section-headline a:hover {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
margin: 0;
}
/* Notification badge on side panel */
.layout-single-column .icon-with-badge__badge {
2023-09-11 21:52:04 -04:00
align-items: center;
border-radius: 1em;
box-sizing: border-box;
display: flex;
font-size: 11px;
2023-09-11 21:52:04 -04:00
height: 1.7em;
justify-content: center;
left: 12px;
line-height: 1;
2023-09-11 21:52:04 -04:00
min-width: max-content;
padding: 0 0.4em;
top: -7px;
width: 1.7em;
2023-03-08 15:28:39 +02:00
}
.layout-single-column .column-link--transparent.active {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
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;
2023-03-08 15:28:39 +02:00
height: 4px;
left: 50%;
2023-03-08 15:28:39 +02:00
min-width: 56px;
position: absolute;
transform: translateX(-50%);
2023-03-08 15:28:39 +02:00
}
.layout-single-column .account__section-headline a.active::before,
.layout-single-column .account__section-headline button.active::before,
.layout-single-column .notification__filter-bar a.active::before,
.layout-single-column .notification__filter-bar button.active::before {
2023-03-08 15:28:39 +02:00
display: none;
}
.layout-single-column .notification.notification-reblog .status__action-bar,
.layout-single-column .notification.notification-favourite .status__action-bar {
2023-03-08 15:28:39 +02:00
display: none;
}
.layout-single-column .search .search__icon .fa-search::before {
2023-03-08 15:28:39 +02:00
content: '';
}
.layout-single-column .status__prepend .fa-retweet::before {
content: var(--icon-boost-status-prepend);
position: relative;
top: 1px;
2023-03-08 15:28:39 +02:00
}
.layout-single-column .notification .notification__message .fa {
font-size: 27px;
2023-03-08 15:28:39 +02:00
margin-right: 4px;
max-width: 30px;
}
.layout-single-column .notification .fa:not(.fa-link)::before {
2023-03-08 21:13:34 +02:00
font-size: 22px;
height: 27px;
}
.layout-single-column .notification .fa.fa-user-plus:not(.fa-link)::before {
2023-03-10 14:56:15 +02:00
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 {
2023-03-10 14:56:15 +02:00
color: var(--color-accent-dark);
}
.layout-single-column .notification .fa.fa-home:not(.fa-link)::before {
2023-03-10 14:56:15 +02:00
color: var(--color-accent-dark);
2023-03-08 23:39:07 +02:00
font-size: 24px;
}
2023-03-23 20:00:34 +02:00
/* 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 {
2023-03-10 17:54:35 +02:00
/* stylelint-disable-next-line */
color: var(--color-dim);
2023-03-08 22:35:46 +02:00
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);
2023-03-13 19:58:21 +02:00
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);
2023-03-13 19:58:21 +02:00
opacity: 1;
}
.layout-single-column .notification .account__relationship {
border-radius: 50%;
height: 24px;
2023-04-05 23:20:26 +03:00
transform: translateY(-4px);
}
2023-03-13 20:36:41 +02:00
/* Emoji-mart search input */
.layout-single-column .emoji-mart-search-icon svg {
2023-03-13 20:36:41 +02:00
fill: var(--color-border);
opacity: 1;
}
.layout-single-column .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg {
2023-03-13 20:36:41 +02:00
fill: var(--color-accent);
}
.layout-single-column .emoji-mart-search > input {
font-size: var(--font-size-smaller);
}
2023-04-04 19:15:46 +03:00
.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 {
2023-03-13 20:36:41 +02:00
opacity: 1;
}
2023-03-09 14:39:37 +02:00
/* Search */
.layout-single-column .search .search__icon .fa-search {
background-color: var(--color-mud);
background-image: var(--icon-search);
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
background-color: var(--color-mud);
border-color: var(--color-mud);
2023-03-08 15:28:39 +02:00
border-radius: 32px;
color: var(--color-dim);
font-size: var(--font-size);
height: 42px;
padding: 0 20px;
}
2023-03-30 08:47:49 +03:00
/* Input texts */
.layout-single-column .poll__option input[type="text"],
.layout-single-column input.setting-text:focus,
.layout-single-column .search__input:focus {
2023-03-09 21:10:44 +02:00
color: var(--color-light-text);
}
2023-03-30 08:47:49 +03:00
/* 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 {
2023-03-09 14:39:37 +02:00
color: var(--color-dim);
opacity: 1;
}
2023-03-08 15:28:39 +02:00
/* Profile */
.layout-single-column .getting-started__trends h4,
.layout-single-column .account__header__bar {
2023-03-08 15:28:39 +02:00
border-color: var(--color-border);
}
.layout-single-column .account__header__bio .account__header__fields {
2023-03-08 15:28:39 +02:00
background-color: transparent;
color: var(--color-dim);
display: flex;
flex-wrap: wrap;
gap: var(--gap-default);
padding: 0;
}
.layout-single-column .account__header__bio .account__header__fields dl::after {
content: '|';
order: 2;
}
2023-09-14 02:03:38 +03:00
/* 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 */
2023-09-14 00:31:12 +03:00
.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... */
2023-09-14 00:44:30 +03:00
/* stylelint-disable no-duplicate-selectors */
.layout-single-column .account__header__bio .account__header__fields dl {
width: 100%;
}
2023-09-14 00:44:30 +03:00
/* 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"], dt[title*="github"], dt[title*="Github"], dt[title*="YouTube"], dt[title*="youtube"], dt[title*="Website"], dt[title*="website"], dt[title*="Twitch"], dt[title*="twitch"], dt[title*="twitter"], dt[title*="Twitter"], dt[title="X"], dt[title="x"], dt[title*="Discord"], dt[title*="discord"], dt[title*="LinkedIn"], dt[title*="linkedin"], dt[title*="Linkedin"], dt[title*="Instagram"], dt[title*="instagram"], dt[title="IG"]) {
/* Move to last */
order: 9999;
width: auto;
}
/* If GitHub etc. move even further from links */
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="GitHub"], dt[title*="github"], dt[title*="Github"], dt[title*="YouTube"], dt[title*="youtube"], dt[title*="Twitch"], dt[title*="twitch"], dt[title*="twitter"], dt[title*="Twitter"], dt[title="X"], dt[title="x"], dt[title*="Discord"], dt[title*="discord"], dt[title*="LinkedIn"], dt[title*="linkedin"], dt[title*="Linkedin"], dt[title*="Instagram"], dt[title*="instagram"], dt[title="IG"]) {
/* Move to last-last */
order: 99999;
}
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="GitHub"], dt[title*="github"], dt[title*="Github"])::after {
content: var(--icon-github);
height: 18.5px;
width: 18.5px;
}
2023-09-14 01:16:28 +03:00
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Discord"], dt[title*="discord"])::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"], dt[title*="linkedin"], dt[title*="Linkedin"])::after {
content: var(--icon-linkedin);
height: 18.5px;
width: 18.5px;
}
2023-09-14 01:32:23 +03:00
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="IG"], dt[title*="Instagram"], dt[title*="instagram"])::after {
content: var(--icon-instagram);
height: 18.5px;
width: 18.5px;
}
/* Hide labels that show "Website", "YouTube", etc. */
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="GitHub"], dt[title*="github"], dt[title*="Github"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="GitHub"], dt[title*="github"], dt[title*="Github"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Website"], dt[title*="website"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Website"], dt[title*="website"])::after,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="YouTube"], dt[title*="youtube"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="YouTube"], dt[title*="youtube"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Twitch"], dt[title*="twitch"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Twitch"], dt[title*="twitch"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Twitter"], dt[title*="twitter"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Twitter"], dt[title*="twitter"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="X"], dt[title="X"])::before,
2023-09-14 01:16:28 +03:00
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="X"], dt[title="X"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Discord"], dt[title*="discord"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Discord"], dt[title*="discord"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="LinkedIn"], dt[title*="linkedin"], dt[title*="Linkedin"])::before,
2023-09-14 01:32:23 +03:00
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="LinkedIn"], dt[title*="linkedin"], dt[title*="Linkedin"]) dt,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Instagram"], dt[title*="instagram"], dt[title="IG"])::before,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Instagram"], dt[title*="instagram"], dt[title="IG"]) dt {
2023-03-08 15:28:39 +02:00
display: none;
}
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="YouTube"], dt[title*="youtube"])::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"], dt[title*="twitch"])::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"], dt[title="x"])::after,
.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="Twitter"], dt[title*="twitter"])::after {
content: var(--icon-twitter);
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;
}
2023-09-14 00:17:24 +03:00
/* Verified colors for Firefox before :has */
.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__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__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark {
content: var(--icon-verified-smaller);
}
.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd {
align-items: center;
2023-09-14 01:47:08 +03:00
display: inline-flex;
gap: 4px;
}
.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(1) {
align-items: center;
2023-09-14 01:47:08 +03:00
display: flex;
order: 2;
}
.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(2) {
order: 1;
}
2023-03-08 15:28:39 +02:00
/* Joined label */
.layout-single-column .account__header__bio .account__header__fields dt:not([title]) {
2023-03-08 15:28:39 +02:00
display: inline-flex;
font-weight: var(--font-weight-regular);
2023-03-08 15:28:39 +02:00
gap: calc(var(--gap-default) / 2);
2023-03-08 17:53:59 +02:00
text-transform: unset;
2023-03-08 15:28:39 +02:00
}
.layout-single-column h4,
2023-04-06 20:56:55 +03:00
.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 {
2023-03-10 13:25:31 +02:00
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');
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
color: var(--color-dim);
font-size: var(--font-size);
font-weight: var(--font-weight-regular);
text-transform: unset;
2023-03-08 15:28:39 +02:00
}
2023-09-14 00:44:30 +03:00
/* stylelint-disable no-duplicate-selectors */
.layout-single-column .account__header__bio .account__header__fields dl {
2023-03-08 15:28:39 +02:00
background-color: transparent;
border: 0;
color: var(--color-dim);
display: inline-flex;
font-size: var(--font-size);
font-weight: var(--font-weight-regular);
2023-03-08 15:28:39 +02:00
gap: calc(var(--gap-default) / 2);
padding: 0;
}
2023-09-14 00:46:35 +03:00
/* stylelint-enable no-duplicate-selectors */
.layout-single-column .getting-started__trends h4 {
2023-03-10 19:11:33 +02:00
border: 0;
2023-03-08 15:28:39 +02:00
font-size: var(--font-size-heading);
font-weight: var(--font-weight-bold);
line-height: 24px;
2023-03-10 19:11:33 +02:00
margin-bottom: var(--gap-default);
2023-03-08 15:28:39 +02:00
text-transform: unset;
}
.layout-single-column .getting-started__trends {
margin-top: calc(var(--gap-default) * 2);
}
.layout-single-column .trends__item__name a {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size);
}
.layout-single-column .trends__item__name {
2023-03-08 15:28:39 +02:00
display: grid;
gap: 4px;
}
.layout-single-column .account__header__image {
2023-03-08 15:28:39 +02:00
height: 200px;
}
.layout-single-column .account__header__bar .avatar .account__avatar {
2023-03-08 15:28:39 +02:00
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 {
2023-03-08 15:28:39 +02:00
overflow: visible;
}
.layout-single-column .account__header__tabs .account-role {
2023-03-08 15:28:39 +02:00
display: none;
width: 133.5px;
}
2023-03-23 20:00:34 +02:00
/* 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,
2023-07-03 18:01:19 +03:00
.layout-single-column .account__header__tabs__buttons .button,
.layout-single-column .account .account__relationship > .button,
2023-07-03 18:01:19 +03:00
.layout-single-column .notification .account__relationship > .button {
2023-03-08 15:28:39 +02:00
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);
padding-left: 16px;
padding-right: 16px;
transition: all 200ms;
}
/* 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,
2023-07-03 18:01:19 +03:00
.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);
}
2023-07-21 20:34:22 +03:00
/* 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;
}
2023-03-23 20:00:34 +02:00
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,
2023-07-03 18:01:19 +03:00
.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 {
2023-03-08 15:28:39 +02:00
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 {
2023-05-15 17:35:34 +03:00
transform: translateX(-6px) translateY(-1px);
}
2023-03-08 15:28:39 +02:00
/* Misc UI fixes */
.layout-single-column .search__icon .fa.active {
opacity: 1;
2023-03-08 22:30:57 +02:00
}
/* 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 {
2023-03-08 22:30:57 +02:00
top: 14px;
}
.layout-single-column .setting-text__toolbar {
2023-03-08 15:28:39 +02:00
align-items: center;
}
.layout-single-column .timeline-hint strong {
display: block;
margin-bottom: var(--gap-default);
}
.layout-single-column .timeline-hint br {
display: none;
}
2023-03-09 12:16:25 +02:00
/* General fixes */
2023-04-05 21:35:50 +03:00
.layout-single-column .account__header__bar .avatar {
2023-03-09 12:16:25 +02:00
/* stylelint-disable-next-line */
margin-left: 0 !important;
}
/* Fix for button line-height */
2023-04-05 21:35:50 +03:00
.layout-single-column .button.logo-button {
2023-03-09 12:16:25 +02:00
line-height: 22px;
}
/* Visual indicator about direct messages
@source https://github.com/mastodon/mastodon/issues/22158#issuecomment-1353661031 */
2023-04-05 21:35:50 +03:00
.layout-single-column .detailed-status-direct {
position: relative;
}
2023-04-05 21:35:50 +03:00
.layout-single-column .status__wrapper-direct::after,
.layout-single-column .detailed-status-direct::after {
2023-03-09 12:28:51 +02:00
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;
2023-03-09 12:28:51 +02:00
width: 0;
2023-03-09 12:16:25 +02:00
}
.layout-single-column .notification .status__wrapper-direct::after {
top: -40px;
}
/* Private message conversations */
.layout-single-column .conversation .status__action-bar {
padding-left: 0;
}
2023-03-09 15:30:58 +02:00
/* Default buttons */
.layout-single-column .compose-form__buttons button,
.layout-single-column .button {
2023-03-09 15:30:58 +02:00
border-bottom-left-radius: 9999px;
border-bottom-right-radius: 9999px;
border-top-left-radius: 9999px;
border-top-right-radius: 9999px;
}
2023-03-08 19:19:31 +02:00
/* 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);
2023-03-08 19:19:31 +02:00
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 {
2023-03-08 19:19:31 +02:00
background-color: var(--color-brand-mastodon-links);
2023-03-08 19:55:53 +02:00
border-color: var(--color-brand-mastodon-links);
color: var(--color-button-text);
2023-03-08 19:19:31 +02:00
}
2023-03-08 22:27:50 +02:00
/* Tertiary button */
.layout-single-column .button.button-tertiary {
2023-03-08 19:55:53 +02:00
/* stylelint-disable-next-line */
background-color: transparent !important;
/* stylelint-disable-next-line */
2023-03-17 19:54:57 +02:00
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 {
2023-03-17 19:54:57 +02:00
border: 1px solid var(--color-accent-dark);
2023-03-08 19:55:53 +02:00
}
2023-03-08 22:27:50 +02:00
/* Secondary button */
.layout-single-column .button.button-secondary {
2023-03-08 22:27:50 +02:00
/* stylelint-disable-next-line */
background-color: transparent !important;
2023-04-03 11:02:14 +03:00
border: 1px solid var(--color-dim);
2023-03-09 13:24:58 +02:00
color: var(--color-dim);
2023-03-08 22:27:50 +02:00
}
.layout-single-column .button.button-secondary:hover {
2023-03-08 22:27:50 +02:00
/* 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 {
2023-03-08 19:55:53 +02:00
/* stylelint-disable-next-line */
background-color: var(--color-brand-mastodon-links) !important;
/* stylelint-disable-next-line */
2023-03-15 19:56:02 +02:00
border-color: var(--color-brand-mastodon-links) !important;
2023-03-08 19:55:53 +02:00
/* stylelint-disable-next-line */
color: var(--color-bg) !important;
2023-03-24 14:20:20 +02:00
/* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */
padding: 6px 17px;
2023-03-08 19:55:53 +02:00
}
2023-03-08 15:28:39 +02:00
/* Smaller icon for back button */
.layout-single-column .column-back-button i,
.layout-single-column .column-header__back-button i {
2023-03-08 15:28:39 +02:00
font-size: 12px;
}
.layout-single-column .icon-button__counter {
2023-03-08 15:28:39 +02:00
font-size: var(--font-size-smaller);
}
.layout-single-column .notification__favourite-icon-wrapper .fa.fa-retweet {
2023-03-08 18:50:43 +02:00
color: var(--color-green);
}
2023-03-08 16:49:17 +02:00
/* Smaller icons for status action bar */
.layout-single-column .status__action-bar .fa {
2023-03-08 16:49:17 +02:00
font-size: 14.6px;
min-width: 18px;
2023-03-08 16:49:17 +02:00
}
.layout-single-column .status__action-bar .icon-button--with-counter {
2023-03-08 16:49:17 +02:00
align-items: center;
display: inline-flex;
2023-03-08 23:39:07 +02:00
gap: 6px;
2023-03-08 16:49:17 +02:00
}
.layout-single-column .status__action-bar .icon-button {
2023-03-08 16:49:17 +02:00
/* 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 */
2023-03-09 19:27:14 +02:00
width: unset !important;
}
@media screen and (min-width: 890px) {
2023-03-29 10:06:41 +03:00
/* 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,
2023-03-29 10:06:41 +03:00
.layout-single-column .list-panel:hover,
.layout-single-column .column-link[href="/lists"]:focus ~ .list-panel,
2023-03-29 10:06:41 +03:00
.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;
}
2023-06-09 09:29:11 +09:00
.layout-single-column .column-link[href='/follow_requests'] {
order: 8;
}
2023-03-29 10:06:41 +03:00
.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;
}
2023-03-29 10:14:13 +03:00
.layout-single-column .navigation-panel__sign-in-banner,
2023-03-29 10:06:41 +03:00
.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 {
2023-03-09 19:27:14 +02:00
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 {
2023-03-27 19:37:46 +03:00
display: flex;
}
2023-03-08 16:49:17 +02:00
}
/* Replace bookmark icon */
.layout-single-column .detailed-status .fa-bookmark::before,
.layout-single-column .status .fa-bookmark::before {
content: var(--icon-bookmark);
2023-03-08 19:32:27 +02:00
position: relative;
top: 1px;
2023-03-08 16:49:17 +02:00
}
.layout-single-column .column-link .fa-bookmark::before {
content: var(--icon-bookmark-column-link);
2023-03-08 17:53:25 +02:00
}
.layout-single-column .column-link.active .fa-bookmark::before {
content: var(--icon-bookmark-column-link-active);
2023-03-08 17:53:25 +02:00
}
/* 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);
2023-03-08 17:53:25 +02:00
}
.layout-single-column .status button.icon-button:hover .fa-bookmark::before {
content: var(--icon-bookmark-status-hover);
2023-03-08 17:28:58 +02:00
}
2023-03-08 17:53:25 +02:00
/* Notifications icon */
.layout-single-column .column-link .fa-bell::before {
content: var(--icon-bell);
2023-03-08 17:53:25 +02:00
}
.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-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;
}
/* Local icon */
.layout-single-column .column-link .fa-users::before {
content: var(--icon-users-column-link);
position: relative;
top: 2px;
}
.layout-single-column .column-link.active .fa-users::before {
content: var(--icon-users-column-link-active);
}
/* 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;
}
2023-03-08 16:49:17 +02:00
/* Replace share icon */
.layout-single-column .detailed-status .fa-share-alt::before,
.layout-single-column .status .fa-share-alt::before {
content: var(--icon-share);
2023-03-08 16:49:17 +02:00
}
.layout-single-column .status button.icon-button:hover .fa-share-alt::before {
content: var(--icon-share-hover);
2023-03-08 19:17:23 +02:00
}
/* 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);
2023-03-08 19:17:23 +02:00
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;
}
2023-03-08 19:17:23 +02:00
/* 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);
2023-03-08 19:17:23 +02:00
background-position: center;
background-repeat: no-repeat;
2023-03-08 17:28:58 +02:00
}
/* 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 {
2023-03-09 15:22:02 +02:00
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);
}
2023-03-08 16:49:17 +02:00
/* 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;
2023-03-08 17:28:58 +02:00
}
.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);
2023-03-08 23:21:11 +02:00
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);
2023-03-08 23:21:11 +02:00
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-share::before,
.layout-single-column .detailed-status__action-bar .fa-share-alt::before {
content: var(--icon-share-detailed-status-action-bar);
2023-03-08 23:21:11 +02:00
position: relative;
top: 1px;
}
.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-share::before,
.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-share-alt::before {
content: var(--icon-share-detailed-status-action-bar-hover);
2023-03-08 23:21:11 +02:00
position: relative;
top: 1px;
}
.layout-single-column .detailed-status__action-bar .fa-bookmark::before {
content: var(--icon-bookmark-detailed-status-action-bar);
2023-03-08 23:21:11 +02:00
position: relative;
top: 1px;
}
.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-bookmark::before {
2023-04-28 19:31:58 +03:00
content: var(--icon-bookmark-detailed-status-action-bar-hover);
2023-03-08 23:21:11 +02:00
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);
2023-03-08 23:21:11 +02:00
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);
2023-03-08 16:49:17 +02:00
}
2023-03-08 17:03:18 +02:00
/* More icons */
.layout-single-column .fa-list-ul::before {
content: var(--icon-list);
position: relative;
top: 1px;
}
.layout-single-column .relationship-tag {
2023-03-08 17:40:21 +02:00
background-color: var(--color-mud);
color: var(--color-light-text);
font-size: 11px;
font-weight: var(--font-weight-semibold);
2023-03-08 17:40:21 +02:00
line-height: 12px;
opacity: 1;
}
2023-03-08 18:18:32 +02:00
/* 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;
}
}
2023-03-08 18:18:32 +02:00
/* Mobile */
@media screen and (max-width: 889px) {
2023-03-12 22:31:00 +02:00
/* Better blur overlay for ui-header */
2023-08-31 21:15:53 +03:00
.layout-single-column .ui::after {
2023-03-12 22:31:00 +02:00
backdrop-filter: blur(12px);
2023-08-31 21:07:32 +03:00
/* stylelint-disable-next-line */
-webkit-backface-visibility: hidden;
2023-03-12 22:31:00 +02:00
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;
}
2023-03-13 08:20:32 +02:00
/* Fix navigation-bar getting underneath layer */
.layout-single-column .navigation-bar {
2023-03-13 08:20:32 +02:00
z-index: 2;
}
.layout-single-column .tabs-bar__wrapper {
2023-03-12 00:10:06 +02:00
margin-right: 0;
position: sticky;
top: 55px;
2023-03-13 19:58:21 +02:00
z-index: 2;
2023-03-12 00:10:06 +02:00
}
.layout-single-column .columns-area__panels__main {
2023-03-08 18:30:24 +02:00
order: 1;
2023-03-13 19:58:21 +02:00
position: unset;
width: 100%;
}
.layout-single-column .columns-area__panels {
2023-03-13 19:58:21 +02:00
flex-direction: column;
justify-content: flex-start;
}
.layout-single-column .columns-area__panels__main::-webkit-scrollbar {
display: none;
2023-03-08 18:18:32 +02:00
}
.layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
2023-03-08 18:18:32 +02:00
background-color: var(--color-bg);
border-top: 1px solid var(--color-border);
bottom: 0;
2023-03-09 14:27:16 +02:00
height: 3.5rem;
2023-03-08 18:18:32 +02:00
left: 0;
2023-03-09 14:27:16 +02:00
max-height: 16vh;
2023-03-08 18:18:32 +02:00
width: 100vw;
}
.layout-single-column .columns-area__panels__pane--navigational .navigation-panel {
2023-03-08 18:18:32 +02:00
flex-direction: row;
gap: 0;
height: 100%;
2023-03-08 18:18:32 +02:00
overflow-x: auto;
padding: 0;
2023-03-08 18:18:32 +02:00
}
.layout-single-column .columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
2023-03-12 00:32:24 +02:00
display: none;
}
.layout-single-column .column-link {
2023-03-09 20:50:00 +02:00
justify-content: center;
2023-03-08 18:18:32 +02:00
margin-right: unset;
padding-bottom: 0;
2023-03-09 20:50:00 +02:00
padding-left: var(--gap-default);
padding-right: var(--gap-default);
2023-03-08 18:18:32 +02:00
padding-top: 0;
2023-03-09 21:10:44 +02:00
width: 38px;
2023-03-08 18:18:32 +02:00
}
.layout-single-column .item-list .column-link {
2023-03-09 21:35:44 +02:00
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;
}
2023-03-09 14:27:16 +02:00
.columns-area__panels__pane--navigational .column-link__icon.fa-ellipsis-h {
position: relative;
top: -4px;
2023-03-09 14:27:16 +02:00
}
.columns-area__panels__pane--navigational .column-link__icon.fa-users,
.columns-area__panels__pane--navigational .column-link__icon.fa-bell {
font-size: 20px;
2023-03-08 18:18:32 +02:00
}
2023-03-08 18:30:24 +02:00
.columns-area__panels__pane--navigational .column-link__icon {
font-size: 24px;
}
.columns-area__panels__pane--navigational .column-link__icon.fa-fw {
font-size: 22px;
}
2023-03-08 22:24:24 +02:00
.columns-area__panels__pane--navigational .column-link__icon.fa-star,
2023-03-08 22:20:59 +02:00
.columns-area__panels__pane--navigational .column-link__icon.fa-bookmark,
.columns-area__panels__pane--navigational .column-link__icon.fa-bell {
font-size: 18px;
2023-03-08 22:24:24 +02:00
position: relative;
top: 1px;
2023-03-08 22:20:59 +02:00
}
.layout-single-column .columns-area__panels__main > div,
.layout-single-column .columns-area__panels__main > div.columns-area.columns-area--mobile {
2023-03-08 18:30:24 +02:00
border: 0;
}
.layout-single-column .ui__header {
2023-03-13 19:58:21 +02:00
align-items: center;
2023-03-08 18:30:24 +02:00
border-bottom: 0;
2023-03-13 19:58:21 +02:00
box-sizing: border-box;
display: flex;
height: 56px;
2023-03-13 19:58:21 +02:00
justify-content: space-between;
position: sticky;
2023-03-12 00:10:06 +02:00
top: 0;
width: 100%;
2023-03-13 19:58:21 +02:00
z-index: 2;
2023-03-08 18:30:24 +02:00
}
.layout-single-column .account__header__bar .avatar .account__avatar {
2023-03-08 18:30:24 +02:00
/* 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 {
2023-03-08 18:30:24 +02:00
height: 157px;
}
.layout-single-column .column > .scrollable {
2023-03-12 00:21:17 +02:00
padding-bottom: 55px;
2023-03-08 20:31:55 +02:00
}
2023-03-08 20:37:47 +02:00
.layout-single-column .actions-modal ul li:not(:empty) a {
2023-03-08 20:37:47 +02:00
color: var(--color-light-text);
}
2023-03-09 14:39:37 +02:00
/* "Your lists" view */
.layout-single-column .column-subheading ~ article {
2023-03-09 14:39:37 +02:00
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));
}
2023-03-09 18:50:43 +02:00
/* 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;
}
2023-03-11 12:12:55 +02:00
/* 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;
2023-03-11 12:12:55 +02:00
flex: 0 0 calc(100vw / 4);
margin-inline: 0;
padding: 0;
padding-inline: 0;
}
.layout-single-column .navigation-panel .navigation-panel__legal {
2023-03-12 00:32:24 +02:00
order: 999;
text-align: center;
}
.layout-single-column .navigation-panel .column-link:nth-child(1) {
2023-03-11 12:12:55 +02:00
order: 2;
}
2023-03-11 12:12:55 +02:00
/* Home */
.layout-single-column .navigation-panel .column-link:nth-child(2) {
2023-03-11 12:12:55 +02:00
order: 1;
}
2023-03-11 12:12:55 +02:00
/* Notifications */
.layout-single-column .navigation-panel .column-link:nth-child(3) {
2023-03-11 12:12:55 +02:00
order: 4;
}
2023-03-11 12:12:55 +02:00
/* Explore */
.layout-single-column .navigation-panel .column-link:nth-child(4) {
2023-03-11 12:12:55 +02:00
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;
}
2023-03-11 12:12:55 +02:00
/* Lists */
2023-07-03 18:12:43 +03:00
.layout-single-column .column-link[href="/lists"] {
2023-03-11 12:12:55 +02:00
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;
}
2023-03-08 18:18:32 +02:00
}
2023-03-09 18:15:52 +02:00
2023-08-30 00:59:15 -07:00
/* Add bottom padding to the navigation panel for the
Safari PWA on iPhones with the portrait mode home bar */
2023-08-31 20:19:22 +03:00
@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 */
2023-08-31 21:25:25 +03:00
.layout-single-column .columns-area--mobile:has(.compose-form) {
top: 34px;
}
2023-08-30 00:52:24 -07:00
}
/* 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;
}
}
/* stylelint-enable media-feature-name-no-vendor-prefix */
2023-03-09 18:18:18 +02:00
/* Retweet animation */
2023-03-11 23:12:34 +02:00
/* stylelint-disable-next-line selector-not-notation */
.layout-single-column.no-reduce-motion .icon-button.active:not([aria-label="Unboost"]):not([aria-label="Peru tehostus"]) .fa-retweet {
2023-03-09 18:18:18 +02:00
/* stylelint-disable-next-line */
animation: spring-rotate-in 1s linear;
}
.layout-single-column.no-reduce-motion .icon-button:focus .fa-retweet {
/* stylelint-disable-next-line */
2023-03-11 23:12:34 +02:00
animation: spring-rotate-in 1s linear;
}
.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);
}
2023-03-12 18:16:33 +02:00
/* Add border radius to media */
.layout-single-column .media-gallery,
.layout-single-column .audio-player,
2023-07-05 12:40:27 +03:00
.layout-single-column .video-player,
.layout-single-column .media-gallery__gifv,
.layout-single-column .media-gallery__preview {
2023-07-23 18:50:42 +02:00
border: 1px solid var(--color-border);
2023-07-05 01:36:21 +03:00
border-radius: var(--border-radius);
overflow: hidden;
2023-03-12 18:16:33 +02:00
}
/* Exception for your own profile media gallery */
.layout-single-column .account-gallery__container .media-gallery__gifv {
border-radius: 0;
}
2023-07-31 15:35:11 +03:00
/* 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;
}
2023-03-13 20:31:12 +02:00
/* More distinct focus color for accessibility, instead of just white */
.layout-single-column input:focus-visible {
2023-03-13 20:31:12 +02:00
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;
2023-07-27 17:47:00 +03:00
/* stylelint-disable-next-line */
border: 0 !important;
/* It's inlined so we have to use !important */
/* stylelint-disable-next-line */
2023-07-27 17:47:00 +03:00
border-radius: 0 !important;
overflow: hidden;
}
2023-03-26 13:34:18 +03:00
2023-03-28 09:49:46 +03:00
/* 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);
}
2023-03-29 23:40:32 +03:00
/* Fix character counter color when it's over the limit */
.layout-single-column .character-counter.character-counter--over {
color: var(--color-destructive);
}
2023-03-29 23:40:32 +03:00
/* Follow hashtag icon */
.layout-single-column .column-header__button .column-header__icon.fa-user-plus::before {
content: var(--icon-follow-hashtag);
position: relative;
top: 2px;
}
/* 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;
}
2023-04-01 22:46:32 +03:00
/* Show more in server banner */
.layout-single-column .server-banner__meta__column {
max-width: 60%;
width: unset;
}
2023-07-23 18:39:32 +03:00
/* 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;
2023-04-02 19:03:47 +03:00
}
/* 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);
}
/* 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;
}
2023-04-03 22:34:19 +03:00
/* Scrollbars */
2023-07-25 15:46:27 +03:00
.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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar {
height: 6px;
width: 6px;
2023-04-03 22:34:19 +03:00
}
.layout-single-column textarea::-webkit-scrollbar-thumb,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
.layout-single-column .reply-indicator::-webkit-scrollbar-thumb,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-thumb {
2023-04-03 22:34:19 +03:00
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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-thumb:hover {
2023-04-03 22:34:19 +03:00
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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-thumb:active {
2023-05-13 19:41:18 +03:00
background-color: var(--color-black-coral);
2023-04-03 22:34:19 +03:00
}
.layout-single-column textarea::-webkit-scrollbar-track,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track,
.layout-single-column .reply-indicator::-webkit-scrollbar-track,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-track {
2023-04-03 22:34:19 +03:00
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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-track:hover {
2023-04-03 22:34:19 +03:00
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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-track:active {
2023-04-03 22:34:19 +03:00
background-color: var(--color-bg);
}
2023-07-25 15:46:27 +03:00
.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,
2023-04-04 22:10:41 +03:00
.layout-single-column::-webkit-scrollbar-corner {
2023-04-03 22:34:19 +03:00
background-color: transparent;
}
2023-07-25 15:46:27 +03:00
/* 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);
}
/*
* Heart animation micro-interactions 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);
}
2023-04-08 13:11:01 +03:00
@media (min-width: 889px) {
.layout-single-column .column-link .fa-star::before {
position: relative;
top: 2px;
}
}
.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;
}
.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 {
animation: heart-animate 0.8s steps(28) forwards;
/* stylelint-disable-next-line */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC1QAAABkCAMAAAAM7mAaAAADAFBMVEUAAACzq8zkMFXkJlOxqc3iJk3jJk3Ci+fiKVTiJk3iJU3LlO3iJ07jJUziJk3jJk3iJk3jJk/hJ0/iJk3iJk3Mj/XiJk3iJk3Nj/XiJk3iJk3iJk3iJk3Mj/biJk2U1avNj/bjJk3Nku3Kk/PjJk3LkfXLkPXjJ1DMj/XNjvaXuNrou4DiJU3MjvXMjvXjJk3Lj/R5vtTiJk3iJk3jJk3MjvbMk/XAXMnjJk3NkPXXZ7PhJUys5qSm7bbMjvXMkPTMjvWf4s+Tr97Nj/biJU2xxria4LeeMOLSjrTiJk3bhL63WM/0ujCwtvrWnPTMkPbjKFHMj/ab2MPgyoCb37rgoJ6Y5cOfx/ozn+/TldOX5sLstpHut3yg3sKT37nVb8LNkvXJrMXqqmfTasHB6pCV0++nn7aclsbVa8CT58Cf5MCV48Kcx/rSasLIxp+Vz/XqwnCz25iJlvNnnNmgZ8zdRoiU0ffJ7IzdmbijyfDgvZHEXNKr5JWq2KGutMQ8oO3Fp/rL6ozeRoiV1fHsl6XdRojimKbev46sUdVgmvPGuouV1POiNd/OZ8PnvI/uuUc+x5bUar/Wb8On5qLTasCrusO306PdRohan+XeRYifNeKspr9cod/aesuTwI2R0vmsu8Myn+/Mp8ymp8PTms2iTNdYw5E7yY2Ll+/xvjfkJU3iJk2V5MKimr1MoOu7y7HLxp0qyo3dRojbj8ToykXL6n22sviVyI1ByI6s1sr3v5CbyPrzvzCqtcHQodOfZ8ud2djdR4iQmN6S4ciw9prnvZCfMOLalctlm+vor5czoe9omuSKmeqU2uWwxcWb3dTCqvr0jqmhmrjLxJa9rPqwy8LEkfSgZ8udL+PdRomquMK/Ws2SlfFVur/qqmdOw54zr+Kw9prbktC/vNyzQt5Qwb7Tyrix063lIlKwkfXi0UziJk3MjvXUar/dRoiquMKR0vqM6MOw1aWW2On0jqew9pqxwsXglMW7vNywkfXi0UyzQt7U4GjBnPJbtsN52bDbH1E9AAAA63RSTlMABAUMCPPkDBT92hQZafm1fSUh7ZRLpp1BzL5zOyPFD7tBHTOuezgslqEeF9T87EcrFWCMhfViFVmIQTIb/uJay/4qrkwzJ/78Uiwi/fz+UTDV/Sf+/F7+/v6hNA1NPXNt/fqPPDP+/ebIinZfW/57UVX9/fvhmHhUSf77rW1pU/7+v76noId2bf360aimlngz+MzMvaudi3VXUUZB/vvn4d6ciXo++rJjOzc04aaPiGf89LWs1J+Jhv373c/Lx8W6ZVD74t7Z2NK9tbWJ8evo4+PgzMK0qZt/c/Hb0MypY/z46ebSm/zx7+bhp+NmuQAAKXNJREFUeNrs3UFIU3EcB/DvHx68wzsPdhmTDaMGxbpMDGXhKMF4EzssCGZGLbBejCBGDysGXYLqUnSZmKF4MzoEExnUoahTJaEkdMuOHiaBChL0VzpEJQTtCw2/H9j5u+OX7/s9HkRERERERERERERERERERERERERERERERERERERERERERERERERa5LADulIKdGEJdEEIuiAAXVAGXakMERGRPSuRiYFtfCoEW3HpEtgKo6cNyAprow7Iii9n6Rmlt+/pGamvk6BrNEBXLoOurwQREZG9yssNdRtwpfP5/D5w9W1ubobgis/PzxdBNtvbS88YXVsbBtnFtbXDILOl2oDMVMqgS6UgIiIiPJGFhU6QHbCFNwOuTpvRDa6btlRPg+uwLdUFkI329h7HH7XXUh2/WMCu2unERERERKiCet0Dl1O1kuDq4BdeZG3GCLi8lc3NYyC79G7JAVnPpWGIiIiI7BGh7/uL4HKr1iC4MrbwJsFlOju6Dci8UI/QRURERFoobDQqBjSuC6DuWy5YYglYi9XqggeWZBLboiNp0IQh6AoF/EoZuzh+HHSOTjJERESogkYjAFng+wHcUxYvKlOtZnaS/AWw2Pk4C8DJjCTAEsnnIyCzbw/2gW1+HnSnT+NP2q7wioiISNsrnbL6TLlSNmBxfcvZSaqAZcHOx4Cp+4slsOTy+RzIMvwXFOGtrHhgKxYhIiIislcEp6yg0mw2K2BJ+ZbnNKhLtb3JWATZYD4/CDKns9OgFboc7Mq0JsKdccF2YsYBW60GNuf2DNi6+Bk4Np0C25U5B2xzc6C7fgVszoMesMWvgy5+HiIibKlyOQWuvp2lurkNNHXfrwOlW40yaGL1egJsnodWGHj27Bq43PsTE0fANTA29ukEuGpbW18MuJb7+5dBdre/fwZkL65eNSD7cOEJ2B49GgbbqwfYRVuValzRpbyIyN9xJ5vNyTi4wjt3Qkw2bRJ4ku3zRS9n6uzzcVCZNxsbGwOgOjMxMXEfXOfGxsbOgOvu1tYWu7jbwvsaZDajBrKPV1+AbfrDONiGbxiwxeMQEZG9JGxaIYi8ZDQaiUSjZRsU4P/nPHy8dAxUN89aBkyJDesaftdmpfqMLdWXwXWbv1Sjxi+8OHF32YDMmemCiIhImzGxaCSbjURjBiTpTHduqGkN5bozabSeSf7891NBNpI0+DfxQtEB1dP19fXHBkxTZy0PTOYzf6nusucf7MLr3vt0zoCsdrsLbK4LERER+YUXGdmf6zh6tCO3fyTigSCRPTB0cPWHg0MHsgm0mDOYO7S6zW82/W/2t3ooN+iglWKRNH6TjsTwD3pmT54cdcC0tG71gGncdurn2FW73FTDDHgQERGR7+zdP2gTURwH8O+LBydkDnQJlYQE45FSh6Q0lDQQ2iFGpIYKbc6mxA5WEeNQ4z+EVKkOalAqoiBIqUPAQTR1EBFFRFy6iIOLgzjJSzGLSO3gi8Y/oU3u7t09EX2fqTSQL78p3/x4ufdvUmK5fRfnr1yZv7gvF1PgvN7+BG2R6O+Fo9ToFrrOlqgK5/i2Nhp1T7J/sMvv9fobx513Nv6x1QdbJn7ds+z3EGyIePzgdmA3swfCNDfVywRCHVtYkHVUkiRJkqS/Vl9u/nLtN5fnc31wkhJN0A0kogqc4g700A31BNxwhi8UpnQk0Ium7R+Zo72BEUrDIR/4HazX6webW2qCtojH+xeX6u6ry7eGIEmSJEmS9L+Kzdc2MB+DU0g0TtuIR4kzEZMR2lZkkjgREYjQcDKI35xp/lgxmAzTSIA7RKk3dAPE4zY6QMMZMrSbGYAkSZIkSZIkRuxKrY0rMTjCn6AdJPxORIzQjkbsh3jZFMletNh++OhxfNObZJN4wWd7vWE7fF0w1OUDl4nxA/JKZ0mSJEmSJMDlgvP6LtY6uNjnxII3TDsKBwhsmmQRBiGTsGcwQuMedOCJ08gg+EyzTj0NvxcmeP1gFu8vKhAse3ZOg2B6+W0GopWrFYiWqRYgGimXIVyhCOEGigqEK3ZDuOwAxJNXiEiSJDlp8/VrszP3Vlbuzcxeu74ZDortr3W0Pwab3FuooS1u2KGEqAkhBdwGxu98DieNjmYkKQ2Aw/De4fHp8e4uN0xxdwGLY2NjC7BgaIjAIm10dPQlzCNDPlj2Np/PW8lIKbCskk6nCUxTU+DwKJ3W8Y3LRFafCg6F1VUN3+gVzTiDgMfSWvOtSaVinAEuU6UBfJeZIjBAwKeo4Tt9ShcUAYX8HGkAwmUyEE7PQrwsgXCaDuF0DeL9Kxk6QRvyC6j0Z7mezq60mH3qgkNyNUM52OIboSaM+MBPXV/bI/F4ZH11VwEbm+QnMBSgtN8dCHhhyUF22nkY6FJND9yFx6xUv7P2ZI7XsCg7ylh7iPQx7lJNspq56w5fKFyl2gUm8/ZtAUbU/TdzsK6afuRCQzmdLsNA38mTO2CdVq2S73+wCm80yY4vF8AjU/gx0eqq0SC37V7vXVhbW0JnNy7AHn2ptKQYzLEDNhVLpQHRH/dTpdIURHt14hxEO/fwEkTTH76EcJeeQ7jsQwLhLukQLqNBPB2SZMD1ZmZlnZk3LjhhX82EfbDBG6emxL3gpbR26p5Q1K+CU
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;
}
/* stylelint-disable-next-line */
.layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before {
left: -24px;
}
@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;
}
}
/* 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;
}
/*
* --------------------------------------
* Heart animation micro-interactions end
*/
/*
* Star animation micro-interactions start (depends on the heart icon above)
* If you prefer hearts, remove everything below this comment until
* "Star animation micro-interactions end"
* -------------------------------------------------------------------------
*/
/* 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 {
animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1;
/* 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;
}
/* 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 {
animation: sparkles-width .65s 1, sparkles-size .65s 1;
/* 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;
}
2023-04-05 20:39:34 +03:00
/* 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 {
animation: ring-border-width .35s 1, ring-size .35s 1;
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,
2023-04-05 21:03:45 +03:00
.layout-single-column .notification__favourite-icon-wrapper .star-icon {
color: var(--color-yellow);
}
2023-04-05 20:39:34 +03:00
.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);
}
2023-07-21 20:34:22 +03:00
/* Fix focus for mouse users on v4.1.4-nighly-20230721 */
.layout-single-column button:focus,
2023-07-21 20:34:22 +03:00
.layout-single-column .icon-button:focus {
outline: 0;
}
.layout-single-column button:focus-visible,
2023-07-21 20:34:22 +03:00
.layout-single-column .icon-button:focus-visible {
outline: 2px solid var(--color-accent);
}
2023-04-05 20:39:34 +03:00
/* 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;
}
}
/* 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;
}
2023-04-07 12:30:50 +03:00
/* 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;
}
/* Fix the sparkle and circle position on small screens on the Explore */
2023-04-07 11:26:58 +03:00
@media (max-width: 888px) {
2023-04-07 12:30:50 +03:00
/* Sparkle offset on numbered item */
2023-04-07 11:26:58 +03:00
.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;
2023-04-07 11:26:58 +03:00
}
2023-04-07 12:30:50 +03:00
/* 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;
2023-04-07 12:30:50 +03:00
}
}
@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% {
2023-04-10 11:59:49 +03:00
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
* -------------------------------------
*/