From 733d4ee1274daaa4a3c52e7b1db8d13384ef8820 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 16:56:44 +0200 Subject: [PATCH 01/12] Add instructions to install Tangerine UI as an optional theme --- README.md | 80 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 60 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 66ae9bf..b1abb46 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,85 @@ # Tangerine UI for Mastodon 🍊🐘 A Tangerine redesign for Mastodon's Web UI, using just CSS. +Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette. * Live demo at [nileane.fr](https://nileane.fr) * [See the announcement post](https://nileane.fr/@nileane/110691663040709608) on Mastodon ## Variants -### Tangerine 🍊 -Default variant for Tangerine UI, featuring a soft orange palette. +* **Tangerine 🍊** + Default variant for Tangerine UI, featuring a soft orange palette. -![a profile page on Mastodon featuring Tangerine UI in light mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/77f49e2a-74c7-4d94-a427-c991289f2383) -![a profile page on Mastodon featuring Tangerine UI in dark mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/6891bfde-c5a2-43a6-8357-76c5f8b0f8d3) -![TangerineUI Mobile](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/b10f3e72-0a58-4b0d-8f00-f7210958483c) +![Tangerine UI's orange palette, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/5048329b-9d95-4b11-a859-48c1f37d54e6) +* **Purple πŸͺ»** + For those of you who like Tangerine UI but want to stick to Mastodon's purple palette. -### Purple πŸͺ» -For those of you who like Tangerine UI but want to stick to Mastodon's purple palette. +![Tangerine UI's purple variant, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/c01c7a54-d2db-4fe5-a0f6-dc6e77cfe128) -![a profile page on Mastodon featuring Tangerine UI's purple variant in light mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f3ab51d2-c94d-4192-a1c8-6d15b0d9025a) -![a profile page on Mastodon featuring Tangerine UI's purple variant in dark mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/2322a5ea-6fce-4acc-9e53-92a9bae72e89) -![TangerineUI Mobile in purple](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f2098d06-7c48-4282-b5f6-a62c38155c7b) +## Installation for instance admins - -## How to use -**Tangerine UI is contained in a single CSS file.** - -* To use on your instance, copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). +### Install Tangerine UI as the only theme on your instance: +* Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. - * ⚠️ Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings. Please make sure there is a consensus among your users for doing so. + * ⚠️ **Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings.** Please make sure there is a consensus among your users for doing so. If not, see below how to install Tangerine UI as an optional site theme for your users. -* If you're not an admin, you can use Tangerine UI with a browser extension (ie. [Stylus](https://add0n.com/stylus.html)). +### Install Tangerine UI as an optional theme on your instance [Recommended]: +1. Add the files and folders from [this repository](https://github.com/nileane/TangerineUI-admins) to your Mastodon themes directory: -* [To be added: instructions on how to install Tangerine UI as an optional theme for your users on your instance] +``` +app/ + javascript/ + styles/ + tangerineui.scss | **new** + tangerineui-purple.scss | **new** + contrast/ + ... + fonts/ + ... + tangerineui/ | **new** + layout-single-column.scss | **new** + tangerineui-purple/ | **new** + layout-single-column.scss | **new** +``` + + +2. **Add your themes to the config.** This is what [the default themes.yml](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) looks like in Mastodon. To make Tangerine UI visible in your users's settings, you need to add a new line to [`themes.yml`](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) (`). + +```yml +default: styles/application.scss +contrast: styles/contrast.scss +mastodon-light: styles/mastodon-light.scss +tangerineui: styles/tangerineui.scss | **new** +tangerineui-purple: styles/tangerineui-purple.scss | **new** +``` + +3. **Add a human-friendly name for the themes (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for your theme's `themeName` as added in the previous step. For example, [the default `config/locales/en.yml`](https://github.com/tootsuite/mastodon/blob/041ff5fa9a45f7b8d1048a05a35611622b6f5fdb/config/locales/en.yml#L942-L945) contains localizations for the three default themes that ship with Mastodon, into the `en`glish language. You need to do this for every language you expect your users to use, or else they will see the unlocalized `themeName` directly. + +```yml +themes: + contrast: Mastodon (High contrast) + default: Mastodon (Dark) + mastodon-light: Mastodon (Light) + tangerineui: Tangerine UI | **new** + tangerineui-purple: Tangerine UI (Purple) | **new** +``` + +4. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Mastodon instance for the changes to take effect. + + +## Installation for regular users: +* Install a browser extension that allows you to inject CSS on a webpage, such as [Stylus](https://add0n.com/stylus.html), or [Live CSS Editor](https://github.com/webextensions/live-css-editor) +* Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the extension's editor + * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. ## Things to know * **Tangerine UI currently only supports Mastodon's single column layout**. The advanced view (multiple columns) will not be affected. * **Tangerine UI auto-switches from light to dark mode based on your OS preference**, whether you set your Mastodon theme to *Mastodon (Dark)* or *Mastodon (Light*). * Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header. -* Glitch-soc and Hometown instance admins beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes. - * If you are a user on a Glitch-soc or Hometown instance using a browser extension, first switch your instance to the Mastodon flavour before applying Tangerine UI. +* **Glitch-soc** and **Hometown** instance admins beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes. + * If you are a user on a Glitch-soc instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. ## Accessibility * I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it. From 9d676449179b10215bcf057b6ffeb0014a91aac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 16:57:53 +0200 Subject: [PATCH 02/12] Fixed new lines --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b1abb46..25ba909 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,12 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ## Variants -* **Tangerine 🍊** +* **Tangerine 🍊** Default variant for Tangerine UI, featuring a soft orange palette. ![Tangerine UI's orange palette, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/5048329b-9d95-4b11-a859-48c1f37d54e6) -* **Purple πŸͺ»** +* **Purple πŸͺ»** For those of you who like Tangerine UI but want to stick to Mastodon's purple palette. ![Tangerine UI's purple variant, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/c01c7a54-d2db-4fe5-a0f6-dc6e77cfe128) From aa4d4c1b8575a10c250ea506dba1592a1a19fcd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 19 Jul 2023 17:24:56 +0200 Subject: [PATCH 03/12] Refined instructions for admins --- README.md | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 25ba909..0d1be10 100644 --- a/README.md +++ b/README.md @@ -23,29 +23,31 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ### Install Tangerine UI as the only theme on your instance: * Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. - * ⚠️ **Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings.** Please make sure there is a consensus among your users for doing so. If not, see below how to install Tangerine UI as an optional site theme for your users. + * ⚠️ **Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings.** Please make sure there is a consensus among your users for doing so. Otherwise, see below how to install Tangerine UI as an optional site theme for your users. ### Install Tangerine UI as an optional theme on your instance [Recommended]: -1. Add the files and folders from [this repository](https://github.com/nileane/TangerineUI-admins) to your Mastodon themes directory: +Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance. This will also allow you to set Tangerine UI as the default theme for your instance, while still letting users change back to Mastodon's default themes in their appearance settings. + +1. Add the files and folders from [the `TangerineUI-admins` repository](https://github.com/nileane/TangerineUI-admins) to your Mastodon themes directory: ``` app/ javascript/ styles/ - tangerineui.scss | **new** - tangerineui-purple.scss | **new** + tangerineui.scss | **new** + tangerineui-purple.scss | **new** contrast/ ... fonts/ ... - tangerineui/ | **new** - layout-single-column.scss | **new** - tangerineui-purple/ | **new** - layout-single-column.scss | **new** + tangerineui/ | **new** + layout-single-column.scss | **new** + tangerineui-purple/ | **new** + layout-single-column.scss | **new** ``` -2. **Add your themes to the config.** This is what [the default themes.yml](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) looks like in Mastodon. To make Tangerine UI visible in your users's settings, you need to add a new line to [`themes.yml`](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) (`). +2. **Add Tangerine UI to the config.** To make Tangerine UI available in your users's settings, you need to add a new line to [`config/themes.yml`](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml). Here we're adding 2 new lines, one for Tangerine UI, another for Tangerine UI's purple variant: ```yml default: styles/application.scss @@ -55,7 +57,7 @@ tangerineui: styles/tangerineui.scss | **new** tangerineui-purple: styles/tangerineui-purple.scss | **new** ``` -3. **Add a human-friendly name for the themes (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for your theme's `themeName` as added in the previous step. For example, [the default `config/locales/en.yml`](https://github.com/tootsuite/mastodon/blob/041ff5fa9a45f7b8d1048a05a35611622b6f5fdb/config/locales/en.yml#L942-L945) contains localizations for the three default themes that ship with Mastodon, into the `en`glish language. You need to do this for every language you expect your users to use, or else they will see the unlocalized `themeName` directly. +3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use, otherwise, in their themes list, they will see the unlocalized `themeName` ("tangerineui"), instead of a human-friendly theme name ("Tangerine UI"). ```yml themes: @@ -68,9 +70,21 @@ themes: 4. **Compile theme assets and restart.** Run `RAILS_ENV=production bundle exec rails assets:precompile` and restart your Mastodon instance for the changes to take effect. +Your users should now be able to choose '*Tangerine UI*' and '*Tangerine UI (Purple)*' as their site theme: + +![Safari - 2023-07-19 aΜ€ 16 59 2@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/8cce803c-099b-4f25-8e39-e1c0da3aa6dc) + +As an admin, you should also now be able to set Tangerine UI as the default theme for your instance (navigate to https://*domain*/admin/settings/appearance): + +![Safari - 2023-07-19 aΜ€ 17 01 2@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/05fcbb53-54de-40e4-89bd-199107116dfc) + + + ## Installation for regular users: -* Install a browser extension that allows you to inject CSS on a webpage, such as [Stylus](https://add0n.com/stylus.html), or [Live CSS Editor](https://github.com/webextensions/live-css-editor) +Even if you are not the admin of your instance, you can still use Tangerine UI using a browser extension. + +* Install any browser extension that allows you to inject CSS on a webpage, such as [Stylus](https://add0n.com/stylus.html), or [Live CSS Editor](https://github.com/webextensions/live-css-editor) * Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the extension's editor * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. From 0ff06254f0c1e9821d19cb2ebabc2ad7afb4b0be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 17:35:29 +0200 Subject: [PATCH 04/12] Updated ALT text --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0d1be10..843e2d0 100644 --- a/README.md +++ b/README.md @@ -72,11 +72,11 @@ themes: Your users should now be able to choose '*Tangerine UI*' and '*Tangerine UI (Purple)*' as their site theme: -![Safari - 2023-07-19 aΜ€ 16 59 2@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/8cce803c-099b-4f25-8e39-e1c0da3aa6dc) +![Screenshot : select Tangerine UI as a theme in appearance settings on Mastodon.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/8cce803c-099b-4f25-8e39-e1c0da3aa6dc) As an admin, you should also now be able to set Tangerine UI as the default theme for your instance (navigate to https://*domain*/admin/settings/appearance): -![Safari - 2023-07-19 aΜ€ 17 01 2@2x](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/05fcbb53-54de-40e4-89bd-199107116dfc) +![Screenshot : select Tangerine UI as the default theme for your Mastodon instance in the administration panel.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/05fcbb53-54de-40e4-89bd-199107116dfc) From 20032c8d5c61bdc5112ad0ca2d9f740fada13a85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 17:43:03 +0200 Subject: [PATCH 05/12] Added theme files --- .gitignore | 1 + README.md | 2 +- .../javascript/styles/tangerineui-purple.scss | 2 + .../layout-single-column.scss | 2528 +++++++++++++++++ .../app/javascript/styles/tangerineui.scss | 2 + .../tangerineui/layout-single-column.scss | 2528 +++++++++++++++++ mastodon/config/themes.yml | 5 + 7 files changed, 5067 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 mastodon/app/javascript/styles/tangerineui-purple.scss create mode 100644 mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss create mode 100644 mastodon/app/javascript/styles/tangerineui.scss create mode 100644 mastodon/app/javascript/styles/tangerineui/layout-single-column.scss create mode 100644 mastodon/config/themes.yml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/README.md b/README.md index 843e2d0..dd394d0 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ### Install Tangerine UI as an optional theme on your instance [Recommended]: Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance. This will also allow you to set Tangerine UI as the default theme for your instance, while still letting users change back to Mastodon's default themes in their appearance settings. -1. Add the files and folders from [the `TangerineUI-admins` repository](https://github.com/nileane/TangerineUI-admins) to your Mastodon themes directory: +1. Add the files from the `mastodon/app` folder in this repository to your Mastodon themes directory: ``` app/ diff --git a/mastodon/app/javascript/styles/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple.scss new file mode 100644 index 0000000..5f40e67 --- /dev/null +++ b/mastodon/app/javascript/styles/tangerineui-purple.scss @@ -0,0 +1,2 @@ +@import 'application'; +@import 'tangerineui-purple/layout-single-column.scss'; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss new file mode 100644 index 0000000..123be50 --- /dev/null +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -0,0 +1,2528 @@ +/* TangerineUI 🍊 for Mastodon ・ Purple variant πŸͺ» + version: 1.6 + + A Tangerine redesign for Mastodon's Web UI. + https://github.com/nileane/TangerineUI-for-Mastodon/ + + by @nileane@nileane.fr + + Last Mastodon compatibility check: v4.1.4 stable βœ… +*/ + + +/* 🎨 Colors */ +:root { + --color-bg: #f2eff5; + --color-fg: #2a2d37; + --color-fg-muted: #888494; + --color-secondary-bg: #e8e4f2; + --color-secondary-separator: #dfdbed; + + --color-content-bg: #ffffff; + --color-content-fg: #444a5a; + --color-content-fg-bold: #000000; + --color-content-fg-muted: #8b92a7; + --color-content-secondary-bg: #f5f4f9; + --color-content-secondary-separator: rgba(223, 219, 237, 0.4); + --color-content-bg-focus: #fffcfa; + + --color-accent: #6364ff; + --color-accent-focus: #563acc; + --color-accent-bg: #e5ddf6; + --color-accent-fg: #ffffff; + + --color-lines: var(--color-bg); + +} +@media (prefers-color-scheme: dark) { + :root { + --color-bg: #000000; + --color-fg: #d6d2e0; + --color-fg-muted: #655e6e; + --color-secondary-bg: #0c0c0d; + --color-secondary-separator: #26232e; + + --color-content-bg: #111111; + --color-content-fg: #f2f2f2; + --color-content-fg-bold: #ffffff; + --color-content-fg-muted: #737373; + --color-content-secondary-bg: #1f1b22; + --color-content-secondary-separator: rgba(64, 62, 89, 0.4); + --color-content-bg-focus: #181818; + + --color-accent: #7a7af9; + --color-accent-focus: #5a47ff; + --color-accent-bg: #261f3c; + --color-accent-fg: #ffffff; + + --color-lines: var(--color-content-secondary-bg); + } +} +:root { + --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%3E%3C/svg%3E'); + + --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23282C37" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23282C37" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23282C37" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E'); + --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); + --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-accent: 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='%236364ff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); + --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236364ff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23282C37' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23282C37" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); + --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236364ff' 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-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); + --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23282C37'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23282C37" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236364ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E'); + --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23282C37" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%236364ff" 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-star-active: '\f005'; + --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); +} +@media (prefers-color-scheme: dark) { + :root { + --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%3E%3C/svg%3E'); + + --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23ffffff" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23ffffff" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23ffffff" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E'); + --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); + --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-accent: 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='%236b6cfb' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); + --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236b6cfb' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23ffffff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); + --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6cfb' 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-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); + --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23ffffff'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6cfb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E'); + --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffffff" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%236b6cfb" 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='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); + } +} + +body.layout-single-column { + background-color: var(--color-bg); + color: var(--color-fg); + font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; +} + +/* πŸ–±οΈ Scrollbars */ +:root:has(.layout-single-column) *::-webkit-scrollbar-track { + background-color: var(--color-bg); + padding: 2px; +} +:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { + background-color: var(--color-accent); + border-radius: 50px; + opacity: .4; +} +:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { + background-color: var(--color-bg); +} +:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { + background-color: var(--color-accent); + opacity: .7; +} +@media screen and (max-width:1174px) { + :root:has(.layout-single-column) *::-webkit-scrollbar { + display: none; + } +} + +/* πŸ’¨ Loading bar */ +.layout-single-column .loading-bar { + background-color: var(--color-accent); +} + +/* Resetting borders */ +.layout-single-column .column>.scrollable, +.layout-single-column .error-column, +.layout-single-column .getting-started, +.layout-single-column .regeneration-indicator, +.layout-single-column .audio-player, +.layout-single-column .compose-form .spoiler-input__input, +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form__poll-wrapper select, +.layout-single-column .poll__option input[type=text], +.layout-single-column .report-dialog-modal__textarea, +.layout-single-column .search__input, +.layout-single-column .setting-text, +.layout-single-column .compose-form .compose-form__buttons-wrapper, +.layout-single-column .about__section__body { + border: 0; +} +.layout-single-column .column-inline-form, +.layout-single-column .column>.scrollable, +.layout-single-column .error-column, +.layout-single-column .getting-started, +.layout-single-column .regeneration-indicator { + background: transparent; +} + +/* Round avatars */ +.layout-single-column .account__avatar img { + border-radius: 50%; +} + +/* Rordered layout */ +.layout-single-column .columns-area__panels__pane--navigational { + order: 1; +} +.layout-single-column .columns-area__panels__main { + order: 2; +} +.layout-single-column .columns-area__panels__pane--compositional { + order: 3; +} +.layout-single-column .columns-area--mobile .column { + flex: unset; + height: auto; +} +.layout-single-column .scrollable, +.layout-single-column .column > .scrollable { + border-radius: 7px !important; + max-height: max-content; +} + + +/* *️⃣ Icons + -------- */ +.layout-single-column i.fa-bookmark:before, +.layout-single-column i.fa-share-alt:before, +.layout-single-column i.fa-bookmark:before, +.layout-single-column i.fa-star:before, +.layout-single-column i.fa-retweet:before { + content: " "; + display: inline-block; + width: 23px; + height: 23px; + background-repeat: no-repeat; + background-position: center; +} +.layout-single-column i.fa { + background-repeat: no-repeat; +} +.layout-single-column .detailed-status__link .fa:before { + content: " "; + width: 13px; + height: 13px; + margin-bottom: -2px; + background-size: contain; +} +/* Replace bookmark icon */ +.layout-single-column i.fa-bookmark:before { + background-image: var(--icon-bookmark); + background-size: 80%; +} +.layout-single-column .detailed-status__button i.fa-bookmark:before { + background-image: var(--icon-bookmark-accent); +} +.layout-single-column .icon-button.active i.fa.fa-bookmark.fa-fw:before { + background-image: var(--icon-bookmark-active); +} +/* Replace share icon */ +.layout-single-column i.fa-share-alt:before { + background-image: var(--icon-share); +} +.layout-single-column .detailed-status__button i.fa-share-alt:before { + background-image: var(--icon-share-accent); +} +/* Replace star icon */ +.layout-single-column i.fa-star:before { + background-image: var(--icon-star); + text-align: center; + line-height: 34px; +} +.layout-single-column .detailed-status__button i.fa-star:before { + background-image: var(--icon-star-accent); +} +.layout-single-column button.icon-button.active i.fa-star:before, +.layout-single-column .notification i.fa-star:before { + background-image: none; + content: var(--icon-star-active); +} +.layout-single-column .detailed-status__link i.fa.fa-star:before { + content: " "; +} +/* Replace retweet icon */ +.layout-single-column i.fa.fa-retweet.fa-fw, +.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, +.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost); + background-position: center; +} +.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost-accent); +} +.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .notification i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost-active); + background-position: center; +} +.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw { + background-image: var(--icon-boost-status-prepend); +} +.layout-single-column .detailed-status__link .fa.fa-retweet:before { + background-image: var(--icon-boost); +} +.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, +.layout-single-column button.icon-button.disabled i.fa-retweet, +.layout-single-column button.icon-button.disabled:hover i.fa-retweet { + background-image: var(--icon-boost); + opacity: .2; + pointer-events: none; +} +.layout-single-column .boost-modal__action-bar .fa-retweet { + background-image: var(--icon-boost); + vertical-align: middle; +} +/* Replace reply icon */ +.layout-single-column i.fa-mail-reply::before, +.layout-single-column i.fa-reply::before, +.layout-single-column i.fa-reply-all::before { + content: var(--icon-reply); + position: relative; + top: 2px; +} +.layout-single-column .detailed-status__button i.fa-reply::before, +.layout-single-column .detailed-status__button i.fa-reply-all::before { + content: var(--icon-reply-accent); +} + + +/* Home icon */ +.layout-single-column .notification__filter-bar .fa-home::before { + content: var(--icon-home-notification); +} +.layout-single-column .notification__filter-bar .active .fa-home::before { + content: var(--icon-home-notification-active); +} +.layout-single-column .column-link .fa-home::before { + content: var(--icon-home); +} +.layout-single-column .column-link.active .fa-home::before { + content: var(--icon-home-column-link-active); +} +.layout-single-column .fa-home.column-header__icon:before { + content: var(--icon-home-notification-active); +} +/* Federated icon */ +.layout-single-column .column-link .fa-globe::before { + content: var(--icon-globe); +} +.layout-single-column .fa-globe.column-header__icon:before { + content: var(--icon-globe); +} +/* Local icon */ +.layout-single-column .fa-group.column-header__icon:before, +.layout-single-column .fa-users.column-header__icon:before { + content: var(--icon-users-column-link-active); +} +/* Explore icon */ +.layout-single-column .column-link .fa-hashtag::before { + content: var(--icon-hashtag); +} +.layout-single-column .column-link.active .fa-hashtag::before { + content: var(--icon-hashtag-active); +} +.layout-single-column .fa-hashtag.column-header__icon:before { + content: var(--icon-hashtag-active); +} +/* Search icon */ +.layout-single-column .column-link i.fa-search { + transform: scale(1); +} +.layout-single-column .column-link .fa.fa-search::before { + content: var(--icon-search); + left: 2px; +} +.layout-single-column .column-link.active .fa.fa-search::before { + content: var(--icon-search); +} +.layout-single-column .column-header__icon.fa-search { + line-height: 18px; +} +/* Local icon */ +.layout-single-column .column-link .fa-users::before { + content: var(--icon-users-column-link); +} +.layout-single-column .column-link.active .fa-users::before { + content: var(--icon-users-column-link-active); +} +/* Notifications icon */ +.layout-single-column .column-link .fa-bell::before { + content: var(--icon-bell); +} +.layout-single-column .column-link.active .fa-bell::before { + content: var(--icon-bell-active); +} +.layout-single-column .fa-bell.column-header__icon:before { + content: var(--icon-bell-active); +} +/* Direct messages icon */ +.layout-single-column .column-link .fa-at::before { + content: var(--icon-direct-messages); +} +.layout-single-column .fa-at.column-header__icon:before { + content: var(--icon-direct-messages); +} +/* Bookmarks icon */ +.layout-single-column .column-link .fa-bookmark::before { + content: var(--icon-bookmark-column-link); + background-image: none; +} +.layout-single-column .column-link.active .fa-bookmark::before { + content: var(--icon-bookmark-column-link-active); +} +.layout-single-column .fa-bookmark.column-header__icon:before { + content: var(--icon-bookmark-column-link-active); +} +/* Favorites icon */ +.layout-single-column .column-link .fa-star::before { + content: var(--icon-star-column-link); + background-image: none; +} +.layout-single-column .column-link.active .fa-star::before { + content: var(--icon-star-column-link-active); +} +.layout-single-column .fa-star.column-header__icon:before { + content: var(--icon-star-column-link-active); +} +/* Lists icon */ +.layout-single-column .column-link .fa-list-ul { + transform: scale(1); + margin-right: 8px; + margin-left: 1px; +} +.layout-single-column .column-link .fa-list-ul::before { + content: var(--icon-list); + background-image: none; +} +/* Follow Requests icon */ +.layout-single-column .column-link .fa-user-plus::before { + content: var(--icon-users-column-link); + background-image: none; +} + +/* Follow hashtag icon */ +.layout-single-column .column-header__button .column-header__icon.fa-user-plus::before { + content: var(--icon-follow-hashtag); + position: relative; + top: 2px; + right: -5px; + } + +/* Unfollow hashtag icon */ +.layout-single-column .column-header__button .column-header__icon.fa-user-times::before { + content: var(--icon-unfollow-hashtag); + position: relative; + top: 2px; + right: -5px +} + + + + +/* πŸ“ Compose panel + ---------------- */ +.layout-single-column .compose-form { + padding: 0 0 71px; +} +.layout-single-column .navigation-bar { + border-radius: 7px 7px 0 0; + background-color: var(--color-content-secondary-bg); +} +.layout-single-column .navigation-bar strong { + color: var(--color-content-fg-bold); +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions, +.layout-single-column .compose-form .autosuggest-textarea__textarea, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item, +.layout-single-column .compose-form .compose-form__buttons-wrapper, +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__modifiers { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; + border-top: 0; + border-radius: 0; +} +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, +.layout-single-column .compose-form .character-counter { + color: var(--color-fg); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + color: var(--color-accent); +} +.layout-single-column .compose-panel .autosuggest-textarea__textarea { + padding-left: 20px; + padding-top: 20px; +} +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, +.layout-single-column .compose-form .autosuggest-account .display-name__html { + color: var(--color-content-fg); +} +.layout-single-column .compose-form .autosuggest-account .display-name__account { + color: var(--color-content-fg-muted); +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { + border-radius: 7px; +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__html { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-radius: 0 0 7px 7px; +} +.layout-single-column .reply-indicator, +.layout-single-column .compose-form .compose-form__warning { + background-color: var(--color-accent-bg); + box-shadow: none; + margin: 0; + border-radius: 0; + border: 0; +} +.layout-single-column .compose-form .compose-form__warning, +.layout-single-column .simple_form .recommended, +.layout-single-column .compose-form .compose-form__warning, +.layout-single-column .compose-form .compose-form__warning a, +.layout-single-column .reply-indicator__content a, +.layout-single-column .navigation-bar__profile-edit { + color: var(--color-accent); +} +.layout-single-column .empty-column-indicator, +.layout-single-column .error-column { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { + margin-bottom: 0; +} +.layout-single-column .compose-form .spoiler-input__input { + background-color: var(--color-accent-bg); + color: var(--color-accent); + margin-bottom: 0; + border-radius: 0; +} +.layout-single-column .display-name { + color: var(--color-content-fg); +} +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { + color: #ffffff; +} +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:active, +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:focus, +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:hover { + background-color: rgba(0, 0, 0, .4); +} +@media screen and (max-width:1174px) { + .layout-single-column .compose-form { + padding: 0 10px 10px; + } + .layout-single-column .navigation-bar { + border-radius: 7px 7px 0 0; + margin: 10px 10px 0; + } +} + + + +/* πŸ’¬ Posts + -------- */ +.layout-single-column .reply-indicator__content, +.layout-single-column .status__content { + color: var(--color-content-fg); +} +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong, +.layout-single-column .status__info .status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .status { + margin-left: 56px; + padding: 0 10px; + border-bottom: 0; +} +.layout-single-column .status__wrapper { + transition: background .3s; +} +.layout-single-column .status__wrapper, +.layout-single-column .detailed-status__wrapper { + background-color: var(--color-content-bg); + padding: 13px 12px; +} +.layout-single-column .status__info { + height: 22px; + margin-left: -56px; + padding: 0; + margin-bottom: 0; + line-height: 10px; + align-items: start; +} +.layout-single-column .status__info .status__display-name { + overflow: visible; + align-items: start; + max-width: calc(100% - 4em); +} +.layout-single-column .status__info .status__display-name .display-name bdi, +.layout-single-column .status__info .status__display-name .display-name__account { + vertical-align: top; +} +.layout-single-column .status__info .status__display-name .display-name__account { + display: inline; + opacity: .7; +} +.layout-single-column .status__relative-time { + height: 22px; + position: absolute; + right: 22px; + color: var(--color-content-fg); + opacity: .7; +} +.layout-single-column .status__avatar { + margin-bottom: -10px; +} +.layout-single-column .reply-indicator__content, +.layout-single-column .status__content { + line-height: 19px; +} + +/* πŸ“ Post dividers */ +/* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ +.layout-single-column .status::before, +.layout-single-column .notification__message::before { + position: absolute; + background-color: var(--color-lines); + height: 2px; + width: calc(100% - 72px); + right: 0; + top: -2px; + content: ""; +} +/* Remove border between posts when applicable */ +.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ +.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { + display: none; +} + +/* πŸ‘₯ Threaded replies */ +.layout-single-column .status--first-in-thread { + border-top: 0; +} +.layout-single-column .status--first-in-thread::before { + position: absolute; + background-color: var(--color-lines); + height: 4px; + width: 100%; + right: 0; + top: -3px; + content: ""; +} +.layout-single-column .status--in-thread .attachment-list, +.layout-single-column .status--in-thread .audio-player, +.layout-single-column .status--in-thread .media-gallery, +.layout-single-column .status--in-thread .picture-in-picture-placeholder, +.layout-single-column .status--in-thread .status-card, +.layout-single-column .status--in-thread .status__action-bar, +.layout-single-column .status--in-thread .status__content, +.layout-single-column .status--in-thread .video-player { + margin-left: 0; +} +.layout-single-column .status--in-thread .status__line { + -webkit-border-start: 4px solid var(--color-lines); + border-inline-start: 4px solid var(--color-lines); + inset-inline-start: 43px; + position: absolute; + top: 0; + width: 0; +} +.layout-single-column .status__line--full:before { + background: var(--color-lines); + inset-inline-start: -3px; + width: 3px; +} +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} + +/* ⏺️ Posts when in focus */ +.layout-single-column .status__wrapper.focusable:focus, +.layout-single-column .detailed-status__wrapper.focusable:focus, +.layout-single-column .focusable:focus .detailed-status, +.layout-single-column .focusable:focus .detailed-status__action-bar, +.layout-single-column .status__wrapper.focusable:focus .detailed-status, +.layout-single-column .focusable:focus .detailed-status__action-bar { + outline: 0; + background: var(--color-content-bg-focus); +} +@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ + .layout-single-column .status__wrapper:has(.status__content:hover) { + background: var(--color-content-bg-focus); + } +} + +/* πŸ‘οΈ Post detailed view */ +.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ + border-top: 4px solid var(--color-lines); + border-bottom: 4px solid var(--color-lines); +} +.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Disable top divider when the detailed post in first in column */ + border-top: 0; +} +.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Disabled bottom divider when the detailed post is last in column */ + border-bottom: 0; +} +.layout-single-column .detailed-status .status__content { + line-height: 24px; +} +.layout-single-column .detailed-status, +.layout-single-column .detailed-status__action-bar { + background-color: var(--color-content-bg); + border: 0; +} +.detailed-status__display-name strong, +.detailed-status__display-name .display-name__account { + color: var(--color-content-fg-bold); +} +.detailed-status__display-name .display-name__account{ + opacity: .7; +} +.layout-single-column .detailed-status__meta { + color: var(--color-fg); + opacity: .8; +} +.layout-single-column .detailed-status__action-bar { + padding: 0; +} +.layout-single-column .animated-number { + color: var(--color-content-fg); +} + +.layout-single-column article > .account { + padding: 16px; +} + +/* ⭐ Action bar */ +.layout-single-column .status__action-bar { + justify-content: left; + margin-top: 8px; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .status__action-bar { + opacity: .7; + } +} +.layout-single-column .status__action-bar .status__action-bar__dropdown { + position: absolute; + right: 18px; +} +.layout-single-column .status__action-bar .icon-button, +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 32px !important; + height: 32px !important; + border-radius: 30px; + position: relative; +} +.layout-single-column .status__action-bar i.fa-star:before, +.layout-single-column .status__action-bar i.fa-bookmark:before, +.layout-single-column .status__action-bar i.fa-share-alt:before, +.layout-single-column .detailed-status__action-bar i.fa-star:before, +.layout-single-column .detailed-status__action-bar i.fa-bookmark:before, +.layout-single-column .detailed-status__action-bar i.fa-share-alt:before { + height: 32px; +} +.layout-single-column .icon-button.star-icon.active, +.layout-single-column .notification__favourite-icon-wrapper .star-icon { + color: #ffb609; +} +.layout-single-column .status__prepend { + font-weight: bold; + padding-top: 2px; + padding-left: 0; + padding-right: 0; + height: 25px; + color: var(--color-content-fg); +} +.layout-single-column .status__prepend-icon-wrapper { + width: 56px; + text-align: right; +} +.layout-single-column .status-card, +.layout-single-column .status-card.compact { + background-color: var(--color-content-secondary-bg); + border: none; + box-shadow: + 0 1px 4px rgba(0, 0, 0, .08); +} +.layout-single-column .status-card__title, +.layout-single-column .status-card__host, +.layout-single-column .status-card__description { + color: var(--color-content-fg-bold); +} +.layout-single-column .status-card__description { + opacity: .7; +} +.layout-single-column .status-card__host { + opacity: .5; +} +.layout-single-column a.status-card:hover, +.layout-single-column a.status-card.compact:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .status-card__image { + background: var(--color-accent-bg); +} +.layout-single-column .status-card__image > .fa { + color: var(--color-accent); +} +.layout-single-column .status__content p { + margin-bottom: 12px; +} +.layout-single-column .status__content p:last-child { + margin-bottom: 0; +} +.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { + margin-bottom: 1px; +} +.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { + font-weight: bold; +} +.layout-single-column .media-gallery { + border-radius: 8px; +} +.layout-single-column .icon-button.overlayed { + background-color: #ffffff; + color: #444b5d; + opacity: .6; + transition: opacity .3s; +} +.layout-single-column .icon-button.overlayed:hover { + background-color: #ffffff; + color: #444b5d; + opacity: 1; +} +.layout-single-column .status__wrapper--filtered__button { + color: var(--color-accent); +} +.layout-single-column .status__wrapper--filtered { + border-bottom: 0; + padding: 12px; +} + +/* πŸ“Š Polls */ +.layout-single-column .poll__chart, +.layout-single-column .muted .poll__chart.leading { + background: var(--color-accent); + opacity: .4; + height: 12px; + border-radius: 10px; +} +.layout-single-column .poll__chart.leading, +.layout-single-column .muted .poll__chart.leading { + opacity: 1; +} +.layout-single-column .poll__footer { + color: var(--color-content-fg); +} +.layout-single-column .poll__link { + color: var(--color-accent); + text-decoration: none; +} +.layout-single-column .poll__input { + border: 2px solid var(--color-content-fg); +} +.layout-single-column .poll__input:hover { + border-color: var(--color-accent); + background-color: var(--color-accent-bg); +} +.layout-single-column .poll__input.active, +.layout-single-column .poll__input:active, +.layout-single-column .poll__input:focus { + background-color: var(--color-accent); +} +.layout-single-column .poll__input.active { + border-color: var(--color-accent); +} +.layout-single-column .poll__footer .button.button-secondary { + padding: 0 16px; +} +.layout-single-column .poll__footer .button.button-secondary:hover { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +/* Poll composer */ +.layout-single-column .compose-form__poll-wrapper, +.layout-single-column .compose-form__poll-wrapper .poll__footer { + border-top: 0; +} +.layout-single-column .compose-form__poll-wrapper ul { + background-color: var(--color-accent-bg); +} +.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { + box-shadow: 0 0 0 2px var(--color-accent); +} +.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { + padding: 6px 16px; +} + + + +/* Empty columns */ +.layout-single-column .empty-column-indicator { + background-color: var(--color-content-secondary-bg); + color: var(--color-content-fg); + border-radius: 7px; + contain: content; +} +.layout-single-column .empty-column-indicator a { + color: var(--color-accent); +} + +/* Timeline hint */ +.layout-single-column .timeline-hint { + background-color: var(--color-content-secondary-bg); + color: var(--color-content-fg); +} +.layout-single-column .timeline-hint a { + color: var(--color-accent); +} + + + +/* πŸ“€ DMs */ +.layout-single-column .follow_requests-unlocked_explanation { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .follow_requests-unlocked_explanation a { + color: var(--color-accent); +} +.layout-single-column .conversation__unread { + background-color: var(--color-accent); +} +.layout-single-column .conversation.conversation--unread { + background-color: var(--color-content-bg-focus); +} +.layout-single-column .conversation__unread { + color: var(--color-accent-fg); +} +.layout-single-column .conversation__content__names a strong { + font-weight: bold; +} +.layout-single-column .conversation__content__names, +.layout-single-column .conversation__content__names a, +.layout-single-column .conversation__content__relative-time, +.layout-single-column .conversation .attachment-list__list a, +.layout-single-column .conversation .attachment-list.compact .fa, +.layout-single-column .conversation .status__content p { + color: var(--color-content-fg); +} +.layout-single-column .conversation { + background-color: var(--color-content-bg); + border-bottom: 3px solid var(--color-content-secondary-separator); +} +.layout-single-column .conversation__content__relative-time { + opacity: .7; +} + + + +/* ⏺️ Column headers + ----------------- */ +.layout-single-column .tabs-bar__wrapper { + background-color: transparent; + border-radius: 7px 7px 0 0; + box-shadow: + inset 0 10px var(--color-bg), + 0 -30px var(--color-bg); +} +.layout-single-column .column-header { + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; + border-radius: 7px; + font-weight: bold; + margin-bottom: 10px; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} +.layout-single-column .column-header__wrapper.active:before { + background: none; + opacity: 40%; +} +.layout-single-column .column-header__wrapper.active { + box-shadow: 0 0; +} +.layout-single-column .column-header.active .column-header__icon { + color: var(--color-accent); + text-shadow: none; +} +.layout-single-column .column-header__button.active, +.layout-single-column .column-header__button.active:hover, +.layout-single-column .column-header__button:hover { + color: var(--color-accent); + background-color: var(--color-accent-bg); +} +.layout-single-column .load-gap, +.layout-single-column .load-more { + background-color: var(--color-accent-bg); + color: var(--color-accent); + border-bottom: 0; +} +.layout-single-column .load-gap:hover, +.layout-single-column .load-more:hover { + opacity: .6; +} +.layout-single-column .column-header__collapsible { + border-bottom: 0; + border-radius: 7px; +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + margin-bottom: 10px; +} +.layout-single-column .column-header__collapsible-inner { + background: var(--color-secondary-bg); + border: 0; +} +.layout-single-column .column-settings__section { + color: var(--color-content-fg-bold); +} +.layout-single-column .setting-toggle__label { + color: var(--color-content-fg); +} +.layout-single-column .column-header > button { + padding: 0 0 0 15px; + line-height: 48px; + font-weight: bold; +} +.layout-single-column .column-header__icon { + vertical-align: middle; + display: inline-block; + margin-right: 8px; + transform: scale(.8); + line-height: 23px; +} +@media screen and (max-width:1174px) { + .layout-single-column .ui__header { + background-color: transparent; + border-bottom: 0; + } + .layout-single-column .ui__header__logo { + margin-left: 3px; + } + .layout-single-column .tabs-bar__wrapper { + box-shadow: none; + display: none; + margin-bottom: 0; + border-radius: 0; + height: 55px; + } + .layout-single-column .columns-area--mobile { + border-radius: 7px; + } + .layout-single-column .column-header, + .layout-single-column .column-back-button, + .layout-single-column .column-header__button, + .layout-single-column .column-header__back-button { + background-color: transparent; + height: 55px; + } + .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + background-color: rgba(242, 239, 245, .75); + content: ""; + height: 55px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 1; + } + .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, + .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + height: 110px; + } + .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + display: block; + } + .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + margin-top: -10px; + } +} +@media (prefers-color-scheme: dark) { + @media screen and (max-width:1174px) { + .layout-single-column .ui::after { + background-color: rgb(0, 0, 0, .7); + } + } +} + + + +/* ⏺️ Horizontal selectors + (used to navigate subsections on the Explore, Live Feeds and Account pages) */ +.layout-single-column .account__section-headline, +.layout-single-column .notification__filter-bar { + background: var(--color-accent-bg); + border: 0; + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .account__section-headline a, +.layout-single-column .account__section-headline button, +.layout-single-column .notification__filter-bar a, +.layout-single-column .notification__filter-bar button { + background-color: var(--color-accent-bg); + color: var(--color-accent); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; + border-radius: 9px; + transition: all .2s; +} +.layout-single-column .account__section-headline a:hover, +.layout-single-column .account__section-headline button:hover, +.layout-single-column .notification__filter-bar a:hover, +.layout-single-column .notification__filter-bar button:hover { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; +} +.layout-single-column .account__section-headline a.active, +.layout-single-column .account__section-headline button.active, +.layout-single-column .notification__filter-bar a.active, +.layout-single-column .notification__filter-bar button.active { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; +} +.layout-single-column .account__section-headline a.active:after, +.layout-single-column .account__section-headline a.active:before, +.layout-single-column .account__section-headline button.active:after, +.layout-single-column .account__section-headline button.active:before, +.layout-single-column .notification__filter-bar a.active:after, +.layout-single-column .notification__filter-bar a.active:before, +.layout-single-column .notification__filter-bar button.active:after, +.layout-single-column .notification__filter-bar button.active:before { + display: none; +} +.layout-single-column .account__section-headline button, +.layout-single-column .notification__filter-bar button { + background-color: transparent; +} +.layout-single-column .account__section-headline a::after, +.layout-single-column .account__section-headline button::after { + display: block; + position: absolute; + content: " "; + width: 2px; + background-color: var(--color-accent); + top: 8px; + right: -2px; + bottom: 8px; + opacity: .1; + border-radius: 50px; + z-index: 1; +} +.layout-single-column .account__section-headline a:last-child::after, +.layout-single-column .account__section-headline button:last-child::after { + display: none; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .account__section-headline a.active, + .layout-single-column .account__section-headline button.active, + .layout-single-column .notification__filter-bar a.active, + .layout-single-column .notification__filter-bar button.active { + background-color: var(--color-bg); + } +} + + + +/* πŸ“ Navigation panel + ------------------- */ +.layout-single-column .column-link--transparent { + color: var(--color-fg); +} +.layout-single-column .column-link--logo { + margin-left: 4px; +} + +.layout-single-column .column-link.column-link--logo, +.layout-single-column .ui__header__logo { + display: inline-flex; + padding: 0; + width: 50px; + height: 50px; + background-image: var(--logo); + background-repeat: no-repeat; + background-position: center; + background-size: 32px auto; +} +.layout-single-column .column-link.column-link--logo svg, +.layout-single-column .ui__header__logo svg { + display: none; +} + +.layout-single-column .navigation-panel__logo { + margin-bottom: 10px; +} +.layout-single-column .column-link:not(.column-link--logo) { + padding: 10px 20px 11px 13px; + width: max-content; + margin-left: 3px; + font-weight: 500; + transition: all .2s; +} +.layout-single-column a.column-link--transparent.active, +.layout-single-column a.column-link--transparent.active:hover { + background-color: var(--color-content-bg); + border-radius: 8px; + color: var(--color-content-fg); + font-weight: bold; +} +.layout-single-column .column-link--transparent:hover { + background-color: var(--color-accent-bg); + border-radius: 8px; + padding-right: 20px; +} +.layout-single-column .icon-with-badge__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 20px; + top: -4px; + font-weight: bold; + border: 0; +} +.layout-single-column .compose-panel hr, .navigation-panel hr { + display: none; +} +.layout-single-column .list-panel { + padding: 8px 9px 8px 7px; + margin: 5px 0 5px; + border-radius: 9px; + background-color: var(--color-secondary-bg); +} +.layout-single-column .list-panel .column-link { + width: auto; + position: relative; + padding: 12px 13px; + overflow: visible; +} +.layout-single-column .list-panel .column-link:not(:last-child,:hover,.active)::after { + display: block; + content: " "; + height: 2px; + bottom: -2px; + right: 15px; + background-color: var(--color-secondary-separator); + left: 15px; + position: absolute; +} +.layout-single-column .list-panel i.fa { + display: none; +} +.layout-single-column .column-link__icon { + transform: scale(.8); + vertical-align: middle; + margin-right: 9px; +} +.layout-single-column .column-link span { + vertical-align: middle; +} +.layout-single-column .column-link .fa::before { + position: relative; + top: 1px; +} +@media screen and (max-width:1174px) { + .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + width: 100vw; + height: calc(4.2em + env(safe-area-inset-bottom)); + bottom: 0; + left: 0; + z-index: 3; + } + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + width: 100vw; + height: 4.2em; + padding-bottom: env(safe-area-inset-bottom); + flex-direction: row; + overflow-x: auto; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + background-color: rgba(255, 255, 255, 0.5); + border-left: 0; + } + .layout-single-column .navigation-panel .column-link, + .layout-single-column .navigation-panel .navigation-panel__legal, + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column .column-link--transparent:hover { + flex: 0 0 18vw; + margin: 6px 0 7px; + padding: 4px 0 3px; + border-radius: 0; + justify-content: center; + display: inline-flex; + align-items: center; + box-sizing: border-box; + background-color: transparent; + } + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column a.column-link--transparent:active { + margin: 6px 0 7px; + padding: 4px 0 3px; + border-radius: 7px; + box-shadow: 0 0 6px rgba(0, 0, 0, .1); + background-color: var(--color-content-bg); + } + .layout-single-column .column-link__icon { + transform: scale(1); + margin: 0; + } + .layout-single-column .column-link span { + padding-left: .5em; + } + .layout-single-column .columns-area__panels__main { + width: calc(100% - 285px); + margin-left: -285px; + } + .layout-single-column .columns-area__panels { + padding-bottom: 6em; + } + .layout-single-column .columns-area__panels .navigation-panel__legal { + margin: 0; + padding: 0; + } + .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + height: calc(100% - 13px); + box-sizing: border-box; + } +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main { + width: 100%; + margin-left: -55px; + } +} +@media (prefers-color-scheme: dark) { + @media screen and (max-width:1174px) { + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + background-color: rgba(24, 24, 25, 0.7); + border: 0; + } + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column a.column-link--transparent:active { + background-color: var(--color-bg); + } + } +} + + + +/* πŸ‘€ Account view + --------------- */ +.layout-single-column .account__header { + border-radius: 7px; + margin-bottom: 10px; + background-color: var(--color-content-bg); +} +.layout-single-column .account__header__image { + height: 150px; + background-color: var(--color-secondary-bg); + border-bottom: 0; +} +.layout-single-column .account__header__bar { + border: 0; +} +.layout-single-column .account__header__bar .avatar .account__avatar { + border-radius: 50%; + border-width: 5px; + width: 100px !important; + height: 100px !important; + background-color: var(--color-content-bg); + border-color: var(--color-content-bg); +} +.layout-single-column .account__header__tabs__name h1, +.layout-single-column .account__header__tabs__name h1 small { + color: var(--color-content-fg-bold); +} +.layout-single-column .account__header__tabs__name h1 small { + opacity: .7; +} +.layout-single-column .account__section-headline { + margin-bottom: 10px; +} +.layout-single-column .account__header__content a { + color: var(--color-accent); + text-decoration: none; +} +.layout-single-column .account__header__content a:hover { + text-decoration: underline; +} +.layout-single-column .account__header__extra__links a strong { + color: var(--color-content-fg-bold); +} +.layout-single-column .account__header__account-note label { + margin-bottom: 0; +} +.layout-single-column .account__header__account-note label, +.layout-single-column .account__header__account-note textarea::placeholder { + color: var(--color-content-fg-bold); + opacity: .5; +} +.layout-single-column .account__header__account-note textarea { + color: var(--color-content-fg); +} +.layout-single-column .account__header__account-note textarea:focus { + background-color: var(--color-accent-bg); +} +.layout-single-column .account__header__extra__links a, +.layout-single-column .account__header__bio .account__header__content, +.layout-single-column .account__header__bio .account__header__fields dd { + color: var(--color-content-fg); +} +.layout-single-column .account__header__bio .account__header__fields { + background-color: var(--color-content-secondary-bg); + border-radius: 7px; +} +.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { + display: none; +} +.layout-single-column .account__header__bio .account__header__fields dt { + font-weight: bold; + font-size: 12px; +} +.layout-single-column .account__header__bio .account__header__fields dl, +.layout-single-column .account__header__bio .account__header__fields .verified { + border-bottom: 0; + position: relative; +} +.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { + display: block; + content: " "; + height: 2px; + bottom: -1px; + right: 15px; + background-color: var(--color-content-secondary-separator); + left: 15px; + position: absolute; + border-radius: 50px; +} +.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ + border-top-left-radius: 7px; + border-top-right-radius: 7px; + margin-top: 0; +} +.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ + margin-top: 0; + border-top-width: 0; +} +.layout-single-column .account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd { /* Verified field tweak: vivid green text */ + color: var(--color-accent); +} +.layout-single-column .account__header__bio .account__header__fields .verified dt, +.layout-single-column .account__header__bio .account__header__fields dt { /* Verified field tweak: restore default field title color */ + color: var(--color-content-fg); +} +.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ + border-top: 0; + border-right: 0; + border-left: 0; + background: none; +} +.layout-single-column .account__header__extra .account__header__fields .verified dd span:first-child { /* Verified field tweak: adding a green background circle to the checkmark icon */ + display: inline-block; + background-color: var(--color-accent); + border-radius: 50px; + width: 1.2em; + height: 1.2em; + line-height: 1.2; + text-align: center; + margin-right: 2px; +} +.layout-single-column .account__header__extra .account__header__fields .verified dd span:first-child i { /* white checkmark */ + color: #fff; + font-size: 85%; + transform: scale(.9); +} +.layout-single-column .account__header__bio .account__header__fields .verified:last-child { + border-bottom: 0; +} +.layout-single-column .account-timeline__header + article .status__wrapper, +.layout-single-column .account-timeline__header + article .account { /* rounded corners on first post below account header + on first account in followings/followers list */ + border-radius: 7px 7px 0 0; +} + +.layout-single-column .follow-request-banner, +.layout-single-column .moved-account-banner { + background-color: var(--color-accent-bg); +} +.layout-single-column .moved-account-banner { + margin-bottom: 10px; + border-radius: 7px; +} +.layout-single-column .follow-request-banner__message, +.layout-single-column .moved-account-banner__message { + color: var(--color-content-fg); +} +.layout-single-column .moved-account-banner__message { + font-weight: bold; +} + + +/* ✨ Explore tab + -------------- */ +.layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { + border-radius: 7px 7px 0 0; +} +.layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { + color: var(--color-verified); +} +.layout-single-column .icon-button.active .fa.fa-star + .icon-button__counter .animated-number { + color: #ca8f04; +} + +/* #️⃣ Trending hashtags */ +.layout-single-column .trends__item__sparkline path:last-child { + stroke: var(--color-accent) !important; +} +.layout-single-column .trends__item__sparkline path:first-child { + fill: var(--color-accent) !important; + opacity: 20%; +} +.layout-single-column .explore__links { + background-color: var(--color-content-bg); + border-radius: 7px; + overflow: hidden; +} +.layout-single-column .columns-area__panels__main .trends__item { + background-color: var(--color-content-bg); + border-bottom: 2px solid var(--color-content-secondary-bg); +} +.layout-single-column .explore__links .trends__item:last-child { + border-bottom: 0; +} +.layout-single-column .trends__item__name, +.layout-single-column .trends__item__name a { + color: var(--color-content-fg); +} +.getting-started__trends .trends__item__current { + color: var(--color-fg); +} +.layout-single-column .scrollable .account-card { + margin: 0 0 10px; + background-color: var(--color-content-bg); + border-radius: 7px; +} +.layout-single-column .account-card__header { + padding: 0; + border-radius: 7px 7px 0 0; + height: 128px; + overflow: hidden; +} +.layout-single-column .scrollable .account-card__bio:after { + background: linear-gradient(270deg, var(--color-content-bg), transparent); +} +.layout-single-column .account-card__title__avatar .account__avatar { + border: 0; + border-radius: 50%; + overflow: visible; +} +.layout-single-column .account-card__title__avatar img { + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 3px var(--color-content-bg); +} + +/* Account recommendations (For You Tab + User directory */ +.layout-single-column .scrollable .account-card { + margin: 0 0 10px; + background-color: var(--color-content-bg); + border-radius: 7px; +} +.layout-single-column .account-card__header { + padding: 0; + border-radius: 7px 7px 0 0; + height: 128px; + overflow: hidden; +} +.layout-single-column .scrollable .account-card__bio:after { + background: linear-gradient(270deg, var(--color-content-bg), transparent); +} +.layout-single-column .account-card__title__avatar .account__avatar { + border: 0; + border-radius: 50%; + overflow: visible; +} +.layout-single-column .account-card__title__avatar img { + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 3px var(--color-content-bg); +} +.layout-single-column .account-card__title .display-name bdi, +.layout-single-column .account-card__counters__item, +.layout-single-column .account-card__counters__item small { + color: var(--color-content-fg-bold); +} +.layout-single-column .account-card__counters__item small { + opacity: .7; +} +.layout-single-column .account-card__bio a { + color: var(--color-accent); +} +.layout-single-column .filter-form { + background-color: var(--color-accent-bg); + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .filter-form__column { + padding: 10px 15px; +} + +/* πŸ“° Trending stories */ +.layout-single-column .story { + background-color: var(--color-content-bg); +} +.layout-single-column .story:not(:last-child) { + border-bottom: 2px solid var(--color-content-secondary-separator); +} +.layout-single-column .story, +.layout-single-column .story__details__title { + color: var(--color-content-fg); +} +.layout-single-column .story:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .story__details__publisher, +.layout-single-column .story__details__shared { + color: var(--color-fg); +} + +/* πŸ” Search field and search results */ +.layout-single-column .search { + margin-bottom: 10px; +} +.layout-single-column .search__input { + border-radius: 7px; + background-color: var(--color-accent-bg); + color: var(--color-content-fg); + border: none; +} +.layout-single-column .search__input::placeholder, +.layout-single-column .compose-form .spoiler-input__input::placeholder { + font-weight: 500; + color: var(--color-accent); +} +.layout-single-column .search__input:focus { + box-shadow: inset 0 0 0 2px var(--color-accent); +} +.layout-single-column .compose-panel .fa-search, +.layout-single-column .compose-panel .fa.active { + opacity: 1; + right: 15px; + top: 15px; +} +.layout-single-column .compose-panel .fa-times-circle.active { + top: 16px; +} +.layout-single-column .compose-panel .fa-search::before { + content: " "; +} +.layout-single-column .compose-panel .fa-search.active::before, +.layout-single-column .fa-search.column-header__icon::before { + content: var(--icon-search); +} +.layout-single-column .explore__search-results { + background-color: var(--color-content-bg); + border-radius: 7px; + overflow: hidden; +} +.layout-single-column .explore__search-header { + background-color: transparent; +} +.layout-single-column .explore__search-results .account { + padding-top: 16px; +} +.layout-single-column .account .account__details > span { + color: var(--color-content-fg); +} +.layout-single-column .account .account__details .verified-badge { + color: var(--color-accent); +} +.layout-single-column .search__popout { + background-color: var(--color-content-bg); + border-radius: 7px; + box-shadow: 0 4px 6px rgba(0,0,0,.1); + margin-top: 5px; +} +.layout-single-column .search__popout h4, +.layout-single-column .search__popout__menu__message, +.layout-single-column .search__popout__menu__item { + color: var(--color-content-fg); +} +.layout-single-column .search__popout__menu__item mark { + color: var(--color-content-fg-bold); +} +.search__popout__menu__item.selected, +.search__popout__menu__item:active, +.search__popout__menu__item:focus, +.search__popout__menu__item:hover, +.search__popout__menu__item.selected mark, +.search__popout__menu__item:active mark, +.search__popout__menu__item:focus mark, +.search__popout__menu__item:hover mark { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +@media screen and (max-width:1174px) { + .layout-single-column .search { + margin-bottom: 0; + } + .layout-single-column .explore__search-header { + padding-top: 2px; + } + .layout-single-column .search__input { + padding: 13px; + } + .layout-single-column i.fa-search, + .layout-single-column i.fa.active { + transform: scale(1); + top: 13px; + } + .layout-single-column .explore__search-header { + padding: 0 0 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } + .layout-single-column .explore__search-header { + padding: 10px; + } +} +.layout-single-column .dismissable-banner { + background-color: var(--color-accent); + box-shadow: 0 5px var(--color-content-bg); + border-radius: 7px 7px 0 0; + border: 0; + margin: 0; +} +.layout-single-column .dismissable-banner__message, +.layout-single-column .dismissable-banner__action .icon-button { + color: var(--color-accent-fg); +} + + + +/* πŸ”” Notifications + ---------------- */ +.layout-single-column .status.muted .status__content, +.layout-single-column .status.muted .status__content a, +.layout-single-column .status.muted .status__content p, +.layout-single-column .status.muted .status__display-name strong, +.layout-single-column .attachment-list__list a, +.layout-single-column .attachment-list.compact .fa { + color: var(--color-content-fg-muted); +} +.layout-single-column .notification.unread::before, +.layout-single-column .status__wrapper.unread::before { + background-color: var(--color-accent); + width: 7px; + border: 0; + top: 5px; + height: auto; + bottom: 5px; + border-radius: 8px; + left: 5px; + z-index: 1; +} +.layout-single-column .notification__message { + padding: 12px 12px 0; + background-color: var(--color-content-bg); + color: var(--color-content-fg-bold); +} +.layout-single-column .notification__message .fa { + color: var(--color-accent); +} +.layout-single-column .notification__favourite-icon-wrapper { + width: 56px; + text-align: right; +} +.layout-single-column .notification__favourite-icon-wrapper i.fa-star { + font-size: 15px; +} +.layout-single-column .notification__favourite-icon-wrapper i.fa-star:before { + line-height: 24px; +} +.layout-single-column .notification .status__wrapper { + padding-top: 0; +} +.layout-single-column .notification-favourite .status__action-bar, +.layout-single-column .notification-reblog .status__action-bar, +.layout-single-column .notification-poll .status__action-bar, +.layout-single-column .notification-status .status__action-bar { + display: none; +} +.layout-single-column .account { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-left: 22px; + padding-top: 4px; +} +.layout-single-column .explore__search-results .account { + padding-top: 16px; +} + + + +/* πŸ“‹ Lists tab */ +.layout-single-column .column-inline-form { + background-color: var(--color-accent-bg); + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .column-inline-form label input, +.layout-single-column .column-inline-form label input:focus { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-radius: 7px; +} +.layout-single-column .column-inline-form label input:focus { + box-shadow: 0 0 0 2px var(--color-accent); +} +.layout-single-column .column-subheading, +.layout-single-column .columns-area__panels__main .column-link { + background-color: var(--color-content-bg); + color: var(--color-fg); +} +.layout-single-column .column-subheading { + color: var(--color-fg-muted); +} +.layout-single-column .columns-area__panels__main .column-link { + margin-left: 0; + width: 100%; + border-bottom: 2px solid var(--color-content-secondary-separator); + box-sizing: border-box; +} +.layout-single-column .columns-area__panels__main .column-link:hover { + background-color: var(--color-content-secondary-bg); + color: var(--color-accent); +} +.layout-single-column .columns-area__panels__main article:last-child .column-link { + border: 0; +} + +/* List adder dialog */ +.layout-single-column .list-adder, +.layout-single-column .list-adder__account, +.layout-single-column .list-adder__lists { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .list-adder__account { + margin-top: 12px; +} +.layout-single-column .list-adder .column-inline-form { + border-radius: 0; +} +.list-adder .list { + border-bottom: 2px solid var(--color-content-secondary-separator); +} + + +/* βž• Follow requests */ +.layout-single-column #Follow-requests { + margin-bottom: 0; + z-index: 0; +} +.layout-single-column .account-authorize__wrapper { + margin: 10px 0; +} +.layout-single-column .account-authorize { + background-color: var(--color-content-bg); + border-radius: 7px 7px 0 0; + padding: 20px +} +.layout-single-column .account--panel { + background-color: var(--color-accent-bg); + border: 0; + border-radius: 0 0 7px 7px; +} +.layout-single-column .account__header__content { + color: var(--color-content-fg); +} +.layout-single-column .account--panel__button:first-child .icon-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + position: absolute; + right: 0; + margin: 0; + width: auto; + padding: 12px; + } +} + + +/* ⏺️ Other UI components : buttons, toggles, ... + ----------------------------------------- */ +.layout-single-column .button, +.layout-single-column .account__header__tabs__buttons .icon-button { + border-radius: 7px; +} +.layout-single-column .button, +.layout-single-column .button.logo-button, +.layout-single-column .rules-list li:before, +.layout-single-column .icon-with-badge__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + transition: all .2s; +} +.layout-single-column .text-icon-button.active, +.layout-single-column .button.button-tertiary, +.layout-single-column .account__header__fields a, +.layout-single-column .account__header__bio .account__header__fields a, +.layout-single-column .reply-indicator__content a.unhandled-link, +.layout-single-column .status__content a, +.layout-single-column .status__content a.hashtag, +.layout-single-column .status__content a.unhandled-link, +.layout-single-column .column-back-button, +.layout-single-column .about__section__title, +.layout-single-column .prose a, +.layout-single-column .column-link--transparent.active, +.layout-single-column .column-header > .column-header__back-button, +.layout-single-column .column-header__back-button, +.layout-single-column .interaction-modal__icon, +.layout-single-column .status__content a.mention, +.layout-single-column .status__content__read-more-button, +.layout-single-column .status__action-bar__dropdown .icon-button.active, +.layout-single-column .account__relationship .icon-button.active, +.layout-single-column .account__header__tabs__buttons .icon-button.active, +.layout-single-column .text-btn, +.layout-single-column .detailed-status__action-bar-dropdown .icon-button { + color: var(--color-accent); +} +.layout-single-column .icon-button, +.layout-single-column .icon-button.inverted, +.layout-single-column .reply-indicator__content .status__content__spoiler-link, +.layout-single-column .status__content .status__content__spoiler-link { + color: var(--color-content-fg); +} +.layout-single-column .reply-indicator__content .status__content__spoiler-link, +.layout-single-column .status__content .status__content__spoiler-link { + background-color: var(--color-accent-bg); +} +.layout-single-column .account__header__tabs__buttons .icon-button { + padding: 3px; + border: 0; + color: var(--color-content-fg); + background-color: var(--color-content-secondary-bg); +} +.layout-single-column .account__header__tabs__buttons .icon-button:hover { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .icon-button:active, +.layout-single-column .icon-button:focus, +.layout-single-column .icon-button:hover { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .language-dropdown__dropdown__results__item.active, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover { + background-color: var(--color-accent); +} +.layout-single-column .button:not(.button-secondary):active, +.layout-single-column .button:not(.button-secondary):focus, +.layout-single-column .button:not(.button-secondary):hover, +.layout-single-column .button.button-tertiary:active, +.layout-single-column .button.button-tertiary:focus, +.layout-single-column .button.button-tertiary:hover, +.layout-single-column .button.logo-button:active, +.layout-single-column .button.logo-button:focus, +.layout-single-column .button.logo-button:hover { + background-color: var(--color-accent-focus); +} + +/* ⏺️ Toggles */ +.layout-single-column .setting-toggle__label { + vertical-align: top; +} +.layout-single-column .react-toggle-track { + background-color: var(--color-content-fg-muted); +} +.layout-single-column .react-toggle-thumb { + border: 0; +} +.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, +.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent); +} +.layout-single-column .react-toggle--checked .react-toggle-thumb { + border-color: var(--color-accent); +} + + +/* ⏺️ Radio buttons */ +.layout-single-column .radio-button { + color: var(--color-content-fg); +} +.layout-single-column .radio-button__input { + border-width: 2px; + border-color: var(--color-content-fg-muted); + background-color: var(--color-content-bg); +} +.layout-single-column .radio-button__input.checked { + border-color: var(--color-accent); + background-color: var(--color-accent); +} + + +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__arrow:before { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; +} +.layout-single-column .dropdown-menu__item a:active, +.layout-single-column .dropdown-menu__item a:focus, +.layout-single-column .dropdown-menu__item a:hover, +.layout-single-column .dropdown-menu__item button:active, +.layout-single-column .dropdown-menu__item button:focus, +.layout-single-column .dropdown-menu__item button:hover { + background: var(--color-accent); + color: var(--color-accent-fg); + outline: 0; +} +.layout-single-column .dropdown-menu__separator { + border-color: var(--color-content-secondary-separator); +} + +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active, +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value, +.layout-single-column .privacy-dropdown__option.active, +.layout-single-column .privacy-dropdown__option.active:hover, +.layout-single-column .privacy-dropdown__option:hover { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, +.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.layout-single-column .privacy-dropdown .icon-button.inverted.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +.layout-single-column .button.button-tertiary.button--confirmation, +.layout-single-column .button.button-tertiary.button--destructive { + background-color: transparent; +} +.layout-single-column .button.button-tertiary.button--confirmation { + color: #4e8a6b; + background-color: rgba(121, 189, 154, 0.3); +} +.layout-single-column .button.button-tertiary.button--destructive { + color: #df405a; + background-color: rgba(223, 64, 90, 0.3); +} +.layout-single-column .button.button-tertiary.button--confirmation:active, +.layout-single-column .button.button-tertiary.button--confirmation:focus, +.layout-single-column .button.button-tertiary.button--confirmation:hover { + background-color: #79bd9a; + color: #ffffff; +} +.layout-single-column .button.button-tertiary.button--destructive:active, +.layout-single-column .button.button-tertiary.button--destructive:focus, +.layout-single-column .button.button-tertiary.button--destructive:hover { + background-color: #df405a; + color: #ffffff; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .button.button-tertiary.button--confirmation { + color: #72cb9d; + } + .layout-single-column .button.button-tertiary.button--destructive { + color: #f3637b; + } +} +.layout-single-column .app-body .block-modal__cancel-button, +.layout-single-column .app-body .confirmation-modal__cancel-button, +.layout-single-column .app-body .confirmation-modal__secondary-button, +.layout-single-column .app-body .mute-modal__cancel-button { + background-color: transparent; +} +.layout-single-column .status__content a.hashtag { + color: var(--color-accent); +} + + + +/* πŸ–±οΈ Interaction modals + --------------------- */ +.layout-single-column .interaction-modal { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .interaction-modal, +.layout-single-column .interaction-modal__lead h3 { + color: var(--color-content-fg); +} +.layout-single-column .interaction-modal__lead p, +.layout-single-column .interaction-modal__choices__choice p { + color: var(--color-fg); +} +.layout-single-column .interaction-modal .button, +.layout-single-column .interaction-modal .button.button-tertiary { + padding: 10px 18px; +} +.layout-single-column .interaction-modal .button.button-tertiary:hover { + background-color: var(--color-content-secondary-separator); +} +.layout-single-column .copypaste input { + border-color: var(--color-accent); + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .interaction-modal .copypaste button { + padding: 7px 18px; +} +.layout-single-column .modal-root__overlay { + background-color: hsla(0, 0%, 1%, 0.7); +} +.layout-single-column .modal-root__modal, +.layout-single-column .boost-modal__container, +.layout-single-column .mute-modal__container, +.layout-single-column .block-modal__container { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .boost-modal__container { + margin-bottom: -11px; +} +.layout-single-column .confirmation-modal__container, +.layout-single-column .mute-modal__container, +.layout-single-column .block-modal__container { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .block-modal__action-bar, +.layout-single-column .boost-modal__action-bar, +.layout-single-column .confirmation-modal__action-bar, +.layout-single-column .mute-modal__action-bar { + background-color: var(--color-accent-bg); +} +.layout-single-column .block-modal__action-bar > div, +.layout-single-column .boost-modal__action-bar > div, +.layout-single-column .confirmation-modal__action-bar > div, +.layout-single-column .mute-modal__action-bar > div, +.layout-single-column .boost-modal__container .status__content__text, +.layout-single-column .boost-modal__container .display-name strong.display-name__html, +.layout-single-column .boost-modal__container .status__info, +.layout-single-column .boost-modal__container .status__relative-time time, +.layout-single-column .boost-modal__container .status.light .status__visibility-icon { + color: var(--color-content-fg); +} +.layout-single-column .actions-modal ul li:not(:empty) a { + color: var(--color-content-fg); +} +.layout-single-column .actions-modal ul li:not(:empty) a.active, +.layout-single-column .actions-modal ul li:not(:empty) a.active button, +.layout-single-column .actions-modal ul li:not(:empty) a:active, +.layout-single-column .actions-modal ul li:not(:empty) a:active button, +.layout-single-column .actions-modal ul li:not(:empty) a:focus, +.layout-single-column .actions-modal ul li:not(:empty) a:focus button, +.layout-single-column .actions-modal ul li:not(:empty) a:hover, +.layout-single-column .actions-modal ul li:not(:empty) a:hover button { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +/* πŸ–ΌοΈ Picture in Picture */ +.layout-single-column .picture-in-picture { + box-shadow: 0 0 5px rgba(0, 0, 0, .2); + border-radius: 7px; +} +.layout-single-column .picture-in-picture__footer, +.layout-single-column .picture-in-picture__header { + background-color: var(--color-content-bg); +} +.layout-single-column .picture-in-picture__header .display-name span { + color: var(--color-content-fg-muted); +} + +/* ⏯️ Video controls */ +.layout-single-column .video-player__seek__progress, +.layout-single-column .video-player__volume__handle, +.layout-single-column .video-player__volume__current, +.layout-single-column .video-player__seek__handle { + background-color: var(--color-accent); +} + + +/* πŸ“„ Meta + ------- */ +.layout-single-column .link-footer p, +.layout-single-column .link-footer a { + color: var(--color-fg-muted); +} + +/* Server banner */ +.layout-single-column .server-banner__introduction { + display: none; +} +.layout-single-column .server-banner { + padding: 0 0 20px; +} +.layout-single-column .server-banner__hero { + border-radius: 7px 7px 0 0; + margin-bottom: 0; +} +.layout-single-column .server-banner__description { + padding: 20px 15px 20px; + margin-bottom: 0; + background-color: var(--color-content-bg); +} +.layout-single-column .server-banner__meta { + padding: 10px 15px 20px; + background-color: var(--color-content-bg); + gap: 0; + margin: 0; + border-radius: 0 0 7px 7px; + align-items: end; +} +.layout-single-column .server-banner h4 { + color: var(--color-fg); +} +.layout-single-column .server-banner__number { + color: var(--color-content-fg-bold); +} +.layout-single-column .server-banner__number-label { + color: var(--color-content-fg); +} +.layout-single-column .server-banner .account { + background-color: transparent; + box-shadow: none; + padding: 0; +} +.layout-single-column .server-banner__meta__column:first-child { + width: calc(60% - 5px); +} +.layout-single-column .server-banner__meta__column:nth-child(2) { + width: calc(40% - 5px); +} +.layout-single-column .server-banner__meta__column:nth-child(2) h4 { + display: none; +} +.layout-single-column .server-banner .button.button-secondary { + padding: 10px; + margin: 10px 0; +} +.layout-single-column .button.button-secondary, +.layout-single-column .button.button-tertiary { + border: 0; + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .button.button-secondary:hover, +.layout-single-column .button.button-tertiary:hover { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .sign-in-banner .button, +.layout-single-column .button.button-secondary, +.layout-single-column .button.button-tertiary { + padding: 10px 18px; +} +.layout-single-column .sign-in-banner p { + color: var(--color-fg); + opacity: .5; +} + + + +/* πŸ“œ About page + ------------- */ +.layout-single-column .scrollable.about { + background-color: var(--color-content-bg); + display: flex; + flex-flow: column; +} +.layout-single-column .about__header { + order: 1; + margin-bottom: 10px; +} +.layout-single-column .about__section:nth-child(3) { + order: 2; +} +.layout-single-column .about__meta { + order: 3; +} +.layout-single-column .about__section:nth-child(4) { + order: 4; +} +.layout-single-column .about__section:nth-child(5) { + order: 5; +} +.layout-single-column .link-footer { + order: 6; +} +.layout-single-column .about__footer { + order: 7; +} +.layout-single-column .about__header h1, +.layout-single-column .about__header p, +.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { + display: none; +} +.layout-single-column .about__header p, +.layout-single-column .about__meta h4 { + color: var(--color-fg); +} +.layout-single-column .about__header__hero { + margin: -20px -20px 20px; + width: calc(100% + 40px); + border-radius: 7px 7px 0 0; + background-color: var(--color-content-bg); +} +.layout-single-column .about__header__hero, +.layout-single-column .about__meta { + margin-bottom: 10px; +} +.layout-single-column .about__header h1 { + margin-bottom: 0; +} +.layout-single-column .about__mail { + color: var(--color-content-fg); +} +.layout-single-column .about__meta h4 { + font-size: 12px; + font-weight: bold; + margin-bottom: 8px; +} +.layout-single-column .about__meta .account { + background: none; + box-shadow: none; + padding: 0; +} +.layout-single-column .about__meta__divider { + border-left: 3px solid var(--color-content-secondary-separator); +} +@media screen and (max-width:600px) { + .layout-single-column .about__meta__divider { + border-top: 3px solid var(--color-content-secondary-separator); + width: 90%; + } +} +.layout-single-column .about__section:nth-child(3) .about__section__body { + padding-bottom: 4em; +} +.layout-single-column .about__meta, +.layout-single-column .about__section__title { + color: var(--color-accent); + background-color: var(--color-content-secondary-bg); + border: 0; + border-radius: 7px; +} +.layout-single-column .about__section.active .about__section__title { + border-radius: 7px 7px 0 0; +} +.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { + border: 0 !important; + background-color: var(--color-content-secondary-bg); + border-radius: 0 0 7px 7px; +} + +.layout-single-column .prose, +.layout-single-column .prose p, +.layout-single-column .prose b, +.layout-single-column .prose h1, +.layout-single-column .prose h2, +.layout-single-column .prose h3, +.layout-single-column .prose h4, +.layout-single-column .prose h5, +.layout-single-column .prose h6, +.layout-single-column .prose strong, +.layout-single-column .rules-list, +.layout-single-column .about__domain-blocks__domain h6, +.layout-single-column .about__domain-blocks__domain__type { + color: var(--color-content-fg); +} +.layout-single-column .prose ul>li:before { + background-color: var(--color-fg); +} +.layout-single-column .about__section__body .prose hr { + border-color: var(--color-content-secondary-separator); + margin-top: 2em; + margin-bottom: 2em; + border-width: 3px; +} +.layout-single-column .about__section__body .prose a, +.layout-single-column .about__section__body .prose a:hover { + color: var(--color-content-fg); + text-decoration: none; +} +.layout-single-column .about__section__body .prose small.lang_label { + margin-left: -2em; + display: block; + color: var(--color-content-fg-bold); + opacity: .5; + font-weight: bold; + font-size: 80%; + float: left; +} +.about__section.active .about__section__title { + background-color: var(--color-accent-bg); +} +.layout-single-column .rules-list li { + border-bottom: 2px solid #f5f2ef; + padding: 1em 1.75em 1em 3.4em; +} +.layout-single-column .rules-list li:last-child { + border-bottom: 0; +} +.about__domain-blocks { + background-color: var(--color-content-bg); + border: 0; +} +.about__domain-blocks__domain { + color: var(--color-content-fg); + border-bottom: 0; +} +.about__domain-blocks__domain:nth-child(2n) { + background-color: var(--color-content-secondary-bg); +} + + +/* πŸ‘‹ Hide superfluous UI */ +.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.layout-single-column .navigation-panel__legal > hr, +.layout-single-column .navigation-panel > .column-link:only-of-type, /* Hide Explore tab for logged-out users */ +.layout-single-column .navigation-panel__sign-in-banner + .navigation-panel__legal + .flex-spacer + .getting-started__trends, /* Hide Trending section for logged-out users */ +.layout-single-column .about__footer, /* Hide meta footer */ +.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ +.layout-single-column .ui__header__links .button.button-tertiary, +.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ +.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { + display: none; +} diff --git a/mastodon/app/javascript/styles/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui.scss new file mode 100644 index 0000000..db88b68 --- /dev/null +++ b/mastodon/app/javascript/styles/tangerineui.scss @@ -0,0 +1,2 @@ +@import 'application'; +@import 'tangerineui/layout-single-column.scss'; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss new file mode 100644 index 0000000..e77bebe --- /dev/null +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -0,0 +1,2528 @@ +/* TangerineUI 🍊 for Mastodon + version: 1.6 + + A Tangerine redesign for Mastodon's Web UI. + https://github.com/nileane/TangerineUI-for-Mastodon/ + + by @nileane@nileane.fr + + Last Mastodon compatibility check: v4.1.4 stable βœ… +*/ + + +/* 🎨 Colors */ +:root { + --color-bg: #f5f2ef; + --color-fg: #2a2d37; + --color-fg-muted: #948c84; + --color-secondary-bg: #f2eae4; + --color-secondary-separator: #ede3db; + + --color-content-bg: #ffffff; + --color-content-fg: #444a5a; + --color-content-fg-bold: #000000; + --color-content-fg-muted: #8b92a7; + --color-content-secondary-bg: #f9f6f4; + --color-content-secondary-separator: rgba(237, 227, 219, 0.4); + --color-content-bg-focus: #fffcfa; + + --color-accent: #f76902; + --color-accent-focus: #ff9447; + --color-accent-bg: #f6e5dd; + --color-accent-fg: #ffffff; + + --color-lines: var(--color-bg); + +} +@media (prefers-color-scheme: dark) { + :root { + --color-bg: #000000; + --color-fg: #e0d6d1; + --color-fg-muted: #6e635e; + --color-secondary-bg: #0d0c0c; + --color-secondary-separator: #25201c; + + --color-content-bg: #111111; + --color-content-fg: #f2f2f2; + --color-content-fg-bold: #ffffff; + --color-content-fg-muted: #737373; + --color-content-secondary-bg: #292623; + --color-content-secondary-separator: rgba(77, 73, 70, 0.4); + --color-content-bg-focus: #181818; + + --color-accent: #e68933; + --color-accent-focus: #ffa047; + --color-accent-bg: #3c2a1f; + --color-accent-fg: #ffffff; + + --color-lines: var(--color-content-secondary-bg); + } +} +:root { + --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23f76a02'/%3E%3Cstop offset='100%25' stop-color='%23f76a02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); + + --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23282C37" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23282C37" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23282C37" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E'); + --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); + --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-accent: 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='%23f76902' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); + --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23f76902' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23282C37' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23282C37" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); + --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f76902' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); + --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23282C37'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23282C37" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23282C37" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23282C37" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23282C37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23282C37" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E'); + --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23282C37" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23282C37" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23f76902" 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-star-active: '\f005'; + --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); +} +@media (prefers-color-scheme: dark) { + :root { + --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' class='mastodon-logo' viewBox='0 0 216.414 232.01'%3E%3Cdefs xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient xmlns='http://www.w3.org/2000/svg' id='a' x2='0%25' y2='100%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23E68A32'/%3E%3Cstop offset='100%25' stop-color='%23E68A32'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns='http://www.w3.org/2000/svg' fill='url(%23a)' d='M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916'/%3E%3Cpath fill='%23fff' d='M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675'/%3E%3C/svg%3E"); + + --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23ffffff" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23ffffff" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23ffffff" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E'); + --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E'); + --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-accent: 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='%23e68933' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); + --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); + --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23ffffff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E'); + --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e68933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23ffffff' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E"); + --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23ffffff'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E'); + --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); + --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E'); + --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E'); + --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23ffffff" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E'); + --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E'); + --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffffff" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23e68933" 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='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); + } +} + +body.layout-single-column { + background-color: var(--color-bg); + color: var(--color-fg); + font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; +} + +/* πŸ–±οΈ Scrollbars */ +:root:has(.layout-single-column) *::-webkit-scrollbar-track { + background-color: var(--color-bg); + padding: 2px; +} +:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { + background-color: var(--color-accent); + border-radius: 50px; + opacity: .4; +} +:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { + background-color: var(--color-bg); +} +:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { + background-color: var(--color-accent); + opacity: .7; +} +@media screen and (max-width:1174px) { + :root:has(.layout-single-column) *::-webkit-scrollbar { + display: none; + } +} + +/* πŸ’¨ Loading bar */ +.layout-single-column .loading-bar { + background-color: var(--color-accent); +} + +/* Resetting borders */ +.layout-single-column .column>.scrollable, +.layout-single-column .error-column, +.layout-single-column .getting-started, +.layout-single-column .regeneration-indicator, +.layout-single-column .audio-player, +.layout-single-column .compose-form .spoiler-input__input, +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form__poll-wrapper select, +.layout-single-column .poll__option input[type=text], +.layout-single-column .report-dialog-modal__textarea, +.layout-single-column .search__input, +.layout-single-column .setting-text, +.layout-single-column .compose-form .compose-form__buttons-wrapper, +.layout-single-column .about__section__body { + border: 0; +} +.layout-single-column .column-inline-form, +.layout-single-column .column>.scrollable, +.layout-single-column .error-column, +.layout-single-column .getting-started, +.layout-single-column .regeneration-indicator { + background: transparent; +} + +/* Round avatars */ +.layout-single-column .account__avatar img { + border-radius: 50%; +} + +/* Rordered layout */ +.layout-single-column .columns-area__panels__pane--navigational { + order: 1; +} +.layout-single-column .columns-area__panels__main { + order: 2; +} +.layout-single-column .columns-area__panels__pane--compositional { + order: 3; +} +.layout-single-column .columns-area--mobile .column { + flex: unset; + height: auto; +} +.layout-single-column .scrollable, +.layout-single-column .column > .scrollable { + border-radius: 7px !important; + max-height: max-content; +} + + +/* *️⃣ Icons + -------- */ +.layout-single-column i.fa-bookmark:before, +.layout-single-column i.fa-share-alt:before, +.layout-single-column i.fa-bookmark:before, +.layout-single-column i.fa-star:before, +.layout-single-column i.fa-retweet:before { + content: " "; + display: inline-block; + width: 23px; + height: 23px; + background-repeat: no-repeat; + background-position: center; +} +.layout-single-column i.fa { + background-repeat: no-repeat; +} +.layout-single-column .detailed-status__link .fa:before { + content: " "; + width: 13px; + height: 13px; + margin-bottom: -2px; + background-size: contain; +} +/* Replace bookmark icon */ +.layout-single-column i.fa-bookmark:before { + background-image: var(--icon-bookmark); + background-size: 80%; +} +.layout-single-column .detailed-status__button i.fa-bookmark:before { + background-image: var(--icon-bookmark-accent); +} +.layout-single-column .icon-button.active i.fa.fa-bookmark.fa-fw:before { + background-image: var(--icon-bookmark-active); +} +/* Replace share icon */ +.layout-single-column i.fa-share-alt:before { + background-image: var(--icon-share); +} +.layout-single-column .detailed-status__button i.fa-share-alt:before { + background-image: var(--icon-share-accent); +} +/* Replace star icon */ +.layout-single-column i.fa-star:before { + background-image: var(--icon-star); + text-align: center; + line-height: 34px; +} +.layout-single-column .detailed-status__button i.fa-star:before { + background-image: var(--icon-star-accent); +} +.layout-single-column button.icon-button.active i.fa-star:before, +.layout-single-column .notification i.fa-star:before { + background-image: none; + content: var(--icon-star-active); +} +.layout-single-column .detailed-status__link i.fa.fa-star:before { + content: " "; +} +/* Replace retweet icon */ +.layout-single-column i.fa.fa-retweet.fa-fw, +.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, +.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost); + background-position: center; +} +.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost-accent); +} +.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .notification i.fa.fa-retweet.fa-fw { + background-image: var(--icon-boost-active); + background-position: center; +} +.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw { + background-image: var(--icon-boost-status-prepend); +} +.layout-single-column .detailed-status__link .fa.fa-retweet:before { + background-image: var(--icon-boost); +} +.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, +.layout-single-column button.icon-button.disabled i.fa-retweet, +.layout-single-column button.icon-button.disabled:hover i.fa-retweet { + background-image: var(--icon-boost); + opacity: .2; + pointer-events: none; +} +.layout-single-column .boost-modal__action-bar .fa-retweet { + background-image: var(--icon-boost); + vertical-align: middle; +} +/* Replace reply icon */ +.layout-single-column i.fa-mail-reply::before, +.layout-single-column i.fa-reply::before, +.layout-single-column i.fa-reply-all::before { + content: var(--icon-reply); + position: relative; + top: 2px; +} +.layout-single-column .detailed-status__button i.fa-reply::before, +.layout-single-column .detailed-status__button i.fa-reply-all::before { + content: var(--icon-reply-accent); +} + + +/* Home icon */ +.layout-single-column .notification__filter-bar .fa-home::before { + content: var(--icon-home-notification); +} +.layout-single-column .notification__filter-bar .active .fa-home::before { + content: var(--icon-home-notification-active); +} +.layout-single-column .column-link .fa-home::before { + content: var(--icon-home); +} +.layout-single-column .column-link.active .fa-home::before { + content: var(--icon-home-column-link-active); +} +.layout-single-column .fa-home.column-header__icon:before { + content: var(--icon-home-notification-active); +} +/* Federated icon */ +.layout-single-column .column-link .fa-globe::before { + content: var(--icon-globe); +} +.layout-single-column .fa-globe.column-header__icon:before { + content: var(--icon-globe); +} +/* Local icon */ +.layout-single-column .fa-group.column-header__icon:before, +.layout-single-column .fa-users.column-header__icon:before { + content: var(--icon-users-column-link-active); +} +/* Explore icon */ +.layout-single-column .column-link .fa-hashtag::before { + content: var(--icon-hashtag); +} +.layout-single-column .column-link.active .fa-hashtag::before { + content: var(--icon-hashtag-active); +} +.layout-single-column .fa-hashtag.column-header__icon:before { + content: var(--icon-hashtag-active); +} +/* Search icon */ +.layout-single-column .column-link i.fa-search { + transform: scale(1); +} +.layout-single-column .column-link .fa.fa-search::before { + content: var(--icon-search); + left: 2px; +} +.layout-single-column .column-link.active .fa.fa-search::before { + content: var(--icon-search); +} +.layout-single-column .column-header__icon.fa-search { + line-height: 18px; +} +/* Local icon */ +.layout-single-column .column-link .fa-users::before { + content: var(--icon-users-column-link); +} +.layout-single-column .column-link.active .fa-users::before { + content: var(--icon-users-column-link-active); +} +/* Notifications icon */ +.layout-single-column .column-link .fa-bell::before { + content: var(--icon-bell); +} +.layout-single-column .column-link.active .fa-bell::before { + content: var(--icon-bell-active); +} +.layout-single-column .fa-bell.column-header__icon:before { + content: var(--icon-bell-active); +} +/* Direct messages icon */ +.layout-single-column .column-link .fa-at::before { + content: var(--icon-direct-messages); +} +.layout-single-column .fa-at.column-header__icon:before { + content: var(--icon-direct-messages); +} +/* Bookmarks icon */ +.layout-single-column .column-link .fa-bookmark::before { + content: var(--icon-bookmark-column-link); + background-image: none; +} +.layout-single-column .column-link.active .fa-bookmark::before { + content: var(--icon-bookmark-column-link-active); +} +.layout-single-column .fa-bookmark.column-header__icon:before { + content: var(--icon-bookmark-column-link-active); +} +/* Favorites icon */ +.layout-single-column .column-link .fa-star::before { + content: var(--icon-star-column-link); + background-image: none; +} +.layout-single-column .column-link.active .fa-star::before { + content: var(--icon-star-column-link-active); +} +.layout-single-column .fa-star.column-header__icon:before { + content: var(--icon-star-column-link-active); +} +/* Lists icon */ +.layout-single-column .column-link .fa-list-ul { + transform: scale(1); + margin-right: 8px; + margin-left: 1px; +} +.layout-single-column .column-link .fa-list-ul::before { + content: var(--icon-list); + background-image: none; +} +/* Follow Requests icon */ +.layout-single-column .column-link .fa-user-plus::before { + content: var(--icon-users-column-link); + background-image: none; +} + +/* Follow hashtag icon */ +.layout-single-column .column-header__button .column-header__icon.fa-user-plus::before { + content: var(--icon-follow-hashtag); + position: relative; + top: 2px; + right: -5px; + } + +/* Unfollow hashtag icon */ +.layout-single-column .column-header__button .column-header__icon.fa-user-times::before { + content: var(--icon-unfollow-hashtag); + position: relative; + top: 2px; + right: -5px +} + + + + +/* πŸ“ Compose panel + ---------------- */ +.layout-single-column .compose-form { + padding: 0 0 71px; +} +.layout-single-column .navigation-bar { + border-radius: 7px 7px 0 0; + background-color: var(--color-content-secondary-bg); +} +.layout-single-column .navigation-bar strong { + color: var(--color-content-fg-bold); +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions, +.layout-single-column .compose-form .autosuggest-textarea__textarea, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item, +.layout-single-column .compose-form .compose-form__buttons-wrapper, +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__modifiers { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; + border-top: 0; + border-radius: 0; +} +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, +.layout-single-column .compose-form .character-counter { + color: var(--color-fg); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active, +.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { + color: var(--color-accent); +} +.layout-single-column .compose-panel .autosuggest-textarea__textarea { + padding-left: 20px; + padding-top: 20px; +} +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, +.layout-single-column .compose-form .autosuggest-account .display-name__html { + color: var(--color-content-fg); +} +.layout-single-column .compose-form .autosuggest-account .display-name__account { + color: var(--color-content-fg-muted); +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { + border-radius: 7px; +} +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__account, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus .autosuggest-account .display-name__html, +.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover .autosuggest-account .display-name__html { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-radius: 0 0 7px 7px; +} +.layout-single-column .reply-indicator, +.layout-single-column .compose-form .compose-form__warning { + background-color: var(--color-accent-bg); + box-shadow: none; + margin: 0; + border-radius: 0; + border: 0; +} +.layout-single-column .compose-form .compose-form__warning, +.layout-single-column .simple_form .recommended, +.layout-single-column .compose-form .compose-form__warning, +.layout-single-column .compose-form .compose-form__warning a, +.layout-single-column .reply-indicator__content a, +.layout-single-column .navigation-bar__profile-edit { + color: var(--color-accent); +} +.layout-single-column .empty-column-indicator, +.layout-single-column .error-column { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { + margin-bottom: 0; +} +.layout-single-column .compose-form .spoiler-input__input { + background-color: var(--color-accent-bg); + color: var(--color-accent); + margin-bottom: 0; + border-radius: 0; +} +.layout-single-column .display-name { + color: var(--color-content-fg); +} +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { + color: #ffffff; +} +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:active, +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:focus, +.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:hover { + background-color: rgba(0, 0, 0, .4); +} +@media screen and (max-width:1174px) { + .layout-single-column .compose-form { + padding: 0 10px 10px; + } + .layout-single-column .navigation-bar { + border-radius: 7px 7px 0 0; + margin: 10px 10px 0; + } +} + + + +/* πŸ’¬ Posts + -------- */ +.layout-single-column .reply-indicator__content, +.layout-single-column .status__content { + color: var(--color-content-fg); +} +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong, +.layout-single-column .status__info .status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .status { + margin-left: 56px; + padding: 0 10px; + border-bottom: 0; +} +.layout-single-column .status__wrapper { + transition: background .3s; +} +.layout-single-column .status__wrapper, +.layout-single-column .detailed-status__wrapper { + background-color: var(--color-content-bg); + padding: 13px 12px; +} +.layout-single-column .status__info { + height: 22px; + margin-left: -56px; + padding: 0; + margin-bottom: 0; + line-height: 10px; + align-items: start; +} +.layout-single-column .status__info .status__display-name { + overflow: visible; + align-items: start; + max-width: calc(100% - 4em); +} +.layout-single-column .status__info .status__display-name .display-name bdi, +.layout-single-column .status__info .status__display-name .display-name__account { + vertical-align: top; +} +.layout-single-column .status__info .status__display-name .display-name__account { + display: inline; + opacity: .7; +} +.layout-single-column .status__relative-time { + height: 22px; + position: absolute; + right: 22px; + color: var(--color-content-fg); + opacity: .7; +} +.layout-single-column .status__avatar { + margin-bottom: -10px; +} +.layout-single-column .reply-indicator__content, +.layout-single-column .status__content { + line-height: 19px; +} + +/* πŸ“ Post dividers */ +/* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ +.layout-single-column .status::before, +.layout-single-column .notification__message::before { + position: absolute; + background-color: var(--color-lines); + height: 2px; + width: calc(100% - 72px); + right: 0; + top: -2px; + content: ""; +} +/* Remove border between posts when applicable */ +.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ +.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { + display: none; +} + +/* πŸ‘₯ Threaded replies */ +.layout-single-column .status--first-in-thread { + border-top: 0; +} +.layout-single-column .status--first-in-thread::before { + position: absolute; + background-color: var(--color-lines); + height: 4px; + width: 100%; + right: 0; + top: -3px; + content: ""; +} +.layout-single-column .status--in-thread .attachment-list, +.layout-single-column .status--in-thread .audio-player, +.layout-single-column .status--in-thread .media-gallery, +.layout-single-column .status--in-thread .picture-in-picture-placeholder, +.layout-single-column .status--in-thread .status-card, +.layout-single-column .status--in-thread .status__action-bar, +.layout-single-column .status--in-thread .status__content, +.layout-single-column .status--in-thread .video-player { + margin-left: 0; +} +.layout-single-column .status--in-thread .status__line { + -webkit-border-start: 4px solid var(--color-lines); + border-inline-start: 4px solid var(--color-lines); + inset-inline-start: 43px; + position: absolute; + top: 0; + width: 0; +} +.layout-single-column .status__line--full:before { + background: var(--color-lines); + inset-inline-start: -3px; + width: 3px; +} +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} + +/* ⏺️ Posts when in focus */ +.layout-single-column .status__wrapper.focusable:focus, +.layout-single-column .detailed-status__wrapper.focusable:focus, +.layout-single-column .focusable:focus .detailed-status, +.layout-single-column .focusable:focus .detailed-status__action-bar, +.layout-single-column .status__wrapper.focusable:focus .detailed-status, +.layout-single-column .focusable:focus .detailed-status__action-bar { + outline: 0; + background: var(--color-content-bg-focus); +} +@media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ + .layout-single-column .status__wrapper:has(.status__content:hover) { + background: var(--color-content-bg-focus); + } +} + +/* πŸ‘οΈ Post detailed view */ +.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ + border-top: 4px solid var(--color-lines); + border-bottom: 4px solid var(--color-lines); +} +.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Disable top divider when the detailed post in first in column */ + border-top: 0; +} +.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Disabled bottom divider when the detailed post is last in column */ + border-bottom: 0; +} +.layout-single-column .detailed-status .status__content { + line-height: 24px; +} +.layout-single-column .detailed-status, +.layout-single-column .detailed-status__action-bar { + background-color: var(--color-content-bg); + border: 0; +} +.detailed-status__display-name strong, +.detailed-status__display-name .display-name__account { + color: var(--color-content-fg-bold); +} +.detailed-status__display-name .display-name__account{ + opacity: .7; +} +.layout-single-column .detailed-status__meta { + color: var(--color-fg); + opacity: .8; +} +.layout-single-column .detailed-status__action-bar { + padding: 0; +} +.layout-single-column .animated-number { + color: var(--color-content-fg); +} + +.layout-single-column article > .account { + padding: 16px; +} + +/* ⭐ Action bar */ +.layout-single-column .status__action-bar { + justify-content: left; + margin-top: 8px; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .status__action-bar { + opacity: .7; + } +} +.layout-single-column .status__action-bar .status__action-bar__dropdown { + position: absolute; + right: 18px; +} +.layout-single-column .status__action-bar .icon-button, +.layout-single-column .detailed-status__action-bar .icon-button { + min-width: 32px !important; + height: 32px !important; + border-radius: 30px; + position: relative; +} +.layout-single-column .status__action-bar i.fa-star:before, +.layout-single-column .status__action-bar i.fa-bookmark:before, +.layout-single-column .status__action-bar i.fa-share-alt:before, +.layout-single-column .detailed-status__action-bar i.fa-star:before, +.layout-single-column .detailed-status__action-bar i.fa-bookmark:before, +.layout-single-column .detailed-status__action-bar i.fa-share-alt:before { + height: 32px; +} +.layout-single-column .icon-button.star-icon.active, +.layout-single-column .notification__favourite-icon-wrapper .star-icon { + color: #ffb609; +} +.layout-single-column .status__prepend { + font-weight: bold; + padding-top: 2px; + padding-left: 0; + padding-right: 0; + height: 25px; + color: var(--color-content-fg); +} +.layout-single-column .status__prepend-icon-wrapper { + width: 56px; + text-align: right; +} +.layout-single-column .status-card, +.layout-single-column .status-card.compact { + background-color: var(--color-content-secondary-bg); + border: none; + box-shadow: + 0 1px 4px rgba(0, 0, 0, .08); +} +.layout-single-column .status-card__title, +.layout-single-column .status-card__host, +.layout-single-column .status-card__description { + color: var(--color-content-fg-bold); +} +.layout-single-column .status-card__description { + opacity: .7; +} +.layout-single-column .status-card__host { + opacity: .5; +} +.layout-single-column a.status-card:hover, +.layout-single-column a.status-card.compact:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .status-card__image { + background: var(--color-accent-bg); +} +.layout-single-column .status-card__image > .fa { + color: var(--color-accent); +} +.layout-single-column .status__content p { + margin-bottom: 12px; +} +.layout-single-column .status__content p:last-child { + margin-bottom: 0; +} +.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { + margin-bottom: 1px; +} +.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { + font-weight: bold; +} +.layout-single-column .media-gallery { + border-radius: 8px; +} +.layout-single-column .icon-button.overlayed { + background-color: #ffffff; + color: #444b5d; + opacity: .6; + transition: opacity .3s; +} +.layout-single-column .icon-button.overlayed:hover { + background-color: #ffffff; + color: #444b5d; + opacity: 1; +} +.layout-single-column .status__wrapper--filtered__button { + color: var(--color-accent); +} +.layout-single-column .status__wrapper--filtered { + border-bottom: 0; + padding: 12px; +} + +/* πŸ“Š Polls */ +.layout-single-column .poll__chart, +.layout-single-column .muted .poll__chart.leading { + background: var(--color-accent); + opacity: .4; + height: 12px; + border-radius: 10px; +} +.layout-single-column .poll__chart.leading, +.layout-single-column .muted .poll__chart.leading { + opacity: 1; +} +.layout-single-column .poll__footer { + color: var(--color-content-fg); +} +.layout-single-column .poll__link { + color: var(--color-accent); + text-decoration: none; +} +.layout-single-column .poll__input { + border: 2px solid var(--color-content-fg); +} +.layout-single-column .poll__input:hover { + border-color: var(--color-accent); + background-color: var(--color-accent-bg); +} +.layout-single-column .poll__input.active, +.layout-single-column .poll__input:active, +.layout-single-column .poll__input:focus { + background-color: var(--color-accent); +} +.layout-single-column .poll__input.active { + border-color: var(--color-accent); +} +.layout-single-column .poll__footer .button.button-secondary { + padding: 0 16px; +} +.layout-single-column .poll__footer .button.button-secondary:hover { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +/* Poll composer */ +.layout-single-column .compose-form__poll-wrapper, +.layout-single-column .compose-form__poll-wrapper .poll__footer { + border-top: 0; +} +.layout-single-column .compose-form__poll-wrapper ul { + background-color: var(--color-accent-bg); +} +.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { + box-shadow: 0 0 0 2px var(--color-accent); +} +.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { + padding: 6px 16px; +} + + + +/* Empty columns */ +.layout-single-column .empty-column-indicator { + background-color: var(--color-content-secondary-bg); + color: var(--color-content-fg); + border-radius: 7px; + contain: content; +} +.layout-single-column .empty-column-indicator a { + color: var(--color-accent); +} + +/* Timeline hint */ +.layout-single-column .timeline-hint { + background-color: var(--color-content-secondary-bg); + color: var(--color-content-fg); +} +.layout-single-column .timeline-hint a { + color: var(--color-accent); +} + + + +/* πŸ“€ DMs */ +.layout-single-column .follow_requests-unlocked_explanation { + background-color: var(--color-accent-bg); + color: var(--color-content-fg); +} +.layout-single-column .follow_requests-unlocked_explanation a { + color: var(--color-accent); +} +.layout-single-column .conversation__unread { + background-color: var(--color-accent); +} +.layout-single-column .conversation.conversation--unread { + background-color: var(--color-content-bg-focus); +} +.layout-single-column .conversation__unread { + color: var(--color-accent-fg); +} +.layout-single-column .conversation__content__names a strong { + font-weight: bold; +} +.layout-single-column .conversation__content__names, +.layout-single-column .conversation__content__names a, +.layout-single-column .conversation__content__relative-time, +.layout-single-column .conversation .attachment-list__list a, +.layout-single-column .conversation .attachment-list.compact .fa, +.layout-single-column .conversation .status__content p { + color: var(--color-content-fg); +} +.layout-single-column .conversation { + background-color: var(--color-content-bg); + border-bottom: 3px solid var(--color-content-secondary-separator); +} +.layout-single-column .conversation__content__relative-time { + opacity: .7; +} + + + +/* ⏺️ Column headers + ----------------- */ +.layout-single-column .tabs-bar__wrapper { + background-color: transparent; + border-radius: 7px 7px 0 0; + box-shadow: + inset 0 10px var(--color-bg), + 0 -30px var(--color-bg); +} +.layout-single-column .column-header { + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; + border-radius: 7px; + font-weight: bold; + margin-bottom: 10px; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} +.layout-single-column .column-header__wrapper.active:before { + background: none; + opacity: 40%; +} +.layout-single-column .column-header__wrapper.active { + box-shadow: 0 0; +} +.layout-single-column .column-header.active .column-header__icon { + color: var(--color-accent); + text-shadow: none; +} +.layout-single-column .column-header__button.active, +.layout-single-column .column-header__button.active:hover, +.layout-single-column .column-header__button:hover { + color: var(--color-accent); + background-color: var(--color-accent-bg); +} +.layout-single-column .load-gap, +.layout-single-column .load-more { + background-color: var(--color-accent-bg); + color: var(--color-accent); + border-bottom: 0; +} +.layout-single-column .load-gap:hover, +.layout-single-column .load-more:hover { + opacity: .6; +} +.layout-single-column .column-header__collapsible { + border-bottom: 0; + border-radius: 7px; +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + margin-bottom: 10px; +} +.layout-single-column .column-header__collapsible-inner { + background: var(--color-secondary-bg); + border: 0; +} +.layout-single-column .column-settings__section { + color: var(--color-content-fg-bold); +} +.layout-single-column .setting-toggle__label { + color: var(--color-content-fg); +} +.layout-single-column .column-header > button { + padding: 0 0 0 15px; + line-height: 48px; + font-weight: bold; +} +.layout-single-column .column-header__icon { + vertical-align: middle; + display: inline-block; + margin-right: 8px; + transform: scale(.8); + line-height: 23px; +} +@media screen and (max-width:1174px) { + .layout-single-column .ui__header { + background-color: transparent; + border-bottom: 0; + } + .layout-single-column .ui__header__logo { + margin-left: 3px; + } + .layout-single-column .tabs-bar__wrapper { + box-shadow: none; + display: none; + margin-bottom: 0; + border-radius: 0; + height: 55px; + } + .layout-single-column .columns-area--mobile { + border-radius: 7px; + } + .layout-single-column .column-header, + .layout-single-column .column-back-button, + .layout-single-column .column-header__button, + .layout-single-column .column-header__back-button { + background-color: transparent; + height: 55px; + } + .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + background-color: rgba(245, 242, 239, 0.75); + content: ""; + height: 55px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 1; + } + .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, + .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + height: 110px; + } + .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + display: block; + } + .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + margin-top: -10px; + } +} +@media (prefers-color-scheme: dark) { + @media screen and (max-width:1174px) { + .layout-single-column .ui::after { + background-color: rgba(0, 0, 0, 0.7); + } + } +} + + + +/* ⏺️ Horizontal selectors + (used to navigate subsections on the Explore, Live Feeds and Account pages) */ +.layout-single-column .account__section-headline, +.layout-single-column .notification__filter-bar { + background: var(--color-accent-bg); + border: 0; + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .account__section-headline a, +.layout-single-column .account__section-headline button, +.layout-single-column .notification__filter-bar a, +.layout-single-column .notification__filter-bar button { + background-color: var(--color-accent-bg); + color: var(--color-accent); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; + border-radius: 9px; + transition: all .2s; +} +.layout-single-column .account__section-headline a:hover, +.layout-single-column .account__section-headline button:hover, +.layout-single-column .notification__filter-bar a:hover, +.layout-single-column .notification__filter-bar button:hover { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; +} +.layout-single-column .account__section-headline a.active, +.layout-single-column .account__section-headline button.active, +.layout-single-column .notification__filter-bar a.active, +.layout-single-column .notification__filter-bar button.active { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + box-shadow: 0 0 0 4px var(--color-accent-bg) inset; +} +.layout-single-column .account__section-headline a.active:after, +.layout-single-column .account__section-headline a.active:before, +.layout-single-column .account__section-headline button.active:after, +.layout-single-column .account__section-headline button.active:before, +.layout-single-column .notification__filter-bar a.active:after, +.layout-single-column .notification__filter-bar a.active:before, +.layout-single-column .notification__filter-bar button.active:after, +.layout-single-column .notification__filter-bar button.active:before { + display: none; +} +.layout-single-column .account__section-headline button, +.layout-single-column .notification__filter-bar button { + background-color: transparent; +} +.layout-single-column .account__section-headline a::after, +.layout-single-column .account__section-headline button::after { + display: block; + position: absolute; + content: " "; + width: 2px; + background-color: var(--color-accent); + top: 8px; + right: -2px; + bottom: 8px; + opacity: .1; + border-radius: 50px; + z-index: 1; +} +.layout-single-column .account__section-headline a:last-child::after, +.layout-single-column .account__section-headline button:last-child::after { + display: none; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .account__section-headline a.active, + .layout-single-column .account__section-headline button.active, + .layout-single-column .notification__filter-bar a.active, + .layout-single-column .notification__filter-bar button.active { + background-color: var(--color-bg); + } +} + + + +/* πŸ“ Navigation panel + ------------------- */ +.layout-single-column .column-link--transparent { + color: var(--color-fg); +} +.layout-single-column .column-link--logo { + margin-left: 4px; +} + +.layout-single-column .column-link.column-link--logo, +.layout-single-column .ui__header__logo { + display: inline-flex; + padding: 0; + width: 50px; + height: 50px; + background-image: var(--logo); + background-repeat: no-repeat; + background-position: center; + background-size: 32px auto; +} +.layout-single-column .column-link.column-link--logo svg, +.layout-single-column .ui__header__logo svg { + display: none; +} + +.layout-single-column .navigation-panel__logo { + margin-bottom: 10px; +} +.layout-single-column .column-link:not(.column-link--logo) { + padding: 10px 20px 11px 13px; + width: max-content; + margin-left: 3px; + font-weight: 500; + transition: all .2s; +} +.layout-single-column a.column-link--transparent.active, +.layout-single-column a.column-link--transparent.active:hover { + background-color: var(--color-content-bg); + border-radius: 8px; + color: var(--color-content-fg); + font-weight: bold; +} +.layout-single-column .column-link--transparent:hover { + background-color: var(--color-accent-bg); + border-radius: 8px; + padding-right: 20px; +} +.layout-single-column .icon-with-badge__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 20px; + top: -4px; + font-weight: bold; + border: 0; +} +.layout-single-column .compose-panel hr, .navigation-panel hr { + display: none; +} +.layout-single-column .list-panel { + padding: 8px 9px 8px 7px; + margin: 5px 0 5px; + border-radius: 9px; + background-color: var(--color-secondary-bg); +} +.layout-single-column .list-panel .column-link { + width: auto; + position: relative; + padding: 12px 13px; + overflow: visible; +} +.layout-single-column .list-panel .column-link:not(:last-child,:hover,.active)::after { + display: block; + content: " "; + height: 2px; + bottom: -2px; + right: 15px; + background-color: var(--color-secondary-separator); + left: 15px; + position: absolute; +} +.layout-single-column .list-panel i.fa { + display: none; +} +.layout-single-column .column-link__icon { + transform: scale(.8); + vertical-align: middle; + margin-right: 9px; +} +.layout-single-column .column-link span { + vertical-align: middle; +} +.layout-single-column .column-link .fa::before { + position: relative; + top: 1px; +} +@media screen and (max-width:1174px) { + .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + width: 100vw; + height: calc(4.2em + env(safe-area-inset-bottom)); + bottom: 0; + left: 0; + z-index: 3; + } + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + width: 100vw; + height: 4.2em; + padding-bottom: env(safe-area-inset-bottom); + flex-direction: row; + overflow-x: auto; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + background-color: rgba(255, 255, 255, 0.5); + border-left: 0; + } + .layout-single-column .navigation-panel .column-link, + .layout-single-column .navigation-panel .navigation-panel__legal, + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column .column-link--transparent:hover { + flex: 0 0 18vw; + margin: 6px 0 7px; + padding: 4px 0 3px; + border-radius: 0; + justify-content: center; + display: inline-flex; + align-items: center; + box-sizing: border-box; + background-color: transparent; + } + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column a.column-link--transparent:active { + margin: 6px 0 7px; + padding: 4px 0 3px; + border-radius: 7px; + box-shadow: 0 0 6px rgba(0, 0, 0, .1); + background-color: var(--color-content-bg); + } + .layout-single-column .column-link__icon { + transform: scale(1); + margin: 0; + } + .layout-single-column .column-link span { + padding-left: .5em; + } + .layout-single-column .columns-area__panels__main { + width: calc(100% - 285px); + margin-left: -285px; + } + .layout-single-column .columns-area__panels { + padding-bottom: 6em; + } + .layout-single-column .columns-area__panels .navigation-panel__legal { + margin: 0; + padding: 0; + } + .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + height: calc(100% - 13px); + box-sizing: border-box; + } +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main { + width: 100%; + margin-left: -55px; + } +} +@media (prefers-color-scheme: dark) { + @media screen and (max-width:1174px) { + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + background-color: rgba(24, 24, 25, 0.7); + border: 0; + } + .layout-single-column a.column-link--transparent.active, + .layout-single-column a.column-link--transparent.active:hover, + .layout-single-column a.column-link--transparent:active { + background-color: var(--color-bg); + } + } +} + + + +/* πŸ‘€ Account view + --------------- */ +.layout-single-column .account__header { + border-radius: 7px; + margin-bottom: 10px; + background-color: var(--color-content-bg); +} +.layout-single-column .account__header__image { + height: 150px; + background-color: var(--color-secondary-bg); + border-bottom: 0; +} +.layout-single-column .account__header__bar { + border: 0; +} +.layout-single-column .account__header__bar .avatar .account__avatar { + border-radius: 50%; + border-width: 5px; + width: 100px !important; + height: 100px !important; + background-color: var(--color-content-bg); + border-color: var(--color-content-bg); +} +.layout-single-column .account__header__tabs__name h1, +.layout-single-column .account__header__tabs__name h1 small { + color: var(--color-content-fg-bold); +} +.layout-single-column .account__header__tabs__name h1 small { + opacity: .7; +} +.layout-single-column .account__section-headline { + margin-bottom: 10px; +} +.layout-single-column .account__header__content a { + color: var(--color-accent); + text-decoration: none; +} +.layout-single-column .account__header__content a:hover { + text-decoration: underline; +} +.layout-single-column .account__header__extra__links a strong { + color: var(--color-content-fg-bold); +} +.layout-single-column .account__header__account-note label { + margin-bottom: 0; +} +.layout-single-column .account__header__account-note label, +.layout-single-column .account__header__account-note textarea::placeholder { + color: var(--color-content-fg-bold); + opacity: .5; +} +.layout-single-column .account__header__account-note textarea { + color: var(--color-content-fg); +} +.layout-single-column .account__header__account-note textarea:focus { + background-color: var(--color-accent-bg); +} +.layout-single-column .account__header__extra__links a, +.layout-single-column .account__header__bio .account__header__content, +.layout-single-column .account__header__bio .account__header__fields dd { + color: var(--color-content-fg); +} +.layout-single-column .account__header__bio .account__header__fields { + background-color: var(--color-content-secondary-bg); + border-radius: 7px; +} +.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { + display: none; +} +.layout-single-column .account__header__bio .account__header__fields dt { + font-weight: bold; + font-size: 12px; +} +.layout-single-column .account__header__bio .account__header__fields dl, +.layout-single-column .account__header__bio .account__header__fields .verified { + border-bottom: 0; + position: relative; +} +.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { + display: block; + content: " "; + height: 2px; + bottom: -1px; + right: 15px; + background-color: var(--color-content-secondary-separator); + left: 15px; + position: absolute; + border-radius: 50px; +} +.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ + border-top-left-radius: 7px; + border-top-right-radius: 7px; + margin-top: 0; +} +.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ + margin-top: 0; + border-top-width: 0; +} +.layout-single-column .account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd { /* Verified field tweak: vivid green text */ + color: var(--color-accent); +} +.layout-single-column .account__header__bio .account__header__fields .verified dt, +.layout-single-column .account__header__bio .account__header__fields dt { /* Verified field tweak: restore default field title color */ + color: var(--color-content-fg); +} +.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ + border-top: 0; + border-right: 0; + border-left: 0; + background: none; +} +.layout-single-column .account__header__extra .account__header__fields .verified dd span:first-child { /* Verified field tweak: adding a green background circle to the checkmark icon */ + display: inline-block; + background-color: var(--color-accent); + border-radius: 50px; + width: 1.2em; + height: 1.2em; + line-height: 1.2; + text-align: center; + margin-right: 2px; +} +.layout-single-column .account__header__extra .account__header__fields .verified dd span:first-child i { /* white checkmark */ + color: #fff; + font-size: 85%; + transform: scale(.9); +} +.layout-single-column .account__header__bio .account__header__fields .verified:last-child { + border-bottom: 0; +} +.layout-single-column .account-timeline__header + article .status__wrapper, +.layout-single-column .account-timeline__header + article .account { /* rounded corners on first post below account header + on first account in followings/followers list */ + border-radius: 7px 7px 0 0; +} + +.layout-single-column .follow-request-banner, +.layout-single-column .moved-account-banner { + background-color: var(--color-accent-bg); +} +.layout-single-column .moved-account-banner { + margin-bottom: 10px; + border-radius: 7px; +} +.layout-single-column .follow-request-banner__message, +.layout-single-column .moved-account-banner__message { + color: var(--color-content-fg); +} +.layout-single-column .moved-account-banner__message { + font-weight: bold; +} + + +/* ✨ Explore tab + -------------- */ +.layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { + border-radius: 7px 7px 0 0; +} +.layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { + color: var(--color-verified); +} +.layout-single-column .icon-button.active .fa.fa-star + .icon-button__counter .animated-number { + color: #ca8f04; +} + +/* #️⃣ Trending hashtags */ +.layout-single-column .trends__item__sparkline path:last-child { + stroke: var(--color-accent) !important; +} +.layout-single-column .trends__item__sparkline path:first-child { + fill: var(--color-accent) !important; + opacity: 20%; +} +.layout-single-column .explore__links { + background-color: var(--color-content-bg); + border-radius: 7px; + overflow: hidden; +} +.layout-single-column .columns-area__panels__main .trends__item { + background-color: var(--color-content-bg); + border-bottom: 2px solid var(--color-content-secondary-bg); +} +.layout-single-column .explore__links .trends__item:last-child { + border-bottom: 0; +} +.layout-single-column .trends__item__name, +.layout-single-column .trends__item__name a { + color: var(--color-content-fg); +} +.getting-started__trends .trends__item__current { + color: var(--color-fg); +} +.layout-single-column .scrollable .account-card { + margin: 0 0 10px; + background-color: var(--color-content-bg); + border-radius: 7px; +} +.layout-single-column .account-card__header { + padding: 0; + border-radius: 7px 7px 0 0; + height: 128px; + overflow: hidden; +} +.layout-single-column .scrollable .account-card__bio:after { + background: linear-gradient(270deg, var(--color-content-bg), transparent); +} +.layout-single-column .account-card__title__avatar .account__avatar { + border: 0; + border-radius: 50%; + overflow: visible; +} +.layout-single-column .account-card__title__avatar img { + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 3px var(--color-content-bg); +} + +/* Account recommendations (For You Tab + User directory */ +.layout-single-column .scrollable .account-card { + margin: 0 0 10px; + background-color: var(--color-content-bg); + border-radius: 7px; +} +.layout-single-column .account-card__header { + padding: 0; + border-radius: 7px 7px 0 0; + height: 128px; + overflow: hidden; +} +.layout-single-column .scrollable .account-card__bio:after { + background: linear-gradient(270deg, var(--color-content-bg), transparent); +} +.layout-single-column .account-card__title__avatar .account__avatar { + border: 0; + border-radius: 50%; + overflow: visible; +} +.layout-single-column .account-card__title__avatar img { + border: 0; + border-radius: 50%; + box-shadow: 0 0 0 3px var(--color-content-bg); +} +.layout-single-column .account-card__title .display-name bdi, +.layout-single-column .account-card__counters__item, +.layout-single-column .account-card__counters__item small { + color: var(--color-content-fg-bold); +} +.layout-single-column .account-card__counters__item small { + opacity: .7; +} +.layout-single-column .account-card__bio a { + color: var(--color-accent); +} +.layout-single-column .filter-form { + background-color: var(--color-accent-bg); + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .filter-form__column { + padding: 10px 15px; +} + +/* πŸ“° Trending stories */ +.layout-single-column .story { + background-color: var(--color-content-bg); +} +.layout-single-column .story:not(:last-child) { + border-bottom: 2px solid var(--color-content-secondary-separator); +} +.layout-single-column .story, +.layout-single-column .story__details__title { + color: var(--color-content-fg); +} +.layout-single-column .story:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .story__details__publisher, +.layout-single-column .story__details__shared { + color: var(--color-fg); +} + +/* πŸ” Search field and search results */ +.layout-single-column .search { + margin-bottom: 10px; +} +.layout-single-column .search__input { + border-radius: 7px; + background-color: var(--color-accent-bg); + color: var(--color-content-fg); + border: none; +} +.layout-single-column .search__input::placeholder, +.layout-single-column .compose-form .spoiler-input__input::placeholder { + font-weight: 500; + color: var(--color-accent); +} +.layout-single-column .search__input:focus { + box-shadow: inset 0 0 0 2px var(--color-accent); +} +.layout-single-column .compose-panel .fa-search, +.layout-single-column .compose-panel .fa.active { + opacity: 1; + right: 15px; + top: 15px; +} +.layout-single-column .compose-panel .fa-times-circle.active { + top: 16px; +} +.layout-single-column .compose-panel .fa-search::before { + content: " "; +} +.layout-single-column .compose-panel .fa-search.active::before, +.layout-single-column .fa-search.column-header__icon::before { + content: var(--icon-search); +} +.layout-single-column .explore__search-results { + background-color: var(--color-content-bg); + border-radius: 7px; + overflow: hidden; +} +.layout-single-column .explore__search-header { + background-color: transparent; +} +.layout-single-column .explore__search-results .account { + padding-top: 16px; +} +.layout-single-column .account .account__details > span { + color: var(--color-content-fg); +} +.layout-single-column .account .account__details .verified-badge { + color: var(--color-accent); +} +.layout-single-column .search__popout { + background-color: var(--color-content-bg); + border-radius: 7px; + box-shadow: 0 4px 6px rgba(0,0,0,.1); + margin-top: 5px; +} +.layout-single-column .search__popout h4, +.layout-single-column .search__popout__menu__message, +.layout-single-column .search__popout__menu__item { + color: var(--color-content-fg); +} +.layout-single-column .search__popout__menu__item mark { + color: var(--color-content-fg-bold); +} +.search__popout__menu__item.selected, +.search__popout__menu__item:active, +.search__popout__menu__item:focus, +.search__popout__menu__item:hover, +.search__popout__menu__item.selected mark, +.search__popout__menu__item:active mark, +.search__popout__menu__item:focus mark, +.search__popout__menu__item:hover mark { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +@media screen and (max-width:1174px) { + .layout-single-column .search { + margin-bottom: 0; + } + .layout-single-column .explore__search-header { + padding-top: 2px; + } + .layout-single-column .search__input { + padding: 13px; + } + .layout-single-column i.fa-search, + .layout-single-column i.fa.active { + transform: scale(1); + top: 13px; + } + .layout-single-column .explore__search-header { + padding: 0 0 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } + .layout-single-column .explore__search-header { + padding: 10px; + } +} +.layout-single-column .dismissable-banner { + background-color: var(--color-accent); + box-shadow: 0 5px var(--color-content-bg); + border-radius: 7px 7px 0 0; + border: 0; + margin: 0; +} +.layout-single-column .dismissable-banner__message, +.layout-single-column .dismissable-banner__action .icon-button { + color: var(--color-accent-fg); +} + + + +/* πŸ”” Notifications + ---------------- */ +.layout-single-column .status.muted .status__content, +.layout-single-column .status.muted .status__content a, +.layout-single-column .status.muted .status__content p, +.layout-single-column .status.muted .status__display-name strong, +.layout-single-column .attachment-list__list a, +.layout-single-column .attachment-list.compact .fa { + color: var(--color-content-fg-muted); +} +.layout-single-column .notification.unread::before, +.layout-single-column .status__wrapper.unread::before { + background-color: var(--color-accent); + width: 7px; + border: 0; + top: 5px; + height: auto; + bottom: 5px; + border-radius: 8px; + left: 5px; + z-index: 1; +} +.layout-single-column .notification__message { + padding: 12px 12px 0; + background-color: var(--color-content-bg); + color: var(--color-content-fg-bold); +} +.layout-single-column .notification__message .fa { + color: var(--color-accent); +} +.layout-single-column .notification__favourite-icon-wrapper { + width: 56px; + text-align: right; +} +.layout-single-column .notification__favourite-icon-wrapper i.fa-star { + font-size: 15px; +} +.layout-single-column .notification__favourite-icon-wrapper i.fa-star:before { + line-height: 24px; +} +.layout-single-column .notification .status__wrapper { + padding-top: 0; +} +.layout-single-column .notification-favourite .status__action-bar, +.layout-single-column .notification-reblog .status__action-bar, +.layout-single-column .notification-poll .status__action-bar, +.layout-single-column .notification-status .status__action-bar { + display: none; +} +.layout-single-column .account { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-left: 22px; + padding-top: 4px; +} +.layout-single-column .explore__search-results .account { + padding-top: 16px; +} + + + +/* πŸ“‹ Lists tab */ +.layout-single-column .column-inline-form { + background-color: var(--color-accent-bg); + border-radius: 7px; + margin-bottom: 10px; +} +.layout-single-column .column-inline-form label input, +.layout-single-column .column-inline-form label input:focus { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-radius: 7px; +} +.layout-single-column .column-inline-form label input:focus { + box-shadow: 0 0 0 2px var(--color-accent); +} +.layout-single-column .column-subheading, +.layout-single-column .columns-area__panels__main .column-link { + background-color: var(--color-content-bg); + color: var(--color-fg); +} +.layout-single-column .column-subheading { + color: var(--color-fg-muted); +} +.layout-single-column .columns-area__panels__main .column-link { + margin-left: 0; + width: 100%; + border-bottom: 2px solid var(--color-content-secondary-separator); + box-sizing: border-box; +} +.layout-single-column .columns-area__panels__main .column-link:hover { + background-color: var(--color-content-secondary-bg); + color: var(--color-accent); +} +.layout-single-column .columns-area__panels__main article:last-child .column-link { + border: 0; +} + +/* List adder dialog */ +.layout-single-column .list-adder, +.layout-single-column .list-adder__account, +.layout-single-column .list-adder__lists { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .list-adder__account { + margin-top: 12px; +} +.layout-single-column .list-adder .column-inline-form { + border-radius: 0; +} +.list-adder .list { + border-bottom: 2px solid var(--color-content-secondary-separator); +} + + +/* βž• Follow requests */ +.layout-single-column #Follow-requests { + margin-bottom: 0; + z-index: 0; +} +.layout-single-column .account-authorize__wrapper { + margin: 10px 0; +} +.layout-single-column .account-authorize { + background-color: var(--color-content-bg); + border-radius: 7px 7px 0 0; + padding: 20px +} +.layout-single-column .account--panel { + background-color: var(--color-accent-bg); + border: 0; + border-radius: 0 0 7px 7px; +} +.layout-single-column .account__header__content { + color: var(--color-content-fg); +} +.layout-single-column .account--panel__button:first-child .icon-button { + color: var(--color-accent); +} +@media screen and (max-width:1174px) { + .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + position: absolute; + right: 0; + margin: 0; + width: auto; + padding: 12px; + } +} + + +/* ⏺️ Other UI components : buttons, toggles, ... + ----------------------------------------- */ +.layout-single-column .button, +.layout-single-column .account__header__tabs__buttons .icon-button { + border-radius: 7px; +} +.layout-single-column .button, +.layout-single-column .button.logo-button, +.layout-single-column .rules-list li:before, +.layout-single-column .icon-with-badge__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + transition: all .2s; +} +.layout-single-column .text-icon-button.active, +.layout-single-column .button.button-tertiary, +.layout-single-column .account__header__fields a, +.layout-single-column .account__header__bio .account__header__fields a, +.layout-single-column .reply-indicator__content a.unhandled-link, +.layout-single-column .status__content a, +.layout-single-column .status__content a.hashtag, +.layout-single-column .status__content a.unhandled-link, +.layout-single-column .column-back-button, +.layout-single-column .about__section__title, +.layout-single-column .prose a, +.layout-single-column .column-link--transparent.active, +.layout-single-column .column-header > .column-header__back-button, +.layout-single-column .column-header__back-button, +.layout-single-column .interaction-modal__icon, +.layout-single-column .status__content a.mention, +.layout-single-column .status__content__read-more-button, +.layout-single-column .status__action-bar__dropdown .icon-button.active, +.layout-single-column .account__relationship .icon-button.active, +.layout-single-column .account__header__tabs__buttons .icon-button.active, +.layout-single-column .text-btn, +.layout-single-column .detailed-status__action-bar-dropdown .icon-button { + color: var(--color-accent); +} +.layout-single-column .icon-button, +.layout-single-column .icon-button.inverted, +.layout-single-column .reply-indicator__content .status__content__spoiler-link, +.layout-single-column .status__content .status__content__spoiler-link { + color: var(--color-content-fg); +} +.layout-single-column .reply-indicator__content .status__content__spoiler-link, +.layout-single-column .status__content .status__content__spoiler-link { + background-color: var(--color-accent-bg); +} +.layout-single-column .account__header__tabs__buttons .icon-button { + padding: 3px; + border: 0; + color: var(--color-content-fg); + background-color: var(--color-content-secondary-bg); +} +.layout-single-column .account__header__tabs__buttons .icon-button:hover { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .icon-button:active, +.layout-single-column .icon-button:focus, +.layout-single-column .icon-button:hover { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .language-dropdown__dropdown__results__item.active, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover { + background-color: var(--color-accent); +} +.layout-single-column .button:not(.button-secondary):active, +.layout-single-column .button:not(.button-secondary):focus, +.layout-single-column .button:not(.button-secondary):hover, +.layout-single-column .button.button-tertiary:active, +.layout-single-column .button.button-tertiary:focus, +.layout-single-column .button.button-tertiary:hover, +.layout-single-column .button.logo-button:active, +.layout-single-column .button.logo-button:focus, +.layout-single-column .button.logo-button:hover { + background-color: var(--color-accent-focus); +} + +/* ⏺️ Toggles */ +.layout-single-column .setting-toggle__label { + vertical-align: top; +} +.layout-single-column .react-toggle-track { + background-color: var(--color-content-fg-muted); +} +.layout-single-column .react-toggle-thumb { + border: 0; +} +.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, +.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent); +} +.layout-single-column .react-toggle--checked .react-toggle-thumb { + border-color: var(--color-accent); +} + + +/* ⏺️ Radio buttons */ +.layout-single-column .radio-button { + color: var(--color-content-fg); +} +.layout-single-column .radio-button__input { + border-width: 2px; + border-color: var(--color-content-fg-muted); + background-color: var(--color-content-bg); +} +.layout-single-column .radio-button__input.checked { + border-color: var(--color-accent); + background-color: var(--color-accent); +} + + +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__arrow:before { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 0; +} +.layout-single-column .dropdown-menu__item a:active, +.layout-single-column .dropdown-menu__item a:focus, +.layout-single-column .dropdown-menu__item a:hover, +.layout-single-column .dropdown-menu__item button:active, +.layout-single-column .dropdown-menu__item button:focus, +.layout-single-column .dropdown-menu__item button:hover { + background: var(--color-accent); + color: var(--color-accent-fg); + outline: 0; +} +.layout-single-column .dropdown-menu__separator { + border-color: var(--color-content-secondary-separator); +} + +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active, +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value, +.layout-single-column .privacy-dropdown__option.active, +.layout-single-column .privacy-dropdown__option.active:hover, +.layout-single-column .privacy-dropdown__option:hover { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, +.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.layout-single-column .privacy-dropdown .icon-button.inverted.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +.layout-single-column .button.button-tertiary.button--confirmation, +.layout-single-column .button.button-tertiary.button--destructive { + background-color: transparent; +} +.layout-single-column .button.button-tertiary.button--confirmation { + color: #4e8a6b; + background-color: rgba(121, 189, 154, 0.3); +} +.layout-single-column .button.button-tertiary.button--destructive { + color: #df405a; + background-color: rgba(223, 64, 90, 0.3); +} +.layout-single-column .button.button-tertiary.button--confirmation:active, +.layout-single-column .button.button-tertiary.button--confirmation:focus, +.layout-single-column .button.button-tertiary.button--confirmation:hover { + background-color: #79bd9a; + color: #ffffff; +} +.layout-single-column .button.button-tertiary.button--destructive:active, +.layout-single-column .button.button-tertiary.button--destructive:focus, +.layout-single-column .button.button-tertiary.button--destructive:hover { + background-color: #df405a; + color: #ffffff; +} +@media (prefers-color-scheme: dark) { + .layout-single-column .button.button-tertiary.button--confirmation { + color: #72cb9d; + } + .layout-single-column .button.button-tertiary.button--destructive { + color: #f3637b; + } +} +.layout-single-column .app-body .block-modal__cancel-button, +.layout-single-column .app-body .confirmation-modal__cancel-button, +.layout-single-column .app-body .confirmation-modal__secondary-button, +.layout-single-column .app-body .mute-modal__cancel-button { + background-color: transparent; +} +.layout-single-column .status__content a.hashtag { + color: var(--color-accent); +} + + + +/* πŸ–±οΈ Interaction modals + --------------------- */ +.layout-single-column .interaction-modal { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .interaction-modal, +.layout-single-column .interaction-modal__lead h3 { + color: var(--color-content-fg); +} +.layout-single-column .interaction-modal__lead p, +.layout-single-column .interaction-modal__choices__choice p { + color: var(--color-fg); +} +.layout-single-column .interaction-modal .button, +.layout-single-column .interaction-modal .button.button-tertiary { + padding: 10px 18px; +} +.layout-single-column .interaction-modal .button.button-tertiary:hover { + background-color: var(--color-content-secondary-separator); +} +.layout-single-column .copypaste input { + border-color: var(--color-accent); + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .interaction-modal .copypaste button { + padding: 7px 18px; +} +.layout-single-column .modal-root__overlay { + background-color: hsla(0, 0%, 1%, 0.7); +} +.layout-single-column .modal-root__modal, +.layout-single-column .boost-modal__container, +.layout-single-column .mute-modal__container, +.layout-single-column .block-modal__container { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .boost-modal__container { + margin-bottom: -11px; +} +.layout-single-column .confirmation-modal__container, +.layout-single-column .mute-modal__container, +.layout-single-column .block-modal__container { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .block-modal__action-bar, +.layout-single-column .boost-modal__action-bar, +.layout-single-column .confirmation-modal__action-bar, +.layout-single-column .mute-modal__action-bar { + background-color: var(--color-accent-bg); +} +.layout-single-column .block-modal__action-bar > div, +.layout-single-column .boost-modal__action-bar > div, +.layout-single-column .confirmation-modal__action-bar > div, +.layout-single-column .mute-modal__action-bar > div, +.layout-single-column .boost-modal__container .status__content__text, +.layout-single-column .boost-modal__container .display-name strong.display-name__html, +.layout-single-column .boost-modal__container .status__info, +.layout-single-column .boost-modal__container .status__relative-time time, +.layout-single-column .boost-modal__container .status.light .status__visibility-icon { + color: var(--color-content-fg); +} +.layout-single-column .actions-modal ul li:not(:empty) a { + color: var(--color-content-fg); +} +.layout-single-column .actions-modal ul li:not(:empty) a.active, +.layout-single-column .actions-modal ul li:not(:empty) a.active button, +.layout-single-column .actions-modal ul li:not(:empty) a:active, +.layout-single-column .actions-modal ul li:not(:empty) a:active button, +.layout-single-column .actions-modal ul li:not(:empty) a:focus, +.layout-single-column .actions-modal ul li:not(:empty) a:focus button, +.layout-single-column .actions-modal ul li:not(:empty) a:hover, +.layout-single-column .actions-modal ul li:not(:empty) a:hover button { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} + +/* πŸ–ΌοΈ Picture in Picture */ +.layout-single-column .picture-in-picture { + box-shadow: 0 0 5px rgba(0, 0, 0, .2); + border-radius: 7px; +} +.layout-single-column .picture-in-picture__footer, +.layout-single-column .picture-in-picture__header { + background-color: var(--color-content-bg); +} +.layout-single-column .picture-in-picture__header .display-name span { + color: var(--color-content-fg-muted); +} + +/* ⏯️ Video controls */ +.layout-single-column .video-player__seek__progress, +.layout-single-column .video-player__volume__handle, +.layout-single-column .video-player__volume__current, +.layout-single-column .video-player__seek__handle { + background-color: var(--color-accent); +} + + +/* πŸ“„ Meta + ------- */ +.layout-single-column .link-footer p, +.layout-single-column .link-footer a { + color: var(--color-fg-muted); +} + +/* Server banner */ +.layout-single-column .server-banner__introduction { + display: none; +} +.layout-single-column .server-banner { + padding: 0 0 20px; +} +.layout-single-column .server-banner__hero { + border-radius: 7px 7px 0 0; + margin-bottom: 0; +} +.layout-single-column .server-banner__description { + padding: 20px 15px 20px; + margin-bottom: 0; + background-color: var(--color-content-bg); +} +.layout-single-column .server-banner__meta { + padding: 10px 15px 20px; + background-color: var(--color-content-bg); + gap: 0; + margin: 0; + border-radius: 0 0 7px 7px; + align-items: end; +} +.layout-single-column .server-banner h4 { + color: var(--color-fg); +} +.layout-single-column .server-banner__number { + color: var(--color-content-fg-bold); +} +.layout-single-column .server-banner__number-label { + color: var(--color-content-fg); +} +.layout-single-column .server-banner .account { + background-color: transparent; + box-shadow: none; + padding: 0; +} +.layout-single-column .server-banner__meta__column:first-child { + width: calc(60% - 5px); +} +.layout-single-column .server-banner__meta__column:nth-child(2) { + width: calc(40% - 5px); +} +.layout-single-column .server-banner__meta__column:nth-child(2) h4 { + display: none; +} +.layout-single-column .server-banner .button.button-secondary { + padding: 10px; + margin: 10px 0; +} +.layout-single-column .button.button-secondary, +.layout-single-column .button.button-tertiary { + border: 0; + background-color: var(--color-accent-bg); + color: var(--color-accent); +} +.layout-single-column .button.button-secondary:hover, +.layout-single-column .button.button-tertiary:hover { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .sign-in-banner .button, +.layout-single-column .button.button-secondary, +.layout-single-column .button.button-tertiary { + padding: 10px 18px; +} +.layout-single-column .sign-in-banner p { + color: var(--color-fg); + opacity: .5; +} + + + +/* πŸ“œ About page + ------------- */ +.layout-single-column .scrollable.about { + background-color: var(--color-content-bg); + display: flex; + flex-flow: column; +} +.layout-single-column .about__header { + order: 1; + margin-bottom: 10px; +} +.layout-single-column .about__section:nth-child(3) { + order: 2; +} +.layout-single-column .about__meta { + order: 3; +} +.layout-single-column .about__section:nth-child(4) { + order: 4; +} +.layout-single-column .about__section:nth-child(5) { + order: 5; +} +.layout-single-column .link-footer { + order: 6; +} +.layout-single-column .about__footer { + order: 7; +} +.layout-single-column .about__header h1, +.layout-single-column .about__header p, +.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { + display: none; +} +.layout-single-column .about__header p, +.layout-single-column .about__meta h4 { + color: var(--color-fg); +} +.layout-single-column .about__header__hero { + margin: -20px -20px 20px; + width: calc(100% + 40px); + border-radius: 7px 7px 0 0; + background-color: var(--color-content-bg); +} +.layout-single-column .about__header__hero, +.layout-single-column .about__meta { + margin-bottom: 10px; +} +.layout-single-column .about__header h1 { + margin-bottom: 0; +} +.layout-single-column .about__mail { + color: var(--color-content-fg); +} +.layout-single-column .about__meta h4 { + font-size: 12px; + font-weight: bold; + margin-bottom: 8px; +} +.layout-single-column .about__meta .account { + background: none; + box-shadow: none; + padding: 0; +} +.layout-single-column .about__meta__divider { + border-left: 3px solid var(--color-content-secondary-separator); +} +@media screen and (max-width:600px) { + .layout-single-column .about__meta__divider { + border-top: 3px solid var(--color-content-secondary-separator); + width: 90%; + } +} +.layout-single-column .about__section:nth-child(3) .about__section__body { + padding-bottom: 4em; +} +.layout-single-column .about__meta, +.layout-single-column .about__section__title { + color: var(--color-accent); + background-color: var(--color-content-secondary-bg); + border: 0; + border-radius: 7px; +} +.layout-single-column .about__section.active .about__section__title { + border-radius: 7px 7px 0 0; +} +.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { + border: 0 !important; + background-color: var(--color-content-secondary-bg); + border-radius: 0 0 7px 7px; +} + +.layout-single-column .prose, +.layout-single-column .prose p, +.layout-single-column .prose b, +.layout-single-column .prose h1, +.layout-single-column .prose h2, +.layout-single-column .prose h3, +.layout-single-column .prose h4, +.layout-single-column .prose h5, +.layout-single-column .prose h6, +.layout-single-column .prose strong, +.layout-single-column .rules-list, +.layout-single-column .about__domain-blocks__domain h6, +.layout-single-column .about__domain-blocks__domain__type { + color: var(--color-content-fg); +} +.layout-single-column .prose ul>li:before { + background-color: var(--color-fg); +} +.layout-single-column .about__section__body .prose hr { + border-color: var(--color-content-secondary-separator); + margin-top: 2em; + margin-bottom: 2em; + border-width: 3px; +} +.layout-single-column .about__section__body .prose a, +.layout-single-column .about__section__body .prose a:hover { + color: var(--color-content-fg); + text-decoration: none; +} +.layout-single-column .about__section__body .prose small.lang_label { + margin-left: -2em; + display: block; + color: var(--color-content-fg-bold); + opacity: .5; + font-weight: bold; + font-size: 80%; + float: left; +} +.about__section.active .about__section__title { + background-color: var(--color-accent-bg); +} +.layout-single-column .rules-list li { + border-bottom: 2px solid #f5f2ef; + padding: 1em 1.75em 1em 3.4em; +} +.layout-single-column .rules-list li:last-child { + border-bottom: 0; +} +.about__domain-blocks { + background-color: var(--color-content-bg); + border: 0; +} +.about__domain-blocks__domain { + color: var(--color-content-fg); + border-bottom: 0; +} +.about__domain-blocks__domain:nth-child(2n) { + background-color: var(--color-content-secondary-bg); +} + + +/* πŸ‘‹ Hide superfluous UI */ +.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.layout-single-column .navigation-panel__legal > hr, +.layout-single-column .navigation-panel > .column-link:only-of-type, /* Hide Explore tab for logged-out users */ +.layout-single-column .navigation-panel__sign-in-banner + .navigation-panel__legal + .flex-spacer + .getting-started__trends, /* Hide Trending section for logged-out users */ +.layout-single-column .about__footer, /* Hide meta footer */ +.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ +.layout-single-column .ui__header__links .button.button-tertiary, +.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ +.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { + display: none; +} diff --git a/mastodon/config/themes.yml b/mastodon/config/themes.yml new file mode 100644 index 0000000..8b0b6d2 --- /dev/null +++ b/mastodon/config/themes.yml @@ -0,0 +1,5 @@ +default: styles/application.scss +contrast: styles/contrast.scss +mastodon-light: styles/mastodon-light.scss +tangerineui: styles/tangerineui.scss +tangerineui-purple: styles/tangerineui-purple.scss From cffd4184e9609d6e7105c813646d43613fb2f9d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 17:45:43 +0200 Subject: [PATCH 06/12] Added link to mastodon folder --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dd394d0..fdf0a51 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ### Install Tangerine UI as an optional theme on your instance [Recommended]: Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance. This will also allow you to set Tangerine UI as the default theme for your instance, while still letting users change back to Mastodon's default themes in their appearance settings. -1. Add the files from the `mastodon/app` folder in this repository to your Mastodon themes directory: +1. Add the files from the [`mastodon`](https://github.com/nileane/TangerineUI-for-Mastodon/tree/main/mastodon/app/javascript/styles) folder in this repository to your Mastodon themes directory: ``` app/ From 0f30aae4ca828b8a702d5651b7cfff6c602b193a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 17:52:06 +0200 Subject: [PATCH 07/12] . --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fdf0a51..2839486 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ tangerineui: styles/tangerineui.scss | **new** tangerineui-purple: styles/tangerineui-purple.scss | **new** ``` -3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use, otherwise, in their themes list, they will see the unlocalized `themeName` ("tangerineui"), instead of a human-friendly theme name ("Tangerine UI"). +3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized `themeName` ("tangerineui"), instead of a human-friendly theme name ("Tangerine UI"). ```yml themes: From 1f77030855bfa3d3fb4250752eb61fc23e7d2a88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Wed, 19 Jul 2023 18:00:14 +0200 Subject: [PATCH 08/12] Added summary to README --- README.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2839486..548b58a 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,15 @@ A Tangerine redesign for Mastodon's Web UI, using just CSS. Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette. -* Live demo at [nileane.fr](https://nileane.fr) -* [See the announcement post](https://nileane.fr/@nileane/110691663040709608) on Mastodon +* [**Live demo** at nileane.fr](https://nileane.fr) +* [**Announcement** post on Mastodon](https://nileane.fr/@nileane/110691663040709608) + +* [**Installation** for instance admins](#installation-for-instance-admins) + * [Install as the only theme](#install-tangerine-ui-as-the-only-theme-on-your-instance) + * [Install as an optional theme [Recommended]](#install-tangerine-ui-as-an-optional-theme-on-your-instance-recommended) +* [**Installation** for regular users](#installation-for-regular-users) +* [**Things to know**](#things-to-know) +* [**Credits**](#credits) ## Variants @@ -96,7 +103,7 @@ Even if you are not the admin of your instance, you can still use Tangerine UI u * If you are a user on a Glitch-soc instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. ## Accessibility -* I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it. +* I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it before setting Tangerine UI as the only theme on your instance. ## Credits Huge thanks to [Roni Laukkarinen](https://mementomori.social/@rolle) whose work on [Mastodon Bird UI](https://github.com/ronilaukkarinen/mastodon-bird-ui) I adapted for multiple parts of the redesign. The icon replacement implementations I have also adapted from Bird UI. From 3d0667c6f1ac381bf289d787a046eb0bd5c54c96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 19 Jul 2023 18:01:54 +0200 Subject: [PATCH 09/12] Updated summary in README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 548b58a..409dfb5 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ # Tangerine UI for Mastodon 🍊🐘 -A Tangerine redesign for Mastodon's Web UI, using just CSS. +A Tangerine redesign for Mastodon's Web UI, using just CSS. Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette. * [**Live demo** at nileane.fr](https://nileane.fr) * [**Announcement** post on Mastodon](https://nileane.fr/@nileane/110691663040709608) - * [**Installation** for instance admins](#installation-for-instance-admins) * [Install as the only theme](#install-tangerine-ui-as-the-only-theme-on-your-instance) * [Install as an optional theme [Recommended]](#install-tangerine-ui-as-an-optional-theme-on-your-instance-recommended) @@ -13,6 +12,7 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a * [**Things to know**](#things-to-know) * [**Credits**](#credits) + ## Variants * **Tangerine 🍊** From 36d89b42d0b3a1b67b98a985a58f523630a47d6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 19 Jul 2023 18:10:13 +0200 Subject: [PATCH 10/12] Update README.md --- README.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 409dfb5..2b84a32 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,6 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a * [**Things to know**](#things-to-know) * [**Credits**](#credits) - ## Variants * **Tangerine 🍊** @@ -30,7 +29,9 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a ### Install Tangerine UI as the only theme on your instance: * Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance). * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. - * ⚠️ **Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings.** Please make sure there is a consensus among your users for doing so. Otherwise, see below how to install Tangerine UI as an optional site theme for your users. + +⚠️ **Caution: Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their settings.** Please make sure there is a consensus among your users for doing so. +Otherwise, see below how to install Tangerine UI as an optional theme for your users. ### Install Tangerine UI as an optional theme on your instance [Recommended]: Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance. This will also allow you to set Tangerine UI as the default theme for your instance, while still letting users change back to Mastodon's default themes in their appearance settings. @@ -53,7 +54,6 @@ app/ layout-single-column.scss | **new** ``` - 2. **Add Tangerine UI to the config.** To make Tangerine UI available in your users's settings, you need to add a new line to [`config/themes.yml`](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml). Here we're adding 2 new lines, one for Tangerine UI, another for Tangerine UI's purple variant: ```yml @@ -64,7 +64,7 @@ tangerineui: styles/tangerineui.scss | **new** tangerineui-purple: styles/tangerineui-purple.scss | **new** ``` -3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized `themeName` ("tangerineui"), instead of a human-friendly theme name ("Tangerine UI"). +3. **Add a human-friendly name (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized theme name ("*tangerineui-purple*"), instead of a readable theme name ("*Tangerine UI (Purple)*"). ```yml themes: @@ -86,8 +86,6 @@ As an admin, you should also now be able to set Tangerine UI as the default them ![Screenshot : select Tangerine UI as the default theme for your Mastodon instance in the administration panel.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/05fcbb53-54de-40e4-89bd-199107116dfc) - - ## Installation for regular users: Even if you are not the admin of your instance, you can still use Tangerine UI using a browser extension. @@ -96,11 +94,11 @@ Even if you are not the admin of your instance, you can still use Tangerine UI u * πŸͺ» For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead. ## Things to know -* **Tangerine UI currently only supports Mastodon's single column layout**. The advanced view (multiple columns) will not be affected. -* **Tangerine UI auto-switches from light to dark mode based on your OS preference**, whether you set your Mastodon theme to *Mastodon (Dark)* or *Mastodon (Light*). +* **Tangerine UI currently only supports Mastodon's single column layout**. The advanced web interface (multiple columns) will not be affected. +* **Tangerine UI auto-switches from light to dark mode based on your OS preference**. * Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header. -* **Glitch-soc** and **Hometown** instance admins beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes. - * If you are a user on a Glitch-soc instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. +* If you run a **Glitch** or **Hometown** instance, beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes. + * If you are a user on a Glitch instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. ## Accessibility * I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it before setting Tangerine UI as the only theme on your instance. From ecb6b14ac1a6b8d96778ed57c3b88a8b76cbf889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 19 Jul 2023 18:15:27 +0200 Subject: [PATCH 11/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2b84a32..717b18f 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ Even if you are not the admin of your instance, you can still use Tangerine UI u * **Tangerine UI currently only supports Mastodon's single column layout**. The advanced web interface (multiple columns) will not be affected. * **Tangerine UI auto-switches from light to dark mode based on your OS preference**. * Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header. -* If you run a **Glitch** or **Hometown** instance, beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes. +* If you run a **Glitch** or **Hometown** instance, beware: Tangerine UI is currently only meant to be applied on top of Mastodon's vanilla Dark and Light themes. * If you are a user on a Glitch instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI. ## Accessibility From 6fc465ccf3aa9daee121dcb76efe504865a94915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= <914451+nileane@users.noreply.github.com> Date: Wed, 19 Jul 2023 18:16:44 +0200 Subject: [PATCH 12/12] Added Accessibility to README summary --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 717b18f..1bd2fd9 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ Tangerine UI features a bubblier look, a more compact timeline, round avatars, a * [Install as an optional theme [Recommended]](#install-tangerine-ui-as-an-optional-theme-on-your-instance-recommended) * [**Installation** for regular users](#installation-for-regular-users) * [**Things to know**](#things-to-know) +* [**Accessibility**](#accessibility) * [**Credits**](#credits) ## Variants