From 180419e53a0cff0a193e02a6294f51c76c0062c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Tue, 25 Jul 2023 02:41:04 +0200 Subject: [PATCH 01/24] Enforce border radius en back button --- TangerineUI-purple.css | 1 + TangerineUI.css | 1 + .../styles/tangerineui-purple/layout-single-column.scss | 1 + .../app/javascript/styles/tangerineui/layout-single-column.scss | 1 + 4 files changed, 4 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index db39f56..fdc6e57 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1073,6 +1073,7 @@ body.layout-single-column { color: var(--color-content-fg); border: 0; border-radius: 7px; + overflow: hidden; font-weight: bold; margin-bottom: 10px; } diff --git a/TangerineUI.css b/TangerineUI.css index f56f505..8cc20a7 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1073,6 +1073,7 @@ body.layout-single-column { color: var(--color-content-fg); border: 0; border-radius: 7px; + overflow: hidden; font-weight: bold; margin-bottom: 10px; } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index db39f56..fdc6e57 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1073,6 +1073,7 @@ body.layout-single-column { color: var(--color-content-fg); border: 0; border-radius: 7px; + overflow: hidden; font-weight: bold; margin-bottom: 10px; } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index f56f505..8cc20a7 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1073,6 +1073,7 @@ body.layout-single-column { color: var(--color-content-fg); border: 0; border-radius: 7px; + overflow: hidden; font-weight: bold; margin-bottom: 10px; } From 12edc4c19c5c643641f60b16aacc3e32a04fafec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Tue, 25 Jul 2023 02:45:14 +0200 Subject: [PATCH 02/24] Fixed: in thread replies weren't full width to the right --- TangerineUI-purple.css | 3 ++- TangerineUI.css | 3 ++- .../styles/tangerineui-purple/layout-single-column.scss | 3 ++- .../javascript/styles/tangerineui/layout-single-column.scss | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index fdc6e57..543890b 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ・ Purple variant πŸͺ» - version: 1.7.6 + version: 1.7.7 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -742,6 +742,7 @@ body.layout-single-column { .layout-single-column .status--in-thread .status__content, .layout-single-column .status--in-thread .video-player { margin-left: 0; + width: auto; } .layout-single-column .status--in-thread .status__line { -webkit-border-start: 4px solid var(--color-lines); diff --git a/TangerineUI.css b/TangerineUI.css index 8cc20a7..8ca74c6 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7.6 + version: 1.7.7 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -742,6 +742,7 @@ body.layout-single-column { .layout-single-column .status--in-thread .status__content, .layout-single-column .status--in-thread .video-player { margin-left: 0; + width: auto; } .layout-single-column .status--in-thread .status__line { -webkit-border-start: 4px solid var(--color-lines); diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index fdc6e57..543890b 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ・ Purple variant πŸͺ» - version: 1.7.6 + version: 1.7.7 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -742,6 +742,7 @@ body.layout-single-column { .layout-single-column .status--in-thread .status__content, .layout-single-column .status--in-thread .video-player { margin-left: 0; + width: auto; } .layout-single-column .status--in-thread .status__line { -webkit-border-start: 4px solid var(--color-lines); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 8cc20a7..8ca74c6 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7.6 + version: 1.7.7 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -742,6 +742,7 @@ body.layout-single-column { .layout-single-column .status--in-thread .status__content, .layout-single-column .status--in-thread .video-player { margin-left: 0; + width: auto; } .layout-single-column .status--in-thread .status__line { -webkit-border-start: 4px solid var(--color-lines); From 50098b1524b3e46e4f2148b826eff2295aae56ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Tue, 25 Jul 2023 23:00:49 +0200 Subject: [PATCH 03/24] Adjusted post lines color in dark mode --- TangerineUI-purple.css | 8 ++++---- TangerineUI.css | 8 ++++---- .../styles/tangerineui-purple/layout-single-column.scss | 8 ++++---- .../styles/tangerineui/layout-single-column.scss | 8 ++++---- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 543890b..77ac4e9 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -36,7 +36,7 @@ } @media (prefers-color-scheme: dark) { :root { - --color-bg: #000000; + --color-bg: #030303; --color-fg: #d6d2e0; --color-fg-muted: #655e6e; --color-secondary-bg: #1e162b; @@ -55,7 +55,7 @@ --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; - --color-lines: var(--color-content-secondary-separator); + --color-lines: #343434; } } :root { @@ -1209,7 +1209,7 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { - background-color: rgba(0, 0, 0, .7); + background-color: rgba(3, 3, 3, .65); } } } @@ -1470,7 +1470,7 @@ body.layout-single-column { @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); + background-color: rgba(3, 3, 3, 0.65); border: 0; } .layout-single-column a.column-link--transparent.active, diff --git a/TangerineUI.css b/TangerineUI.css index 8ca74c6..a204c5b 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -36,7 +36,7 @@ } @media (prefers-color-scheme: dark) { :root { - --color-bg: #000000; + --color-bg: #030303; --color-fg: #e0d6d1; --color-fg-muted: #6e635e; --color-secondary-bg: #282015; @@ -55,7 +55,7 @@ --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; - --color-lines: var(--color-content-secondary-bg); + --color-lines: #343434; } } :root { @@ -1209,7 +1209,7 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { - background-color: rgba(0, 0, 0, .7); + background-color: rgba(3, 3, 3, .65); } } } @@ -1470,7 +1470,7 @@ body.layout-single-column { @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); + background-color: rgba(3, 3, 3, .65); border: 0; } .layout-single-column a.column-link--transparent.active, diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 543890b..77ac4e9 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -36,7 +36,7 @@ } @media (prefers-color-scheme: dark) { :root { - --color-bg: #000000; + --color-bg: #030303; --color-fg: #d6d2e0; --color-fg-muted: #655e6e; --color-secondary-bg: #1e162b; @@ -55,7 +55,7 @@ --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; - --color-lines: var(--color-content-secondary-separator); + --color-lines: #343434; } } :root { @@ -1209,7 +1209,7 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { - background-color: rgba(0, 0, 0, .7); + background-color: rgba(3, 3, 3, .65); } } } @@ -1470,7 +1470,7 @@ body.layout-single-column { @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); + background-color: rgba(3, 3, 3, 0.65); border: 0; } .layout-single-column a.column-link--transparent.active, diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 8ca74c6..a204c5b 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -36,7 +36,7 @@ } @media (prefers-color-scheme: dark) { :root { - --color-bg: #000000; + --color-bg: #030303; --color-fg: #e0d6d1; --color-fg-muted: #6e635e; --color-secondary-bg: #282015; @@ -55,7 +55,7 @@ --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; - --color-lines: var(--color-content-secondary-bg); + --color-lines: #343434; } } :root { @@ -1209,7 +1209,7 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { - background-color: rgba(0, 0, 0, .7); + background-color: rgba(3, 3, 3, .65); } } } @@ -1470,7 +1470,7 @@ body.layout-single-column { @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); + background-color: rgba(3, 3, 3, .65); border: 0; } .layout-single-column a.column-link--transparent.active, From 16d670ff9a6d34f5621b5947860afbe5c2f364b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 20:19:43 +0200 Subject: [PATCH 04/24] Restored borders on most elements + tons of optimizations in this regard --- TangerineUI-purple.css | 757 +++++++++++++---- TangerineUI.css | 759 ++++++++++++++---- .../layout-single-column.scss | 757 +++++++++++++---- .../tangerineui/layout-single-column.scss | 759 ++++++++++++++---- 4 files changed, 2378 insertions(+), 654 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 77ac4e9..2983b6a 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ・ Purple variant πŸͺ» - version: 1.7.7 + version: 1.8 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -28,10 +28,11 @@ --color-accent: #6364ff; --color-accent-focus: #563acc; + --color-accent-border: rgba(99, 100, 255, 0.12); --color-accent-bg: #e5ddf6; --color-accent-fg: #ffffff; - --color-lines: var(--color-bg); + --color-lines: #e1dde4; } @media (prefers-color-scheme: dark) { @@ -52,6 +53,7 @@ --color-accent: #7a7af9; --color-accent-focus: #5a47ff; + --color-accent-border: rgba(122, 122, 249, 0.12); --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; @@ -254,8 +256,11 @@ body.layout-single-column { } .layout-single-column .scrollable, .layout-single-column .column > .scrollable { - border-radius: 7px !important; max-height: max-content; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } @@ -513,8 +518,11 @@ body.layout-single-column { padding: 0 0 71px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { color: var(--color-content-fg-bold); @@ -531,6 +539,14 @@ body.layout-single-column { border-top: 0; border-radius: 0; } +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-bottom: 1px solid var(--color-lines); +} .layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, .layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, .layout-single-column .compose-form .character-counter { @@ -547,6 +563,10 @@ body.layout-single-column { padding-left: 20px; padding-top: 20px; } +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { + font-size: 130%; + opacity: .5; +} .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); @@ -556,7 +576,7 @@ body.layout-single-column { } .layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, @@ -574,15 +594,18 @@ body.layout-single-column { color: var(--color-accent-fg); } .layout-single-column .compose-form .compose-form__buttons-wrapper { - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); + border-left: 1px solid var(--color-accent-border); + border-right: 1px solid var(--color-accent-border); + border-top: 0; + border-bottom: 0; box-shadow: none; margin: 0; border-radius: 0; - border: 0; } .layout-single-column .compose-form .compose-form__warning, .layout-single-column .simple_form .recommended, @@ -597,6 +620,12 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg); } + +.layout-single-column .compose-form .autosuggest-input { + box-sizing: border-box; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; @@ -633,11 +662,83 @@ body.layout-single-column { padding: 0 10px 10px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } +/* Publish button */ +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 10px; + width: 100%; +} +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { + padding: 10px 18px; +} + +/* Emoji picker */ +.layout-single-column .emoji-button { + margin: 15px 10px 0 0; +} +.layout-single-column .emoji-picker-dropdown__menu { + overflow: hidden; + border-radius: 8px; + background-color: var(--color-content-bg); + box-shadow: + 0 0 0 1px var(--color-lines), + 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .emoji-mart { + width: 100% !important; + display: block; +} +.layout-single-column .emoji-mart-bar:first-child { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); +} +.layout-single-column .emoji-mart-anchor-bar { + background-color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-selected { + color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-icon svg rect { + fill: var(--color-content-fg); +} +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.layout-single-column .emoji-mart-search-icon svg path { + fill: var(--color-accent); +} +.layout-single-column .emoji-mart-search-icon, +.layout-single-column .emoji-mart-search-icon:disabled, +.layout-single-column .emoji-mart-search-icon svg { + opacity: 1; +} +.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { + background-color: var(--color-content-bg); +} +.layout-single-column .emoji-mart-search, +.layout-single-column .emoji-mart-scroll, +.layout-single-column .emoji-mart-category-label span { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .emoji-mart-search input { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); + border-radius: 8px; +} +.layout-single-column .emoji-mart-search input:focus { + border-color: var(--color-accent); + box-shadow: 0 0 0 1px inset var(--color-accent); + outline: 0; +} +.layout-single-column .emoji-mart-search input::placeholder { + color: var(--color-accent); +} + /* πŸ’¬ Posts @@ -663,6 +764,53 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .status__wrapper, + .layout-single-column .detailed-status__wrapper { + border-left: 0; + border-right: 0; + } + .layout-single-column .status__wrapper { + padding: 10px 8px; + } +} +.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, +.layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top: 0; +} +@media screen and (min-width:890px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, + .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + margin-top: 15px; + } } .layout-single-column .status__info { height: 22px; @@ -706,12 +854,19 @@ body.layout-single-column { .layout-single-column .notification__message::before { position: absolute; background-color: var(--color-lines); - height: 2px; - width: calc(100% - 72px); + height: 1px; + width: calc(100% - 77px); right: 0; - top: -2px; + top: -1px; content: ""; } +@media screen and (max-width:889px) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + width: calc(100% - 73px); + } +} + /* 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 */ @@ -719,6 +874,12 @@ body.layout-single-column { .layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { display: none; } +@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + display: none; + } +} /* πŸ‘₯ Threaded replies */ .layout-single-column .status--first-in-thread { @@ -780,14 +941,33 @@ body.layout-single-column { /* πŸ‘οΈ 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); + border-top: 1px solid var(--color-lines); + border-bottom: 1px 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:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ + border-top: 1px solid var(--color-lines); + border-top-right-radius: 8px; + border-top-left-radius: 8px; } -.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 .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ + border-bottom: 1px solid var(--color-lines); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -818,6 +998,16 @@ body.layout-single-column { .layout-single-column article > .account { padding: 16px; } +.layout-single-column article:first-child > .account { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column article:last-child > .account { + border-bottom: 1px solid var(--color-lines); + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -840,6 +1030,9 @@ body.layout-single-column { border-radius: 30px; position: relative; } +.layout-single-column .status__action-bar .icon-button .fa { + transform: scale(.8); +} .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, @@ -998,7 +1191,7 @@ body.layout-single-column { .layout-single-column .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; contain: content; } .layout-single-column .empty-column-indicator a { @@ -1047,11 +1240,17 @@ body.layout-single-column { } .layout-single-column .conversation { background-color: var(--color-content-bg); - border-bottom: 3px solid var(--color-content-secondary-separator); + border-bottom: 1px solid var(--color-lines); } .layout-single-column .conversation__content__relative-time { opacity: .7; } +@media screen and (min-width:890px) { + .layout-single-column .conversation { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} @@ -1059,33 +1258,13 @@ body.layout-single-column { ----------------- */ .layout-single-column .tabs-bar__wrapper { background-color: transparent; - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 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; - overflow: hidden; - 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 { + padding-bottom: 10px; } .layout-single-column .column-header__wrapper.active:before { background: none; @@ -1094,6 +1273,49 @@ body.layout-single-column { .layout-single-column .column-header__wrapper.active { box-shadow: 0 0; } +.layout-single-column .column-header__wrapper::after, +.layout-single-column .column-back-button::after { + content: " "; + position: absolute; + left: 0; + right: 0; + bottom: -10px; + border-radius: 8px 8px 0 0; + box-shadow: + 0 -5px var(--color-bg), + 0 -10px var(--color-bg), + 0 -15px var(--color-bg), + 0 -20px var(--color-bg); + height: 10px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + background-color: transparent; + z-index: -1; +} +.layout-single-column .column-header { + border-radius: 8px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; + overflow: hidden; + font-weight: bold; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-back-button { + margin-bottom: 10px; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} .layout-single-column .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; @@ -1105,6 +1327,10 @@ body.layout-single-column { background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { + .layout-single-column .column-header__wrapper::after, + .layout-single-column .column-back-button::after { + display: none; + } .layout-single-column .column-header__button.active, .layout-single-column .column-header__button.active:hover, .layout-single-column .column-header__button:hover { @@ -1115,16 +1341,36 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border-bottom: 0; + border: 1px solid var(--color-accent-border); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - opacity: .6; + background-color: var(--color-accent-border); } +@media screen and (min-width:890px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + border-radius: 8px 8px 0 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + margin-top: 15px; + } +} + .layout-single-column .column-header__collapsible { border-bottom: 0; - border-radius: 7px; + border-radius: 8px; box-shadow: 0 -20px 0 var(--color-bg); + background-color: var(--color-secondary-bg); +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + border: 1px solid var(--color-lines); +} +.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { + background-color: transparent; } @media screen and (max-width:1174px) { .layout-single-column .column-header__collapsible { @@ -1133,7 +1379,7 @@ body.layout-single-column { } } .layout-single-column .column-header__collapsible:not(.collapsed) { - margin-bottom: 10px; + margin-top: 10px; } .layout-single-column .column-header__collapsible-inner { background: var(--color-secondary-bg); @@ -1147,7 +1393,7 @@ body.layout-single-column { } .layout-single-column .column-header > button { padding: 0 0 0 15px; - line-height: 48px; + line-height: 45px; font-weight: bold; } .layout-single-column .column-header__icon { @@ -1170,17 +1416,15 @@ body.layout-single-column { display: none; margin-bottom: 0; border-radius: 0; - height: 55px; - } - .layout-single-column .columns-area--mobile { - border-radius: 7px; + height: 45px; } .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; + height: 45px; + border: 0; } .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); @@ -1196,20 +1440,22 @@ body.layout-single-column { } .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; + height: 100px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .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; + margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + border-color: rgba(255, 255, 255, .1); } } } @@ -1221,8 +1467,8 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 0; - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .account__section-headline a, @@ -1234,12 +1480,13 @@ body.layout-single-column { box-shadow: 0 0 0 4px var(--color-accent-bg) inset; border-radius: 9px; transition: all .2s; + padding: 14px 0; } .layout-single-column .account__section-headline a:hover, .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-lines); + background-color: var(--color-accent-border); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1251,14 +1498,10 @@ body.layout-single-column { 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 { +.layout-single-column .account__section-headline a.active::before, +.layout-single-column .account__section-headline button.active::before, +.layout-single-column .notification__filter-bar a.active::before, +.layout-single-column .notification__filter-bar button.active::before { display: none; } .layout-single-column .account__section-headline button, @@ -1266,21 +1509,32 @@ body.layout-single-column { background-color: transparent; } .layout-single-column .account__section-headline a::after, -.layout-single-column .account__section-headline button::after { +.layout-single-column .account__section-headline button::after, +.layout-single-column .notification__filter-bar a::after, +.layout-single-column .notification__filter-bar button::after, +.layout-single-column .account__section-headline a.active::after, +.layout-single-column .account__section-headline button.active::after, +.layout-single-column .notification__filter-bar a.active::after, +.layout-single-column .notification__filter-bar button.active::after { display: block; position: absolute; content: " "; width: 2px; - background-color: var(--color-accent); + height: auto; + background-color: var(--color-accent-border); top: 8px; - right: -2px; + right: -1px; + left: auto; bottom: 8px; - opacity: .1; border-radius: 50px; z-index: 1; + transform: unset; + border: 0; } .layout-single-column .account__section-headline a:last-child::after, -.layout-single-column .account__section-headline button:last-child::after { +.layout-single-column .account__section-headline button:last-child::after, +.layout-single-column .notification__filter-bar a:last-child:after, +.layout-single-column .notification__filter-bar button:last-child:after { display: none; } @media (prefers-color-scheme: dark) { @@ -1291,6 +1545,19 @@ body.layout-single-column { background-color: var(--color-bg); } } +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } +} +@media screen and (max-width:1174px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-top: 10px; + } +} @@ -1324,23 +1591,48 @@ body.layout-single-column { } .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 .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; } .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 a.column-link--transparent span { + position: relative; +} +@media screen and (min-width:1175px) { + .layout-single-column .column-link:not(.column-link--logo) { + transition: all .2s; + } + .layout-single-column a.column-link--transparent span::before { + content: " "; + left: -40px; + background-color: transparent; + transition: .3s background-color; + top: -12px; + right: -16px; + position: absolute; + border-radius: 8px; + z-index: -1; + bottom: -13px; + } + .layout-single-column a.column-link--transparent:hover span::before { + background-color: var(--color-accent-bg); + } + .layout-single-column a.column-link--transparent.active span::before, + .layout-single-column a.column-link--transparent.active:hover span::before { + background-color: var(--color-content-bg); + } +} .layout-single-column .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -1372,18 +1664,22 @@ body.layout-single-column { .layout-single-column .list-panel i.fa { display: none; } -.layout-single-column .list-panel .column-link { - width: auto; +.layout-single-column .list-panel .column-link span::before { + left: -12px; + top: -10px; + right: -12px;; + bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) { +.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); - color: var(--color-content-fg); } -.layout-single-column .column-link[href="/lists"]:hover + .list-panel, -.layout-single-column .column-link[href="/lists"].active + .list-panel, -.layout-single-column .list-panel:hover { - display: block; - animation: fadein .5s 1; +@media screen and (min-width:1175px) { + .layout-single-column .column-link[href="/lists"]:hover + .list-panel, + .layout-single-column .column-link[href="/lists"].active + .list-panel, + .layout-single-column .list-panel:hover { + display: block; + animation: fadein .5s 1; + } } @keyframes fadein { from { @@ -1413,6 +1709,7 @@ body.layout-single-column { -webkit-backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.5); border-left: 0; + border-top: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .navigation-panel .column-link, .layout-single-column .navigation-panel .navigation-panel__legal, @@ -1420,7 +1717,7 @@ body.layout-single-column { .layout-single-column a.column-link--transparent.active:hover, .layout-single-column .column-link--transparent:hover { flex: 0 0 18vw; - margin: 6px 0 7px; + margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 0; justify-content: center; @@ -1432,11 +1729,10 @@ body.layout-single-column { .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; + margin: 6px 0 8px; padding: 4px 0 3px; - border-radius: 7px; - box-shadow: 0 0 6px rgba(0, 0, 0, .1); - background-color: var(--color-content-bg); + border-radius: 8px; + background-color: #ffffff; } .layout-single-column .column-link__icon { transform: scale(1); @@ -1445,6 +1741,9 @@ body.layout-single-column { .layout-single-column .column-link span { padding-left: .5em; } + .layout-single-column .column-link .fa-list-ul { + margin-right: 0; + } .layout-single-column .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; @@ -1470,8 +1769,11 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { - background-color: rgba(3, 3, 3, 0.65); - border: 0; + background-color: rgba(3, 3, 3, .65); + border-left: 0; + border-right: 0; + border-bottom: 0; + border-top: 1px solid rgba(255, 255, 255, .1); } .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover, @@ -1486,9 +1788,22 @@ body.layout-single-column { /* πŸ‘€ Account view --------------- */ .layout-single-column .account__header { - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .account__header { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__header { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .account__header__image { height: 150px; @@ -1547,7 +1862,7 @@ body.layout-single-column { } .layout-single-column .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { display: none; @@ -1564,17 +1879,17 @@ body.layout-single-column { .layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; - height: 2px; + height: 1px; bottom: -1px; right: 15px; - background-color: var(--color-content-secondary-separator); + background-color: var(--color-lines); left: 15px; position: absolute; border-radius: 50px; } .layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ - border-top-left-radius: 7px; - border-top-right-radius: 7px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; margin-top: 0; } .layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ @@ -1614,7 +1929,17 @@ body.layout-single-column { } .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; + border-radius: 8px 8px 0 0; + border-right: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-top: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .account-timeline__header + article .status__wrapper, + .layout-single-column .account-timeline__header + article .account { + border-left: 0; + border-right: 0; + } } .layout-single-column .follow-request-banner, @@ -1623,7 +1948,7 @@ body.layout-single-column { } .layout-single-column .moved-account-banner { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .follow-request-banner__message, .layout-single-column .moved-account-banner__message { @@ -1636,8 +1961,11 @@ body.layout-single-column { /* ✨ Explore tab -------------- */ +@media screen and (min-width:890px) { .layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; + margin-top: 0; + } } .layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { color: var(--color-verified); @@ -1656,9 +1984,17 @@ body.layout-single-column { } .layout-single-column .explore__links { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; + border: 1px solid var(--color-lines); overflow: hidden; } +@media screen and (max-width:889px) { + .layout-single-column .explore__links { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} .layout-single-column .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); @@ -1673,40 +2009,25 @@ body.layout-single-column { .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; + border-radius: 8px; + border: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable .account-card { + margin: 0 10px 10px; + } } .layout-single-column .account-card__header { padding: 0; - border-radius: 7px 7px 0 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 128px; overflow: hidden; } @@ -1736,7 +2057,7 @@ body.layout-single-column { } .layout-single-column .filter-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .filter-form__column { @@ -1768,10 +2089,10 @@ body.layout-single-column { margin-bottom: 10px; } .layout-single-column .search__input { - border-radius: 7px; + border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: none; + border: 1px solid var(--color-accent-border); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -1779,7 +2100,8 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .search__input:focus { - box-shadow: inset 0 0 0 2px var(--color-accent); + border: 1px solid var(--color-accent); + box-shadow: inset 0 0 0 1px var(--color-accent); } .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { @@ -1791,13 +2113,13 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-times-circle.active, .layout-single-column .search__icon .fa.active { opacity: 1; + z-index: 1; } .layout-single-column .compose-panel .fa-times-circle.active { top: 16px; } .layout-single-column .explore__search-results { background-color: var(--color-content-bg); - border-radius: 7px; overflow: hidden; } .layout-single-column .explore__search-header { @@ -1806,6 +2128,36 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +.layout-single-column .explore__search-results .account:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .account:last-child { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:last-child { + border-bottom: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) { + .layout-single-column .explore__search-results { + border-radius: 8px; + } + .layout-single-column .explore__search-results .account:first-child, + .layout-single-column .explore__search-results .trends__item:first-child { + border-radius: 8px 8px 0 0; + } + .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .trends__item:last-child, + .layout-single-column .explore__search-results .load-more:last-child { + border-radius: 0 0 8px 8px; + } +} .layout-single-column .account .account__details > span { color: var(--color-content-fg); } @@ -1814,7 +2166,7 @@ body.layout-single-column { } .layout-single-column .search__popout { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-top: 5px; } @@ -1855,23 +2207,18 @@ body.layout-single-column { top: 13px; } .layout-single-column .explore__search-header { - padding: 0 0 10px; + padding: 10px 0 0; } } @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; + padding: 10px 10px 0; } } .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-radius: 8px 8px 0 0; border: 0; margin: 0; } @@ -1917,7 +2264,7 @@ body.layout-single-column { .layout-single-column .notification.unread::before, .layout-single-column .status__wrapper.unread::before { background-color: var(--color-accent); - width: 7px; + width: 8px; border: 0; top: 5px; height: auto; @@ -1931,6 +2278,20 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg-bold); } +.layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); +} +@media screen and (min-width:889px) { + .layout-single-column .notification__message { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } + .layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} .layout-single-column .notification__message .fa { color: var(--color-accent); } @@ -1962,20 +2323,38 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +@media screen and (min-width:890px) { + .layout-single-column .account { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } +@media screen and (max-width:1174px) { + .layout-single-column .column-inline-form { + margin-top: 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .column-inline-form { + margin-left: 10px; + margin-right: 10px; + } +} .layout-single-column .column-inline-form label input, .layout-single-column .column-inline-form label input:focus { background-color: var(--color-content-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .column-inline-form label input:focus { box-shadow: 0 0 0 2px var(--color-accent); @@ -1987,10 +2366,22 @@ body.layout-single-column { } .layout-single-column .column-subheading { color: var(--color-fg-muted); + border: 1px solid var(--color-lines); + border-bottom: 0; + border-radius: 8px 8px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .column-subheading { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .columns-area__panels__main .column-link { margin-left: 0; width: 100%; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } @@ -1999,7 +2390,17 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .columns-area__panels__main article:last-child .column-link { - border: 0; + border-bottom: 1px solid var(--color-lines); + border-radius: 0 0 8px 8px; +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main .column-link { + border-left: 0; + border-right: 0; + } + .layout-single-column .columns-area__panels__main article:last-child .column-link { + border-radius: 0; + } } /* List adder dialog */ @@ -2030,13 +2431,13 @@ body.layout-single-column { } .layout-single-column .account-authorize { background-color: var(--color-content-bg); - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; padding: 20px } .layout-single-column .account--panel { background-color: var(--color-accent-bg); border: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .account__header__content { color: var(--color-content-fg); @@ -2059,7 +2460,7 @@ body.layout-single-column { ----------------------------------------- */ .layout-single-column .button, .layout-single-column .account__header__tabs__buttons .icon-button { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .button, .layout-single-column .button.logo-button, @@ -2140,7 +2541,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-content-fg-muted); + background-color: var(--color-accent-border); + box-shadow: + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset } .layout-single-column .react-toggle-thumb { border: 0; @@ -2153,6 +2559,9 @@ body.layout-single-column { .layout-single-column .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } +.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent-focus); +} /* ⏺️ Radio buttons */ @@ -2280,7 +2689,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .interaction-modal .copypaste button { - padding: 7px 18px; + padding: 8px 18px; } .layout-single-column .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); @@ -2385,7 +2794,7 @@ body.layout-single-column { /* πŸ–ΌοΈ Picture in Picture */ .layout-single-column .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .picture-in-picture__footer, .layout-single-column .picture-in-picture__header { @@ -2419,24 +2828,30 @@ body.layout-single-column { padding: 0 0 20px; } .layout-single-column .server-banner__hero { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin-bottom: 0; } .layout-single-column .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .server-banner__meta { - padding: 10px 15px 20px; + padding: 0 15px 20px; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); gap: 0; margin: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; align-items: end; } .layout-single-column .server-banner h4 { color: var(--color-fg); + font-size: 80%; } .layout-single-column .server-banner__number { color: var(--color-content-fg-bold); @@ -2448,6 +2863,8 @@ body.layout-single-column { background-color: transparent; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .server-banner__meta__column:first-child { width: calc(60% - 5px); @@ -2455,9 +2872,6 @@ body.layout-single-column { .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; @@ -2514,7 +2928,7 @@ body.layout-single-column { } .layout-single-column .announcements { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); @@ -2528,7 +2942,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .announcements__mastodon { - border-radius: 0 0 0 7px; + border-radius: 0 0 0 8px; } .layout-single-column .reactions-bar__item { background-color: var(--color-content-bg); @@ -2565,9 +2979,16 @@ body.layout-single-column { ------------- */ .layout-single-column .scrollable.about { background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); display: flex; flex-flow: column; } +@media screen and (max-width:889px) { + .layout-single-column .scrollable.about { + border-left: 0; + border-right: 0; + } +} .layout-single-column .about__header { order: 1; margin-bottom: 10px; @@ -2602,7 +3023,7 @@ body.layout-single-column { .layout-single-column .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); - border-radius: 7px 7px 0 0; + border-radius: 0; background-color: var(--color-content-bg); } .layout-single-column .about__header__hero, @@ -2612,6 +3033,14 @@ body.layout-single-column { .layout-single-column .about__header h1 { margin-bottom: 0; } +@media screen and (min-width:890px) { + .layout-single-column .scrollable.about { + border-radius: 8px !important; + } + .layout-single-column .about__header__hero { + border-radius: 8px 8px 0 0; + } +} .layout-single-column .about__mail { color: var(--color-content-fg); } @@ -2624,6 +3053,8 @@ body.layout-single-column { background: none; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); @@ -2642,15 +3073,15 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .about__section.active .about__section__title { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; } .layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .prose, diff --git a/TangerineUI.css b/TangerineUI.css index a204c5b..eeb76fd 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7.7 + version: 1.8 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -28,10 +28,11 @@ --color-accent: #f76902; --color-accent-focus: #ff9447; + --color-accent-border: rgba(247, 105, 2, 0.12); --color-accent-bg: #f6e5dd; --color-accent-fg: #ffffff; - --color-lines: var(--color-bg); + --color-lines: #e1dde4; } @media (prefers-color-scheme: dark) { @@ -52,6 +53,7 @@ --color-accent: #e68933; --color-accent-focus: #ffa047; + --color-accent-border: rgb(230, 137, 51, 0.12); --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; @@ -254,8 +256,11 @@ body.layout-single-column { } .layout-single-column .scrollable, .layout-single-column .column > .scrollable { - border-radius: 7px !important; max-height: max-content; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } @@ -513,8 +518,11 @@ body.layout-single-column { padding: 0 0 71px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { color: var(--color-content-fg-bold); @@ -531,6 +539,14 @@ body.layout-single-column { border-top: 0; border-radius: 0; } +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-bottom: 1px solid var(--color-lines); +} .layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, .layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, .layout-single-column .compose-form .character-counter { @@ -547,6 +563,10 @@ body.layout-single-column { padding-left: 20px; padding-top: 20px; } +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { + font-size: 130%; + opacity: .5; +} .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); @@ -556,7 +576,7 @@ body.layout-single-column { } .layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, @@ -574,15 +594,18 @@ body.layout-single-column { color: var(--color-accent-fg); } .layout-single-column .compose-form .compose-form__buttons-wrapper { - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); + border-left: 1px solid var(--color-accent-border); + border-right: 1px solid var(--color-accent-border); + border-top: 0; + border-bottom: 0; box-shadow: none; margin: 0; border-radius: 0; - border: 0; } .layout-single-column .compose-form .compose-form__warning, .layout-single-column .simple_form .recommended, @@ -597,6 +620,12 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg); } + +.layout-single-column .compose-form .autosuggest-input { + box-sizing: border-box; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; @@ -633,11 +662,83 @@ body.layout-single-column { padding: 0 10px 10px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } +/* Publish button */ +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 10px; + width: 100%; +} +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { + padding: 10px 18px; +} + +/* Emoji picker */ +.layout-single-column .emoji-button { + margin: 15px 10px 0 0; +} +.layout-single-column .emoji-picker-dropdown__menu { + overflow: hidden; + border-radius: 8px; + background-color: var(--color-content-bg); + box-shadow: + 0 0 0 1px var(--color-lines), + 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .emoji-mart { + width: 100% !important; + display: block; +} +.layout-single-column .emoji-mart-bar:first-child { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); +} +.layout-single-column .emoji-mart-anchor-bar { + background-color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-selected { + color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-icon svg rect { + fill: var(--color-content-fg); +} +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.layout-single-column .emoji-mart-search-icon svg path { + fill: var(--color-accent); +} +.layout-single-column .emoji-mart-search-icon, +.layout-single-column .emoji-mart-search-icon:disabled, +.layout-single-column .emoji-mart-search-icon svg { + opacity: 1; +} +.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { + background-color: var(--color-content-bg); +} +.layout-single-column .emoji-mart-search, +.layout-single-column .emoji-mart-scroll, +.layout-single-column .emoji-mart-category-label span { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .emoji-mart-search input { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); + border-radius: 8px; +} +.layout-single-column .emoji-mart-search input:focus { + border-color: var(--color-accent); + box-shadow: 0 0 0 1px inset var(--color-accent); + outline: 0; +} +.layout-single-column .emoji-mart-search input::placeholder { + color: var(--color-accent); +} + /* πŸ’¬ Posts @@ -663,6 +764,53 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .status__wrapper, + .layout-single-column .detailed-status__wrapper { + border-left: 0; + border-right: 0; + } + .layout-single-column .status__wrapper { + padding: 10px 8px; + } +} +.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, +.layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top: 0; +} +@media screen and (min-width:890px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, + .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } + .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + margin-top: 15px; + } } .layout-single-column .status__info { height: 22px; @@ -706,12 +854,19 @@ body.layout-single-column { .layout-single-column .notification__message::before { position: absolute; background-color: var(--color-lines); - height: 2px; - width: calc(100% - 72px); + height: 1px; + width: calc(100% - 77px); right: 0; - top: -2px; + top: -1px; content: ""; } +@media screen and (max-width:889px) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + width: calc(100% - 73px); + } +} + /* 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 */ @@ -719,6 +874,12 @@ body.layout-single-column { .layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { display: none; } +@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + display: none; + } +} /* πŸ‘₯ Threaded replies */ .layout-single-column .status--first-in-thread { @@ -780,14 +941,33 @@ body.layout-single-column { /* πŸ‘οΈ 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); + border-top: 1px solid var(--color-lines); + border-bottom: 1px 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:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ + border-top: 1px solid var(--color-lines); + border-top-right-radius: 8px; + border-top-left-radius: 8px; } -.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 .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ + border-bottom: 1px solid var(--color-lines); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -818,6 +998,16 @@ body.layout-single-column { .layout-single-column article > .account { padding: 16px; } +.layout-single-column article:first-child > .account { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column article:last-child > .account { + border-bottom: 1px solid var(--color-lines); + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -840,6 +1030,9 @@ body.layout-single-column { border-radius: 30px; position: relative; } +.layout-single-column .status__action-bar .icon-button .fa { + transform: scale(.8); +} .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, @@ -998,7 +1191,7 @@ body.layout-single-column { .layout-single-column .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; contain: content; } .layout-single-column .empty-column-indicator a { @@ -1047,11 +1240,17 @@ body.layout-single-column { } .layout-single-column .conversation { background-color: var(--color-content-bg); - border-bottom: 3px solid var(--color-content-secondary-separator); + border-bottom: 1px solid var(--color-lines); } .layout-single-column .conversation__content__relative-time { opacity: .7; } +@media screen and (min-width:890px) { + .layout-single-column .conversation { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} @@ -1059,33 +1258,13 @@ body.layout-single-column { ----------------- */ .layout-single-column .tabs-bar__wrapper { background-color: transparent; - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 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; - overflow: hidden; - 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 { + padding-bottom: 10px; } .layout-single-column .column-header__wrapper.active:before { background: none; @@ -1094,6 +1273,49 @@ body.layout-single-column { .layout-single-column .column-header__wrapper.active { box-shadow: 0 0; } +.layout-single-column .column-header__wrapper::after, +.layout-single-column .column-back-button::after { + content: " "; + position: absolute; + left: 0; + right: 0; + bottom: -10px; + border-radius: 8px 8px 0 0; + box-shadow: + 0 -5px var(--color-bg), + 0 -10px var(--color-bg), + 0 -15px var(--color-bg), + 0 -20px var(--color-bg); + height: 10px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + background-color: transparent; + z-index: -1; +} +.layout-single-column .column-header { + border-radius: 8px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; + overflow: hidden; + font-weight: bold; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-back-button { + margin-bottom: 10px; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} .layout-single-column .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; @@ -1105,6 +1327,10 @@ body.layout-single-column { background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { + .layout-single-column .column-header__wrapper::after, + .layout-single-column .column-back-button::after { + display: none; + } .layout-single-column .column-header__button.active, .layout-single-column .column-header__button.active:hover, .layout-single-column .column-header__button:hover { @@ -1115,16 +1341,36 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border-bottom: 0; + border: 1px solid var(--color-accent-border); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - opacity: .6; + background-color: var(--color-accent-border); } +@media screen and (min-width:890px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + border-radius: 8px 8px 0 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + margin-top: 15px; + } +} + .layout-single-column .column-header__collapsible { border-bottom: 0; - border-radius: 7px; + border-radius: 8px; box-shadow: 0 -20px 0 var(--color-bg); + background-color: var(--color-secondary-bg); +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + border: 1px solid var(--color-lines); +} +.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { + background-color: transparent; } @media screen and (max-width:1174px) { .layout-single-column .column-header__collapsible { @@ -1133,7 +1379,7 @@ body.layout-single-column { } } .layout-single-column .column-header__collapsible:not(.collapsed) { - margin-bottom: 10px; + margin-top: 10px; } .layout-single-column .column-header__collapsible-inner { background: var(--color-secondary-bg); @@ -1147,7 +1393,7 @@ body.layout-single-column { } .layout-single-column .column-header > button { padding: 0 0 0 15px; - line-height: 48px; + line-height: 45px; font-weight: bold; } .layout-single-column .column-header__icon { @@ -1170,17 +1416,15 @@ body.layout-single-column { display: none; margin-bottom: 0; border-radius: 0; - height: 55px; - } - .layout-single-column .columns-area--mobile { - border-radius: 7px; + height: 45px; } .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; + height: 45px; + border: 0; } .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); @@ -1196,20 +1440,22 @@ body.layout-single-column { } .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; + height: 100px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .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; + margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + border-color: rgba(255, 255, 255, .1); } } } @@ -1221,8 +1467,8 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 0; - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .account__section-headline a, @@ -1234,12 +1480,13 @@ body.layout-single-column { box-shadow: 0 0 0 4px var(--color-accent-bg) inset; border-radius: 9px; transition: all .2s; + padding: 14px 0; } .layout-single-column .account__section-headline a:hover, .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-lines); + background-color: var(--color-accent-border); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1251,14 +1498,10 @@ body.layout-single-column { 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 { +.layout-single-column .account__section-headline a.active::before, +.layout-single-column .account__section-headline button.active::before, +.layout-single-column .notification__filter-bar a.active::before, +.layout-single-column .notification__filter-bar button.active::before { display: none; } .layout-single-column .account__section-headline button, @@ -1266,21 +1509,32 @@ body.layout-single-column { background-color: transparent; } .layout-single-column .account__section-headline a::after, -.layout-single-column .account__section-headline button::after { +.layout-single-column .account__section-headline button::after, +.layout-single-column .notification__filter-bar a::after, +.layout-single-column .notification__filter-bar button::after, +.layout-single-column .account__section-headline a.active::after, +.layout-single-column .account__section-headline button.active::after, +.layout-single-column .notification__filter-bar a.active::after, +.layout-single-column .notification__filter-bar button.active::after { display: block; position: absolute; content: " "; width: 2px; - background-color: var(--color-accent); + height: auto; + background-color: var(--color-accent-border); top: 8px; - right: -2px; + right: -1px; + left: auto; bottom: 8px; - opacity: .1; border-radius: 50px; z-index: 1; + transform: unset; + border: 0; } .layout-single-column .account__section-headline a:last-child::after, -.layout-single-column .account__section-headline button:last-child::after { +.layout-single-column .account__section-headline button:last-child::after, +.layout-single-column .notification__filter-bar a:last-child:after, +.layout-single-column .notification__filter-bar button:last-child:after { display: none; } @media (prefers-color-scheme: dark) { @@ -1291,6 +1545,19 @@ body.layout-single-column { background-color: var(--color-bg); } } +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } +} +@media screen and (max-width:1174px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-top: 10px; + } +} @@ -1324,23 +1591,48 @@ body.layout-single-column { } .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 .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; } .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 a.column-link--transparent span { + position: relative; +} +@media screen and (min-width:1175px) { + .layout-single-column .column-link:not(.column-link--logo) { + transition: all .2s; + } + .layout-single-column a.column-link--transparent span::before { + content: " "; + left: -40px; + background-color: transparent; + transition: .3s background-color; + top: -12px; + right: -16px; + position: absolute; + border-radius: 8px; + z-index: -1; + bottom: -13px; + } + .layout-single-column a.column-link--transparent:hover span::before { + background-color: var(--color-accent-bg); + } + .layout-single-column a.column-link--transparent.active span::before, + .layout-single-column a.column-link--transparent.active:hover span::before { + background-color: var(--color-content-bg); + } +} .layout-single-column .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -1372,18 +1664,22 @@ body.layout-single-column { .layout-single-column .list-panel i.fa { display: none; } -.layout-single-column .list-panel .column-link { - width: auto; +.layout-single-column .list-panel .column-link span::before { + left: -12px; + top: -10px; + right: -12px;; + bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) { +.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); - color: var(--color-content-fg); } -.layout-single-column .column-link[href="/lists"]:hover + .list-panel, -.layout-single-column .column-link[href="/lists"].active + .list-panel, -.layout-single-column .list-panel:hover { - display: block; - animation: fadein .5s 1; +@media screen and (min-width:1175px) { + .layout-single-column .column-link[href="/lists"]:hover + .list-panel, + .layout-single-column .column-link[href="/lists"].active + .list-panel, + .layout-single-column .list-panel:hover { + display: block; + animation: fadein .5s 1; + } } @keyframes fadein { from { @@ -1413,6 +1709,7 @@ body.layout-single-column { -webkit-backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.5); border-left: 0; + border-top: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .navigation-panel .column-link, .layout-single-column .navigation-panel .navigation-panel__legal, @@ -1420,7 +1717,7 @@ body.layout-single-column { .layout-single-column a.column-link--transparent.active:hover, .layout-single-column .column-link--transparent:hover { flex: 0 0 18vw; - margin: 6px 0 7px; + margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 0; justify-content: center; @@ -1432,11 +1729,10 @@ body.layout-single-column { .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; + margin: 6px 0 8px; padding: 4px 0 3px; - border-radius: 7px; - box-shadow: 0 0 6px rgba(0, 0, 0, .1); - background-color: var(--color-content-bg); + border-radius: 8px; + background-color: #ffffff; } .layout-single-column .column-link__icon { transform: scale(1); @@ -1445,6 +1741,9 @@ body.layout-single-column { .layout-single-column .column-link span { padding-left: .5em; } + .layout-single-column .column-link .fa-list-ul { + margin-right: 0; + } .layout-single-column .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; @@ -1471,7 +1770,10 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { background-color: rgba(3, 3, 3, .65); - border: 0; + border-left: 0; + border-right: 0; + border-bottom: 0; + border-top: 1px solid rgba(255, 255, 255, .1); } .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover, @@ -1486,9 +1788,22 @@ body.layout-single-column { /* πŸ‘€ Account view --------------- */ .layout-single-column .account__header { - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .account__header { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__header { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .account__header__image { height: 150px; @@ -1547,7 +1862,7 @@ body.layout-single-column { } .layout-single-column .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { display: none; @@ -1564,17 +1879,17 @@ body.layout-single-column { .layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; - height: 2px; + height: 1px; bottom: -1px; right: 15px; - background-color: var(--color-content-secondary-separator); + background-color: var(--color-lines); left: 15px; position: absolute; border-radius: 50px; } .layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ - border-top-left-radius: 7px; - border-top-right-radius: 7px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; margin-top: 0; } .layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ @@ -1614,7 +1929,17 @@ body.layout-single-column { } .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; + border-radius: 8px 8px 0 0; + border-right: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-top: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .account-timeline__header + article .status__wrapper, + .layout-single-column .account-timeline__header + article .account { + border-left: 0; + border-right: 0; + } } .layout-single-column .follow-request-banner, @@ -1623,7 +1948,7 @@ body.layout-single-column { } .layout-single-column .moved-account-banner { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .follow-request-banner__message, .layout-single-column .moved-account-banner__message { @@ -1636,8 +1961,11 @@ body.layout-single-column { /* ✨ Explore tab -------------- */ -.layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { - border-radius: 7px 7px 0 0; +@media screen and (min-width:890px) { + .layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { + border-radius: 8px 8px 0 0; + margin-top: 0; + } } .layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { color: var(--color-verified); @@ -1656,9 +1984,17 @@ body.layout-single-column { } .layout-single-column .explore__links { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; + border: 1px solid var(--color-lines); overflow: hidden; } +@media screen and (max-width:889px) { + .layout-single-column .explore__links { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} .layout-single-column .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); @@ -1673,40 +2009,25 @@ body.layout-single-column { .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; + border-radius: 8px; + border: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable .account-card { + margin: 0 10px 10px; + } } .layout-single-column .account-card__header { padding: 0; - border-radius: 7px 7px 0 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 128px; overflow: hidden; } @@ -1736,7 +2057,7 @@ body.layout-single-column { } .layout-single-column .filter-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .filter-form__column { @@ -1768,10 +2089,10 @@ body.layout-single-column { margin-bottom: 10px; } .layout-single-column .search__input { - border-radius: 7px; + border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: none; + border: 1px solid var(--color-accent-border); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -1779,7 +2100,8 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .search__input:focus { - box-shadow: inset 0 0 0 2px var(--color-accent); + border: 1px solid var(--color-accent); + box-shadow: inset 0 0 0 1px var(--color-accent); } .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { @@ -1791,13 +2113,13 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-times-circle.active, .layout-single-column .search__icon .fa.active { opacity: 1; + z-index: 1; } .layout-single-column .compose-panel .fa-times-circle.active { top: 16px; } .layout-single-column .explore__search-results { background-color: var(--color-content-bg); - border-radius: 7px; overflow: hidden; } .layout-single-column .explore__search-header { @@ -1806,6 +2128,36 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +.layout-single-column .explore__search-results .account:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .account:last-child { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:last-child { + border-bottom: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) { + .layout-single-column .explore__search-results { + border-radius: 8px; + } + .layout-single-column .explore__search-results .account:first-child, + .layout-single-column .explore__search-results .trends__item:first-child { + border-radius: 8px 8px 0 0; + } + .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .trends__item:last-child, + .layout-single-column .explore__search-results .load-more:last-child { + border-radius: 0 0 8px 8px; + } +} .layout-single-column .account .account__details > span { color: var(--color-content-fg); } @@ -1814,7 +2166,7 @@ body.layout-single-column { } .layout-single-column .search__popout { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-top: 5px; } @@ -1855,23 +2207,18 @@ body.layout-single-column { top: 13px; } .layout-single-column .explore__search-header { - padding: 0 0 10px; + padding: 10px 0 0; } } @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; + padding: 10px 10px 0; } } .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-radius: 8px 8px 0 0; border: 0; margin: 0; } @@ -1917,7 +2264,7 @@ body.layout-single-column { .layout-single-column .notification.unread::before, .layout-single-column .status__wrapper.unread::before { background-color: var(--color-accent); - width: 7px; + width: 8px; border: 0; top: 5px; height: auto; @@ -1931,6 +2278,20 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg-bold); } +.layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); +} +@media screen and (min-width:889px) { + .layout-single-column .notification__message { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } + .layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} .layout-single-column .notification__message .fa { color: var(--color-accent); } @@ -1962,20 +2323,38 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +@media screen and (min-width:890px) { + .layout-single-column .account { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } +@media screen and (max-width:1174px) { + .layout-single-column .column-inline-form { + margin-top: 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .column-inline-form { + margin-left: 10px; + margin-right: 10px; + } +} .layout-single-column .column-inline-form label input, .layout-single-column .column-inline-form label input:focus { background-color: var(--color-content-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .column-inline-form label input:focus { box-shadow: 0 0 0 2px var(--color-accent); @@ -1987,10 +2366,22 @@ body.layout-single-column { } .layout-single-column .column-subheading { color: var(--color-fg-muted); + border: 1px solid var(--color-lines); + border-bottom: 0; + border-radius: 8px 8px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .column-subheading { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .columns-area__panels__main .column-link { margin-left: 0; width: 100%; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } @@ -1999,7 +2390,17 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .columns-area__panels__main article:last-child .column-link { - border: 0; + border-bottom: 1px solid var(--color-lines); + border-radius: 0 0 8px 8px; +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main .column-link { + border-left: 0; + border-right: 0; + } + .layout-single-column .columns-area__panels__main article:last-child .column-link { + border-radius: 0; + } } /* List adder dialog */ @@ -2030,13 +2431,13 @@ body.layout-single-column { } .layout-single-column .account-authorize { background-color: var(--color-content-bg); - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; padding: 20px } .layout-single-column .account--panel { background-color: var(--color-accent-bg); border: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .account__header__content { color: var(--color-content-fg); @@ -2059,7 +2460,7 @@ body.layout-single-column { ----------------------------------------- */ .layout-single-column .button, .layout-single-column .account__header__tabs__buttons .icon-button { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .button, .layout-single-column .button.logo-button, @@ -2140,8 +2541,13 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-content-fg-muted); -} + background-color: var(--color-accent-border); + box-shadow: + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset +} .layout-single-column .react-toggle-thumb { border: 0; } @@ -2153,6 +2559,9 @@ body.layout-single-column { .layout-single-column .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } +.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent-focus); +} /* ⏺️ Radio buttons */ @@ -2280,7 +2689,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .interaction-modal .copypaste button { - padding: 7px 18px; + padding: 8px 18px; } .layout-single-column .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); @@ -2385,7 +2794,7 @@ body.layout-single-column { /* πŸ–ΌοΈ Picture in Picture */ .layout-single-column .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .picture-in-picture__footer, .layout-single-column .picture-in-picture__header { @@ -2419,24 +2828,30 @@ body.layout-single-column { padding: 0 0 20px; } .layout-single-column .server-banner__hero { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin-bottom: 0; } .layout-single-column .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .server-banner__meta { - padding: 10px 15px 20px; + padding: 0 15px 20px; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); gap: 0; margin: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; align-items: end; } .layout-single-column .server-banner h4 { color: var(--color-fg); + font-size: 80%; } .layout-single-column .server-banner__number { color: var(--color-content-fg-bold); @@ -2448,6 +2863,8 @@ body.layout-single-column { background-color: transparent; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .server-banner__meta__column:first-child { width: calc(60% - 5px); @@ -2455,9 +2872,6 @@ body.layout-single-column { .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; @@ -2514,7 +2928,7 @@ body.layout-single-column { } .layout-single-column .announcements { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); @@ -2528,7 +2942,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .announcements__mastodon { - border-radius: 0 0 0 7px; + border-radius: 0 0 0 8px; } .layout-single-column .reactions-bar__item { background-color: var(--color-content-bg); @@ -2565,9 +2979,16 @@ body.layout-single-column { ------------- */ .layout-single-column .scrollable.about { background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); display: flex; flex-flow: column; } +@media screen and (max-width:889px) { + .layout-single-column .scrollable.about { + border-left: 0; + border-right: 0; + } +} .layout-single-column .about__header { order: 1; margin-bottom: 10px; @@ -2602,7 +3023,7 @@ body.layout-single-column { .layout-single-column .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); - border-radius: 7px 7px 0 0; + border-radius: 0; background-color: var(--color-content-bg); } .layout-single-column .about__header__hero, @@ -2612,6 +3033,14 @@ body.layout-single-column { .layout-single-column .about__header h1 { margin-bottom: 0; } +@media screen and (min-width:890px) { + .layout-single-column .scrollable.about { + border-radius: 8px !important; + } + .layout-single-column .about__header__hero { + border-radius: 8px 8px 0 0; + } +} .layout-single-column .about__mail { color: var(--color-content-fg); } @@ -2624,6 +3053,8 @@ body.layout-single-column { background: none; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); @@ -2642,15 +3073,15 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .about__section.active .about__section__title { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; } .layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .prose, diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 77ac4e9..2983b6a 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon ・ Purple variant πŸͺ» - version: 1.7.7 + version: 1.8 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -28,10 +28,11 @@ --color-accent: #6364ff; --color-accent-focus: #563acc; + --color-accent-border: rgba(99, 100, 255, 0.12); --color-accent-bg: #e5ddf6; --color-accent-fg: #ffffff; - --color-lines: var(--color-bg); + --color-lines: #e1dde4; } @media (prefers-color-scheme: dark) { @@ -52,6 +53,7 @@ --color-accent: #7a7af9; --color-accent-focus: #5a47ff; + --color-accent-border: rgba(122, 122, 249, 0.12); --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; @@ -254,8 +256,11 @@ body.layout-single-column { } .layout-single-column .scrollable, .layout-single-column .column > .scrollable { - border-radius: 7px !important; max-height: max-content; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } @@ -513,8 +518,11 @@ body.layout-single-column { padding: 0 0 71px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { color: var(--color-content-fg-bold); @@ -531,6 +539,14 @@ body.layout-single-column { border-top: 0; border-radius: 0; } +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-bottom: 1px solid var(--color-lines); +} .layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, .layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, .layout-single-column .compose-form .character-counter { @@ -547,6 +563,10 @@ body.layout-single-column { padding-left: 20px; padding-top: 20px; } +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { + font-size: 130%; + opacity: .5; +} .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); @@ -556,7 +576,7 @@ body.layout-single-column { } .layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, @@ -574,15 +594,18 @@ body.layout-single-column { color: var(--color-accent-fg); } .layout-single-column .compose-form .compose-form__buttons-wrapper { - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); + border-left: 1px solid var(--color-accent-border); + border-right: 1px solid var(--color-accent-border); + border-top: 0; + border-bottom: 0; box-shadow: none; margin: 0; border-radius: 0; - border: 0; } .layout-single-column .compose-form .compose-form__warning, .layout-single-column .simple_form .recommended, @@ -597,6 +620,12 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg); } + +.layout-single-column .compose-form .autosuggest-input { + box-sizing: border-box; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; @@ -633,11 +662,83 @@ body.layout-single-column { padding: 0 10px 10px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } +/* Publish button */ +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 10px; + width: 100%; +} +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { + padding: 10px 18px; +} + +/* Emoji picker */ +.layout-single-column .emoji-button { + margin: 15px 10px 0 0; +} +.layout-single-column .emoji-picker-dropdown__menu { + overflow: hidden; + border-radius: 8px; + background-color: var(--color-content-bg); + box-shadow: + 0 0 0 1px var(--color-lines), + 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .emoji-mart { + width: 100% !important; + display: block; +} +.layout-single-column .emoji-mart-bar:first-child { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); +} +.layout-single-column .emoji-mart-anchor-bar { + background-color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-selected { + color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-icon svg rect { + fill: var(--color-content-fg); +} +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.layout-single-column .emoji-mart-search-icon svg path { + fill: var(--color-accent); +} +.layout-single-column .emoji-mart-search-icon, +.layout-single-column .emoji-mart-search-icon:disabled, +.layout-single-column .emoji-mart-search-icon svg { + opacity: 1; +} +.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { + background-color: var(--color-content-bg); +} +.layout-single-column .emoji-mart-search, +.layout-single-column .emoji-mart-scroll, +.layout-single-column .emoji-mart-category-label span { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .emoji-mart-search input { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); + border-radius: 8px; +} +.layout-single-column .emoji-mart-search input:focus { + border-color: var(--color-accent); + box-shadow: 0 0 0 1px inset var(--color-accent); + outline: 0; +} +.layout-single-column .emoji-mart-search input::placeholder { + color: var(--color-accent); +} + /* πŸ’¬ Posts @@ -663,6 +764,53 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .status__wrapper, + .layout-single-column .detailed-status__wrapper { + border-left: 0; + border-right: 0; + } + .layout-single-column .status__wrapper { + padding: 10px 8px; + } +} +.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, +.layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top: 0; +} +@media screen and (min-width:890px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, + .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + margin-top: 15px; + } } .layout-single-column .status__info { height: 22px; @@ -706,12 +854,19 @@ body.layout-single-column { .layout-single-column .notification__message::before { position: absolute; background-color: var(--color-lines); - height: 2px; - width: calc(100% - 72px); + height: 1px; + width: calc(100% - 77px); right: 0; - top: -2px; + top: -1px; content: ""; } +@media screen and (max-width:889px) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + width: calc(100% - 73px); + } +} + /* 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 */ @@ -719,6 +874,12 @@ body.layout-single-column { .layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { display: none; } +@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + display: none; + } +} /* πŸ‘₯ Threaded replies */ .layout-single-column .status--first-in-thread { @@ -780,14 +941,33 @@ body.layout-single-column { /* πŸ‘οΈ 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); + border-top: 1px solid var(--color-lines); + border-bottom: 1px 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:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ + border-top: 1px solid var(--color-lines); + border-top-right-radius: 8px; + border-top-left-radius: 8px; } -.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 .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ + border-bottom: 1px solid var(--color-lines); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -818,6 +998,16 @@ body.layout-single-column { .layout-single-column article > .account { padding: 16px; } +.layout-single-column article:first-child > .account { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column article:last-child > .account { + border-bottom: 1px solid var(--color-lines); + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -840,6 +1030,9 @@ body.layout-single-column { border-radius: 30px; position: relative; } +.layout-single-column .status__action-bar .icon-button .fa { + transform: scale(.8); +} .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, @@ -998,7 +1191,7 @@ body.layout-single-column { .layout-single-column .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; contain: content; } .layout-single-column .empty-column-indicator a { @@ -1047,11 +1240,17 @@ body.layout-single-column { } .layout-single-column .conversation { background-color: var(--color-content-bg); - border-bottom: 3px solid var(--color-content-secondary-separator); + border-bottom: 1px solid var(--color-lines); } .layout-single-column .conversation__content__relative-time { opacity: .7; } +@media screen and (min-width:890px) { + .layout-single-column .conversation { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} @@ -1059,33 +1258,13 @@ body.layout-single-column { ----------------- */ .layout-single-column .tabs-bar__wrapper { background-color: transparent; - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 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; - overflow: hidden; - 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 { + padding-bottom: 10px; } .layout-single-column .column-header__wrapper.active:before { background: none; @@ -1094,6 +1273,49 @@ body.layout-single-column { .layout-single-column .column-header__wrapper.active { box-shadow: 0 0; } +.layout-single-column .column-header__wrapper::after, +.layout-single-column .column-back-button::after { + content: " "; + position: absolute; + left: 0; + right: 0; + bottom: -10px; + border-radius: 8px 8px 0 0; + box-shadow: + 0 -5px var(--color-bg), + 0 -10px var(--color-bg), + 0 -15px var(--color-bg), + 0 -20px var(--color-bg); + height: 10px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + background-color: transparent; + z-index: -1; +} +.layout-single-column .column-header { + border-radius: 8px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; + overflow: hidden; + font-weight: bold; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-back-button { + margin-bottom: 10px; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} .layout-single-column .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; @@ -1105,6 +1327,10 @@ body.layout-single-column { background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { + .layout-single-column .column-header__wrapper::after, + .layout-single-column .column-back-button::after { + display: none; + } .layout-single-column .column-header__button.active, .layout-single-column .column-header__button.active:hover, .layout-single-column .column-header__button:hover { @@ -1115,16 +1341,36 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border-bottom: 0; + border: 1px solid var(--color-accent-border); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - opacity: .6; + background-color: var(--color-accent-border); } +@media screen and (min-width:890px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + border-radius: 8px 8px 0 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + margin-top: 15px; + } +} + .layout-single-column .column-header__collapsible { border-bottom: 0; - border-radius: 7px; + border-radius: 8px; box-shadow: 0 -20px 0 var(--color-bg); + background-color: var(--color-secondary-bg); +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + border: 1px solid var(--color-lines); +} +.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { + background-color: transparent; } @media screen and (max-width:1174px) { .layout-single-column .column-header__collapsible { @@ -1133,7 +1379,7 @@ body.layout-single-column { } } .layout-single-column .column-header__collapsible:not(.collapsed) { - margin-bottom: 10px; + margin-top: 10px; } .layout-single-column .column-header__collapsible-inner { background: var(--color-secondary-bg); @@ -1147,7 +1393,7 @@ body.layout-single-column { } .layout-single-column .column-header > button { padding: 0 0 0 15px; - line-height: 48px; + line-height: 45px; font-weight: bold; } .layout-single-column .column-header__icon { @@ -1170,17 +1416,15 @@ body.layout-single-column { display: none; margin-bottom: 0; border-radius: 0; - height: 55px; - } - .layout-single-column .columns-area--mobile { - border-radius: 7px; + height: 45px; } .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; + height: 45px; + border: 0; } .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); @@ -1196,20 +1440,22 @@ body.layout-single-column { } .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; + height: 100px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .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; + margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + border-color: rgba(255, 255, 255, .1); } } } @@ -1221,8 +1467,8 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 0; - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .account__section-headline a, @@ -1234,12 +1480,13 @@ body.layout-single-column { box-shadow: 0 0 0 4px var(--color-accent-bg) inset; border-radius: 9px; transition: all .2s; + padding: 14px 0; } .layout-single-column .account__section-headline a:hover, .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-lines); + background-color: var(--color-accent-border); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1251,14 +1498,10 @@ body.layout-single-column { 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 { +.layout-single-column .account__section-headline a.active::before, +.layout-single-column .account__section-headline button.active::before, +.layout-single-column .notification__filter-bar a.active::before, +.layout-single-column .notification__filter-bar button.active::before { display: none; } .layout-single-column .account__section-headline button, @@ -1266,21 +1509,32 @@ body.layout-single-column { background-color: transparent; } .layout-single-column .account__section-headline a::after, -.layout-single-column .account__section-headline button::after { +.layout-single-column .account__section-headline button::after, +.layout-single-column .notification__filter-bar a::after, +.layout-single-column .notification__filter-bar button::after, +.layout-single-column .account__section-headline a.active::after, +.layout-single-column .account__section-headline button.active::after, +.layout-single-column .notification__filter-bar a.active::after, +.layout-single-column .notification__filter-bar button.active::after { display: block; position: absolute; content: " "; width: 2px; - background-color: var(--color-accent); + height: auto; + background-color: var(--color-accent-border); top: 8px; - right: -2px; + right: -1px; + left: auto; bottom: 8px; - opacity: .1; border-radius: 50px; z-index: 1; + transform: unset; + border: 0; } .layout-single-column .account__section-headline a:last-child::after, -.layout-single-column .account__section-headline button:last-child::after { +.layout-single-column .account__section-headline button:last-child::after, +.layout-single-column .notification__filter-bar a:last-child:after, +.layout-single-column .notification__filter-bar button:last-child:after { display: none; } @media (prefers-color-scheme: dark) { @@ -1291,6 +1545,19 @@ body.layout-single-column { background-color: var(--color-bg); } } +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } +} +@media screen and (max-width:1174px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-top: 10px; + } +} @@ -1324,23 +1591,48 @@ body.layout-single-column { } .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 .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; } .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 a.column-link--transparent span { + position: relative; +} +@media screen and (min-width:1175px) { + .layout-single-column .column-link:not(.column-link--logo) { + transition: all .2s; + } + .layout-single-column a.column-link--transparent span::before { + content: " "; + left: -40px; + background-color: transparent; + transition: .3s background-color; + top: -12px; + right: -16px; + position: absolute; + border-radius: 8px; + z-index: -1; + bottom: -13px; + } + .layout-single-column a.column-link--transparent:hover span::before { + background-color: var(--color-accent-bg); + } + .layout-single-column a.column-link--transparent.active span::before, + .layout-single-column a.column-link--transparent.active:hover span::before { + background-color: var(--color-content-bg); + } +} .layout-single-column .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -1372,18 +1664,22 @@ body.layout-single-column { .layout-single-column .list-panel i.fa { display: none; } -.layout-single-column .list-panel .column-link { - width: auto; +.layout-single-column .list-panel .column-link span::before { + left: -12px; + top: -10px; + right: -12px;; + bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) { +.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); - color: var(--color-content-fg); } -.layout-single-column .column-link[href="/lists"]:hover + .list-panel, -.layout-single-column .column-link[href="/lists"].active + .list-panel, -.layout-single-column .list-panel:hover { - display: block; - animation: fadein .5s 1; +@media screen and (min-width:1175px) { + .layout-single-column .column-link[href="/lists"]:hover + .list-panel, + .layout-single-column .column-link[href="/lists"].active + .list-panel, + .layout-single-column .list-panel:hover { + display: block; + animation: fadein .5s 1; + } } @keyframes fadein { from { @@ -1413,6 +1709,7 @@ body.layout-single-column { -webkit-backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.5); border-left: 0; + border-top: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .navigation-panel .column-link, .layout-single-column .navigation-panel .navigation-panel__legal, @@ -1420,7 +1717,7 @@ body.layout-single-column { .layout-single-column a.column-link--transparent.active:hover, .layout-single-column .column-link--transparent:hover { flex: 0 0 18vw; - margin: 6px 0 7px; + margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 0; justify-content: center; @@ -1432,11 +1729,10 @@ body.layout-single-column { .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; + margin: 6px 0 8px; padding: 4px 0 3px; - border-radius: 7px; - box-shadow: 0 0 6px rgba(0, 0, 0, .1); - background-color: var(--color-content-bg); + border-radius: 8px; + background-color: #ffffff; } .layout-single-column .column-link__icon { transform: scale(1); @@ -1445,6 +1741,9 @@ body.layout-single-column { .layout-single-column .column-link span { padding-left: .5em; } + .layout-single-column .column-link .fa-list-ul { + margin-right: 0; + } .layout-single-column .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; @@ -1470,8 +1769,11 @@ body.layout-single-column { @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { - background-color: rgba(3, 3, 3, 0.65); - border: 0; + background-color: rgba(3, 3, 3, .65); + border-left: 0; + border-right: 0; + border-bottom: 0; + border-top: 1px solid rgba(255, 255, 255, .1); } .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover, @@ -1486,9 +1788,22 @@ body.layout-single-column { /* πŸ‘€ Account view --------------- */ .layout-single-column .account__header { - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .account__header { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__header { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .account__header__image { height: 150px; @@ -1547,7 +1862,7 @@ body.layout-single-column { } .layout-single-column .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { display: none; @@ -1564,17 +1879,17 @@ body.layout-single-column { .layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; - height: 2px; + height: 1px; bottom: -1px; right: 15px; - background-color: var(--color-content-secondary-separator); + background-color: var(--color-lines); left: 15px; position: absolute; border-radius: 50px; } .layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ - border-top-left-radius: 7px; - border-top-right-radius: 7px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; margin-top: 0; } .layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ @@ -1614,7 +1929,17 @@ body.layout-single-column { } .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; + border-radius: 8px 8px 0 0; + border-right: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-top: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .account-timeline__header + article .status__wrapper, + .layout-single-column .account-timeline__header + article .account { + border-left: 0; + border-right: 0; + } } .layout-single-column .follow-request-banner, @@ -1623,7 +1948,7 @@ body.layout-single-column { } .layout-single-column .moved-account-banner { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .follow-request-banner__message, .layout-single-column .moved-account-banner__message { @@ -1636,8 +1961,11 @@ body.layout-single-column { /* ✨ Explore tab -------------- */ +@media screen and (min-width:890px) { .layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; + margin-top: 0; + } } .layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { color: var(--color-verified); @@ -1656,9 +1984,17 @@ body.layout-single-column { } .layout-single-column .explore__links { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; + border: 1px solid var(--color-lines); overflow: hidden; } +@media screen and (max-width:889px) { + .layout-single-column .explore__links { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} .layout-single-column .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); @@ -1673,40 +2009,25 @@ body.layout-single-column { .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; + border-radius: 8px; + border: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable .account-card { + margin: 0 10px 10px; + } } .layout-single-column .account-card__header { padding: 0; - border-radius: 7px 7px 0 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 128px; overflow: hidden; } @@ -1736,7 +2057,7 @@ body.layout-single-column { } .layout-single-column .filter-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .filter-form__column { @@ -1768,10 +2089,10 @@ body.layout-single-column { margin-bottom: 10px; } .layout-single-column .search__input { - border-radius: 7px; + border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: none; + border: 1px solid var(--color-accent-border); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -1779,7 +2100,8 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .search__input:focus { - box-shadow: inset 0 0 0 2px var(--color-accent); + border: 1px solid var(--color-accent); + box-shadow: inset 0 0 0 1px var(--color-accent); } .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { @@ -1791,13 +2113,13 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-times-circle.active, .layout-single-column .search__icon .fa.active { opacity: 1; + z-index: 1; } .layout-single-column .compose-panel .fa-times-circle.active { top: 16px; } .layout-single-column .explore__search-results { background-color: var(--color-content-bg); - border-radius: 7px; overflow: hidden; } .layout-single-column .explore__search-header { @@ -1806,6 +2128,36 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +.layout-single-column .explore__search-results .account:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .account:last-child { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:last-child { + border-bottom: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) { + .layout-single-column .explore__search-results { + border-radius: 8px; + } + .layout-single-column .explore__search-results .account:first-child, + .layout-single-column .explore__search-results .trends__item:first-child { + border-radius: 8px 8px 0 0; + } + .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .trends__item:last-child, + .layout-single-column .explore__search-results .load-more:last-child { + border-radius: 0 0 8px 8px; + } +} .layout-single-column .account .account__details > span { color: var(--color-content-fg); } @@ -1814,7 +2166,7 @@ body.layout-single-column { } .layout-single-column .search__popout { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-top: 5px; } @@ -1855,23 +2207,18 @@ body.layout-single-column { top: 13px; } .layout-single-column .explore__search-header { - padding: 0 0 10px; + padding: 10px 0 0; } } @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; + padding: 10px 10px 0; } } .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-radius: 8px 8px 0 0; border: 0; margin: 0; } @@ -1917,7 +2264,7 @@ body.layout-single-column { .layout-single-column .notification.unread::before, .layout-single-column .status__wrapper.unread::before { background-color: var(--color-accent); - width: 7px; + width: 8px; border: 0; top: 5px; height: auto; @@ -1931,6 +2278,20 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg-bold); } +.layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); +} +@media screen and (min-width:889px) { + .layout-single-column .notification__message { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } + .layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} .layout-single-column .notification__message .fa { color: var(--color-accent); } @@ -1962,20 +2323,38 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +@media screen and (min-width:890px) { + .layout-single-column .account { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } +@media screen and (max-width:1174px) { + .layout-single-column .column-inline-form { + margin-top: 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .column-inline-form { + margin-left: 10px; + margin-right: 10px; + } +} .layout-single-column .column-inline-form label input, .layout-single-column .column-inline-form label input:focus { background-color: var(--color-content-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .column-inline-form label input:focus { box-shadow: 0 0 0 2px var(--color-accent); @@ -1987,10 +2366,22 @@ body.layout-single-column { } .layout-single-column .column-subheading { color: var(--color-fg-muted); + border: 1px solid var(--color-lines); + border-bottom: 0; + border-radius: 8px 8px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .column-subheading { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .columns-area__panels__main .column-link { margin-left: 0; width: 100%; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } @@ -1999,7 +2390,17 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .columns-area__panels__main article:last-child .column-link { - border: 0; + border-bottom: 1px solid var(--color-lines); + border-radius: 0 0 8px 8px; +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main .column-link { + border-left: 0; + border-right: 0; + } + .layout-single-column .columns-area__panels__main article:last-child .column-link { + border-radius: 0; + } } /* List adder dialog */ @@ -2030,13 +2431,13 @@ body.layout-single-column { } .layout-single-column .account-authorize { background-color: var(--color-content-bg); - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; padding: 20px } .layout-single-column .account--panel { background-color: var(--color-accent-bg); border: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .account__header__content { color: var(--color-content-fg); @@ -2059,7 +2460,7 @@ body.layout-single-column { ----------------------------------------- */ .layout-single-column .button, .layout-single-column .account__header__tabs__buttons .icon-button { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .button, .layout-single-column .button.logo-button, @@ -2140,7 +2541,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-content-fg-muted); + background-color: var(--color-accent-border); + box-shadow: + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset } .layout-single-column .react-toggle-thumb { border: 0; @@ -2153,6 +2559,9 @@ body.layout-single-column { .layout-single-column .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } +.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent-focus); +} /* ⏺️ Radio buttons */ @@ -2280,7 +2689,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .interaction-modal .copypaste button { - padding: 7px 18px; + padding: 8px 18px; } .layout-single-column .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); @@ -2385,7 +2794,7 @@ body.layout-single-column { /* πŸ–ΌοΈ Picture in Picture */ .layout-single-column .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .picture-in-picture__footer, .layout-single-column .picture-in-picture__header { @@ -2419,24 +2828,30 @@ body.layout-single-column { padding: 0 0 20px; } .layout-single-column .server-banner__hero { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin-bottom: 0; } .layout-single-column .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .server-banner__meta { - padding: 10px 15px 20px; + padding: 0 15px 20px; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); gap: 0; margin: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; align-items: end; } .layout-single-column .server-banner h4 { color: var(--color-fg); + font-size: 80%; } .layout-single-column .server-banner__number { color: var(--color-content-fg-bold); @@ -2448,6 +2863,8 @@ body.layout-single-column { background-color: transparent; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .server-banner__meta__column:first-child { width: calc(60% - 5px); @@ -2455,9 +2872,6 @@ body.layout-single-column { .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; @@ -2514,7 +2928,7 @@ body.layout-single-column { } .layout-single-column .announcements { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); @@ -2528,7 +2942,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .announcements__mastodon { - border-radius: 0 0 0 7px; + border-radius: 0 0 0 8px; } .layout-single-column .reactions-bar__item { background-color: var(--color-content-bg); @@ -2565,9 +2979,16 @@ body.layout-single-column { ------------- */ .layout-single-column .scrollable.about { background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); display: flex; flex-flow: column; } +@media screen and (max-width:889px) { + .layout-single-column .scrollable.about { + border-left: 0; + border-right: 0; + } +} .layout-single-column .about__header { order: 1; margin-bottom: 10px; @@ -2602,7 +3023,7 @@ body.layout-single-column { .layout-single-column .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); - border-radius: 7px 7px 0 0; + border-radius: 0; background-color: var(--color-content-bg); } .layout-single-column .about__header__hero, @@ -2612,6 +3033,14 @@ body.layout-single-column { .layout-single-column .about__header h1 { margin-bottom: 0; } +@media screen and (min-width:890px) { + .layout-single-column .scrollable.about { + border-radius: 8px !important; + } + .layout-single-column .about__header__hero { + border-radius: 8px 8px 0 0; + } +} .layout-single-column .about__mail { color: var(--color-content-fg); } @@ -2624,6 +3053,8 @@ body.layout-single-column { background: none; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); @@ -2642,15 +3073,15 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .about__section.active .about__section__title { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; } .layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .prose, diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index a204c5b..eeb76fd 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1,5 +1,5 @@ /* TangerineUI 🍊 for Mastodon - version: 1.7.7 + version: 1.8 A Tangerine redesign for Mastodon's Web UI. https://github.com/nileane/TangerineUI-for-Mastodon/ @@ -28,10 +28,11 @@ --color-accent: #f76902; --color-accent-focus: #ff9447; + --color-accent-border: rgba(247, 105, 2, 0.12); --color-accent-bg: #f6e5dd; --color-accent-fg: #ffffff; - --color-lines: var(--color-bg); + --color-lines: #e1dde4; } @media (prefers-color-scheme: dark) { @@ -52,6 +53,7 @@ --color-accent: #e68933; --color-accent-focus: #ffa047; + --color-accent-border: rgb(230, 137, 51, 0.12); --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; @@ -254,8 +256,11 @@ body.layout-single-column { } .layout-single-column .scrollable, .layout-single-column .column > .scrollable { - border-radius: 7px !important; max-height: max-content; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } @@ -513,8 +518,11 @@ body.layout-single-column { padding: 0 0 71px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; background-color: var(--color-content-secondary-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { color: var(--color-content-fg-bold); @@ -531,6 +539,14 @@ body.layout-single-column { border-top: 0; border-radius: 0; } +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .compose-form .compose-form__buttons-wrapper { + border-bottom: 1px solid var(--color-lines); +} .layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button, .layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button, .layout-single-column .compose-form .character-counter { @@ -547,6 +563,10 @@ body.layout-single-column { padding-left: 20px; padding-top: 20px; } +.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { + font-size: 130%; + opacity: .5; +} .layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); @@ -556,7 +576,7 @@ body.layout-single-column { } .layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, .layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, @@ -574,15 +594,18 @@ body.layout-single-column { color: var(--color-accent-fg); } .layout-single-column .compose-form .compose-form__buttons-wrapper { - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); + border-left: 1px solid var(--color-accent-border); + border-right: 1px solid var(--color-accent-border); + border-top: 0; + border-bottom: 0; box-shadow: none; margin: 0; border-radius: 0; - border: 0; } .layout-single-column .compose-form .compose-form__warning, .layout-single-column .simple_form .recommended, @@ -597,6 +620,12 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg); } + +.layout-single-column .compose-form .autosuggest-input { + box-sizing: border-box; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} .layout-single-column .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; @@ -633,11 +662,83 @@ body.layout-single-column { padding: 0 10px 10px; } .layout-single-column .navigation-bar { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } +/* Publish button */ +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 10px; + width: 100%; +} +.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { + padding: 10px 18px; +} + +/* Emoji picker */ +.layout-single-column .emoji-button { + margin: 15px 10px 0 0; +} +.layout-single-column .emoji-picker-dropdown__menu { + overflow: hidden; + border-radius: 8px; + background-color: var(--color-content-bg); + box-shadow: + 0 0 0 1px var(--color-lines), + 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .emoji-mart { + width: 100% !important; + display: block; +} +.layout-single-column .emoji-mart-bar:first-child { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); +} +.layout-single-column .emoji-mart-anchor-bar { + background-color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-selected { + color: var(--color-accent); +} +.layout-single-column .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-icon svg rect { + fill: var(--color-content-fg); +} +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.layout-single-column .emoji-mart-search-icon svg path { + fill: var(--color-accent); +} +.layout-single-column .emoji-mart-search-icon, +.layout-single-column .emoji-mart-search-icon:disabled, +.layout-single-column .emoji-mart-search-icon svg { + opacity: 1; +} +.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { + background-color: var(--color-content-bg); +} +.layout-single-column .emoji-mart-search, +.layout-single-column .emoji-mart-scroll, +.layout-single-column .emoji-mart-category-label span { + background-color: var(--color-content-bg); + color: var(--color-content-fg); +} +.layout-single-column .emoji-mart-search input { + background-color: var(--color-accent-bg); + border-color: var(--color-accent-border); + border-radius: 8px; +} +.layout-single-column .emoji-mart-search input:focus { + border-color: var(--color-accent); + box-shadow: 0 0 0 1px inset var(--color-accent); + outline: 0; +} +.layout-single-column .emoji-mart-search input::placeholder { + color: var(--color-accent); +} + /* πŸ’¬ Posts @@ -663,6 +764,53 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .status__wrapper, + .layout-single-column .detailed-status__wrapper { + border-left: 0; + border-right: 0; + } + .layout-single-column .status__wrapper { + padding: 10px 8px; + } +} +.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, +.layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top: 0; +} +@media screen and (min-width:890px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, + .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } + .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + margin-top: 15px; + } } .layout-single-column .status__info { height: 22px; @@ -706,12 +854,19 @@ body.layout-single-column { .layout-single-column .notification__message::before { position: absolute; background-color: var(--color-lines); - height: 2px; - width: calc(100% - 72px); + height: 1px; + width: calc(100% - 77px); right: 0; - top: -2px; + top: -1px; content: ""; } +@media screen and (max-width:889px) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + width: calc(100% - 73px); + } +} + /* 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 */ @@ -719,6 +874,12 @@ body.layout-single-column { .layout-single-column .scrollable > div:first-child > div:first-child .status::before /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ { display: none; } +@media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ + .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + display: none; + } +} /* πŸ‘₯ Threaded replies */ .layout-single-column .status--first-in-thread { @@ -780,14 +941,33 @@ body.layout-single-column { /* πŸ‘οΈ 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); + border-top: 1px solid var(--color-lines); + border-bottom: 1px 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:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ + border-top: 1px solid var(--color-lines); + border-top-right-radius: 8px; + border-top-left-radius: 8px; } -.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 .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ + border-bottom: 1px solid var(--color-lines); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -818,6 +998,16 @@ body.layout-single-column { .layout-single-column article > .account { padding: 16px; } +.layout-single-column article:first-child > .account { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} +.layout-single-column article:last-child > .account { + border-bottom: 1px solid var(--color-lines); + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} /* ⭐ Action bar */ .layout-single-column .status__action-bar { @@ -840,6 +1030,9 @@ body.layout-single-column { border-radius: 30px; position: relative; } +.layout-single-column .status__action-bar .icon-button .fa { + transform: scale(.8); +} .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, @@ -998,7 +1191,7 @@ body.layout-single-column { .layout-single-column .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; contain: content; } .layout-single-column .empty-column-indicator a { @@ -1047,11 +1240,17 @@ body.layout-single-column { } .layout-single-column .conversation { background-color: var(--color-content-bg); - border-bottom: 3px solid var(--color-content-secondary-separator); + border-bottom: 1px solid var(--color-lines); } .layout-single-column .conversation__content__relative-time { opacity: .7; } +@media screen and (min-width:890px) { + .layout-single-column .conversation { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} @@ -1059,33 +1258,13 @@ body.layout-single-column { ----------------- */ .layout-single-column .tabs-bar__wrapper { background-color: transparent; - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 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; - overflow: hidden; - 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 { + padding-bottom: 10px; } .layout-single-column .column-header__wrapper.active:before { background: none; @@ -1094,6 +1273,49 @@ body.layout-single-column { .layout-single-column .column-header__wrapper.active { box-shadow: 0 0; } +.layout-single-column .column-header__wrapper::after, +.layout-single-column .column-back-button::after { + content: " "; + position: absolute; + left: 0; + right: 0; + bottom: -10px; + border-radius: 8px 8px 0 0; + box-shadow: + 0 -5px var(--color-bg), + 0 -10px var(--color-bg), + 0 -15px var(--color-bg), + 0 -20px var(--color-bg); + height: 10px; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + background-color: transparent; + z-index: -1; +} +.layout-single-column .column-header { + border-radius: 8px; +} +.layout-single-column .column-header, +.layout-single-column .column-back-button { + background: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; + overflow: hidden; + font-weight: bold; +} +.layout-single-column .column-header__button, +.layout-single-column .column-header__back-button { + background-color: var(--color-content-bg); + border: 0; +} +.layout-single-column .column-back-button { + margin-bottom: 10px; +} +.layout-single-column .column-header__button { + color: var(--color-content-fg); + transition: all .2s; +} .layout-single-column .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; @@ -1105,6 +1327,10 @@ body.layout-single-column { background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { + .layout-single-column .column-header__wrapper::after, + .layout-single-column .column-back-button::after { + display: none; + } .layout-single-column .column-header__button.active, .layout-single-column .column-header__button.active:hover, .layout-single-column .column-header__button:hover { @@ -1115,16 +1341,36 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border-bottom: 0; + border: 1px solid var(--color-accent-border); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - opacity: .6; + background-color: var(--color-accent-border); } +@media screen and (min-width:890px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + border-radius: 8px 8px 0 0; + } +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .item-list > .load-gap:first-child, + .layout-single-column .item-list > .load-gap:first-child { + margin-top: 15px; + } +} + .layout-single-column .column-header__collapsible { border-bottom: 0; - border-radius: 7px; + border-radius: 8px; box-shadow: 0 -20px 0 var(--color-bg); + background-color: var(--color-secondary-bg); +} +.layout-single-column .column-header__collapsible:not(.collapsed) { + border: 1px solid var(--color-lines); +} +.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { + background-color: transparent; } @media screen and (max-width:1174px) { .layout-single-column .column-header__collapsible { @@ -1133,7 +1379,7 @@ body.layout-single-column { } } .layout-single-column .column-header__collapsible:not(.collapsed) { - margin-bottom: 10px; + margin-top: 10px; } .layout-single-column .column-header__collapsible-inner { background: var(--color-secondary-bg); @@ -1147,7 +1393,7 @@ body.layout-single-column { } .layout-single-column .column-header > button { padding: 0 0 0 15px; - line-height: 48px; + line-height: 45px; font-weight: bold; } .layout-single-column .column-header__icon { @@ -1170,17 +1416,15 @@ body.layout-single-column { display: none; margin-bottom: 0; border-radius: 0; - height: 55px; - } - .layout-single-column .columns-area--mobile { - border-radius: 7px; + height: 45px; } .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; + height: 45px; + border: 0; } .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); @@ -1196,20 +1440,22 @@ body.layout-single-column { } .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; + height: 100px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .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; + margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + border-color: rgba(255, 255, 255, .1); } } } @@ -1221,8 +1467,8 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 0; - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .account__section-headline a, @@ -1234,12 +1480,13 @@ body.layout-single-column { box-shadow: 0 0 0 4px var(--color-accent-bg) inset; border-radius: 9px; transition: all .2s; + padding: 14px 0; } .layout-single-column .account__section-headline a:hover, .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-lines); + background-color: var(--color-accent-border); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1251,14 +1498,10 @@ body.layout-single-column { 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 { +.layout-single-column .account__section-headline a.active::before, +.layout-single-column .account__section-headline button.active::before, +.layout-single-column .notification__filter-bar a.active::before, +.layout-single-column .notification__filter-bar button.active::before { display: none; } .layout-single-column .account__section-headline button, @@ -1266,21 +1509,32 @@ body.layout-single-column { background-color: transparent; } .layout-single-column .account__section-headline a::after, -.layout-single-column .account__section-headline button::after { +.layout-single-column .account__section-headline button::after, +.layout-single-column .notification__filter-bar a::after, +.layout-single-column .notification__filter-bar button::after, +.layout-single-column .account__section-headline a.active::after, +.layout-single-column .account__section-headline button.active::after, +.layout-single-column .notification__filter-bar a.active::after, +.layout-single-column .notification__filter-bar button.active::after { display: block; position: absolute; content: " "; width: 2px; - background-color: var(--color-accent); + height: auto; + background-color: var(--color-accent-border); top: 8px; - right: -2px; + right: -1px; + left: auto; bottom: 8px; - opacity: .1; border-radius: 50px; z-index: 1; + transform: unset; + border: 0; } .layout-single-column .account__section-headline a:last-child::after, -.layout-single-column .account__section-headline button:last-child::after { +.layout-single-column .account__section-headline button:last-child::after, +.layout-single-column .notification__filter-bar a:last-child:after, +.layout-single-column .notification__filter-bar button:last-child:after { display: none; } @media (prefers-color-scheme: dark) { @@ -1291,6 +1545,19 @@ body.layout-single-column { background-color: var(--color-bg); } } +@media screen and (max-width:889px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-left: 10px; + margin-right: 10px; + } +} +@media screen and (max-width:1174px) { + .layout-single-column .account__section-headline, + .layout-single-column .notification__filter-bar { + margin-top: 10px; + } +} @@ -1324,23 +1591,48 @@ body.layout-single-column { } .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 .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; } .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 a.column-link--transparent span { + position: relative; +} +@media screen and (min-width:1175px) { + .layout-single-column .column-link:not(.column-link--logo) { + transition: all .2s; + } + .layout-single-column a.column-link--transparent span::before { + content: " "; + left: -40px; + background-color: transparent; + transition: .3s background-color; + top: -12px; + right: -16px; + position: absolute; + border-radius: 8px; + z-index: -1; + bottom: -13px; + } + .layout-single-column a.column-link--transparent:hover span::before { + background-color: var(--color-accent-bg); + } + .layout-single-column a.column-link--transparent.active span::before, + .layout-single-column a.column-link--transparent.active:hover span::before { + background-color: var(--color-content-bg); + } +} .layout-single-column .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); @@ -1372,18 +1664,22 @@ body.layout-single-column { .layout-single-column .list-panel i.fa { display: none; } -.layout-single-column .list-panel .column-link { - width: auto; +.layout-single-column .list-panel .column-link span::before { + left: -12px; + top: -10px; + right: -12px;; + bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) { +.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); - color: var(--color-content-fg); } -.layout-single-column .column-link[href="/lists"]:hover + .list-panel, -.layout-single-column .column-link[href="/lists"].active + .list-panel, -.layout-single-column .list-panel:hover { - display: block; - animation: fadein .5s 1; +@media screen and (min-width:1175px) { + .layout-single-column .column-link[href="/lists"]:hover + .list-panel, + .layout-single-column .column-link[href="/lists"].active + .list-panel, + .layout-single-column .list-panel:hover { + display: block; + animation: fadein .5s 1; + } } @keyframes fadein { from { @@ -1413,6 +1709,7 @@ body.layout-single-column { -webkit-backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.5); border-left: 0; + border-top: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .navigation-panel .column-link, .layout-single-column .navigation-panel .navigation-panel__legal, @@ -1420,7 +1717,7 @@ body.layout-single-column { .layout-single-column a.column-link--transparent.active:hover, .layout-single-column .column-link--transparent:hover { flex: 0 0 18vw; - margin: 6px 0 7px; + margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 0; justify-content: center; @@ -1432,11 +1729,10 @@ body.layout-single-column { .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; + margin: 6px 0 8px; padding: 4px 0 3px; - border-radius: 7px; - box-shadow: 0 0 6px rgba(0, 0, 0, .1); - background-color: var(--color-content-bg); + border-radius: 8px; + background-color: #ffffff; } .layout-single-column .column-link__icon { transform: scale(1); @@ -1445,6 +1741,9 @@ body.layout-single-column { .layout-single-column .column-link span { padding-left: .5em; } + .layout-single-column .column-link .fa-list-ul { + margin-right: 0; + } .layout-single-column .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; @@ -1471,7 +1770,10 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { background-color: rgba(3, 3, 3, .65); - border: 0; + border-left: 0; + border-right: 0; + border-bottom: 0; + border-top: 1px solid rgba(255, 255, 255, .1); } .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover, @@ -1486,9 +1788,22 @@ body.layout-single-column { /* πŸ‘€ Account view --------------- */ .layout-single-column .account__header { - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) and (max-width:1174px) { + .layout-single-column .account__header { + margin-top: 15px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .account__header { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .account__header__image { height: 150px; @@ -1547,7 +1862,7 @@ body.layout-single-column { } .layout-single-column .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { display: none; @@ -1564,17 +1879,17 @@ body.layout-single-column { .layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; - height: 2px; + height: 1px; bottom: -1px; right: 15px; - background-color: var(--color-content-secondary-separator); + background-color: var(--color-lines); left: 15px; position: absolute; border-radius: 50px; } .layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ - border-top-left-radius: 7px; - border-top-right-radius: 7px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; margin-top: 0; } .layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ @@ -1614,7 +1929,17 @@ body.layout-single-column { } .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; + border-radius: 8px 8px 0 0; + border-right: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-top: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .account-timeline__header + article .status__wrapper, + .layout-single-column .account-timeline__header + article .account { + border-left: 0; + border-right: 0; + } } .layout-single-column .follow-request-banner, @@ -1623,7 +1948,7 @@ body.layout-single-column { } .layout-single-column .moved-account-banner { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .follow-request-banner__message, .layout-single-column .moved-account-banner__message { @@ -1636,8 +1961,11 @@ body.layout-single-column { /* ✨ Explore tab -------------- */ -.layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { - border-radius: 7px 7px 0 0; +@media screen and (min-width:890px) { + .layout-single-column .account__section-headline + .scrollable article:first-child .status__wrapper { + border-radius: 8px 8px 0 0; + margin-top: 0; + } } .layout-single-column .icon-button.active .fa.fa-retweet + .icon-button__counter .animated-number { color: var(--color-verified); @@ -1656,9 +1984,17 @@ body.layout-single-column { } .layout-single-column .explore__links { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; + border: 1px solid var(--color-lines); overflow: hidden; } +@media screen and (max-width:889px) { + .layout-single-column .explore__links { + border-radius: 0; + border-left: 0; + border-right: 0; + } +} .layout-single-column .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); @@ -1673,40 +2009,25 @@ body.layout-single-column { .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; + border-radius: 8px; + border: 1px solid var(--color-lines); +} +@media screen and (max-width:889px) { + .layout-single-column .scrollable .account-card { + margin: 0 10px 10px; + } } .layout-single-column .account-card__header { padding: 0; - border-radius: 7px 7px 0 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; height: 128px; overflow: hidden; } @@ -1736,7 +2057,7 @@ body.layout-single-column { } .layout-single-column .filter-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border-radius: 8px; margin-bottom: 10px; } .layout-single-column .filter-form__column { @@ -1768,10 +2089,10 @@ body.layout-single-column { margin-bottom: 10px; } .layout-single-column .search__input { - border-radius: 7px; + border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: none; + border: 1px solid var(--color-accent-border); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -1779,7 +2100,8 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .search__input:focus { - box-shadow: inset 0 0 0 2px var(--color-accent); + border: 1px solid var(--color-accent); + box-shadow: inset 0 0 0 1px var(--color-accent); } .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { @@ -1791,13 +2113,13 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-times-circle.active, .layout-single-column .search__icon .fa.active { opacity: 1; + z-index: 1; } .layout-single-column .compose-panel .fa-times-circle.active { top: 16px; } .layout-single-column .explore__search-results { background-color: var(--color-content-bg); - border-radius: 7px; overflow: hidden; } .layout-single-column .explore__search-header { @@ -1806,6 +2128,36 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +.layout-single-column .explore__search-results .account:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .account:last-child { + border-bottom: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:first-child { + border-top: 1px solid var(--color-lines); +} +.layout-single-column .explore__search-results .trends__item:last-child { + border-bottom: 1px solid var(--color-lines); +} +@media screen and (min-width:890px) { + .layout-single-column .explore__search-results { + border-radius: 8px; + } + .layout-single-column .explore__search-results .account:first-child, + .layout-single-column .explore__search-results .trends__item:first-child { + border-radius: 8px 8px 0 0; + } + .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .trends__item:last-child, + .layout-single-column .explore__search-results .load-more:last-child { + border-radius: 0 0 8px 8px; + } +} .layout-single-column .account .account__details > span { color: var(--color-content-fg); } @@ -1814,7 +2166,7 @@ body.layout-single-column { } .layout-single-column .search__popout { background-color: var(--color-content-bg); - border-radius: 7px; + border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.1); margin-top: 5px; } @@ -1855,23 +2207,18 @@ body.layout-single-column { top: 13px; } .layout-single-column .explore__search-header { - padding: 0 0 10px; + padding: 10px 0 0; } } @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; + padding: 10px 10px 0; } } .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-radius: 8px 8px 0 0; border: 0; margin: 0; } @@ -1917,7 +2264,7 @@ body.layout-single-column { .layout-single-column .notification.unread::before, .layout-single-column .status__wrapper.unread::before { background-color: var(--color-accent); - width: 7px; + width: 8px; border: 0; top: 5px; height: auto; @@ -1931,6 +2278,20 @@ body.layout-single-column { background-color: var(--color-content-bg); color: var(--color-content-fg-bold); } +.layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); +} +@media screen and (min-width:889px) { + .layout-single-column .notification__message { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } + .layout-single-column .scrollable > div > article:first-child .notification__message { + border-top: 1px solid var(--color-lines); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} .layout-single-column .notification__message .fa { color: var(--color-accent); } @@ -1962,20 +2323,38 @@ body.layout-single-column { .layout-single-column .explore__search-results .account { padding-top: 16px; } +@media screen and (min-width:890px) { + .layout-single-column .account { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } +} /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border-radius: 7px; + border: 1px solid var(--color-accent-border); + border-radius: 8px; margin-bottom: 10px; } +@media screen and (max-width:1174px) { + .layout-single-column .column-inline-form { + margin-top: 10px; + } +} +@media screen and (max-width:889px) { + .layout-single-column .column-inline-form { + margin-left: 10px; + margin-right: 10px; + } +} .layout-single-column .column-inline-form label input, .layout-single-column .column-inline-form label input:focus { background-color: var(--color-content-bg); color: var(--color-content-fg); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .column-inline-form label input:focus { box-shadow: 0 0 0 2px var(--color-accent); @@ -1987,10 +2366,22 @@ body.layout-single-column { } .layout-single-column .column-subheading { color: var(--color-fg-muted); + border: 1px solid var(--color-lines); + border-bottom: 0; + border-radius: 8px 8px 0 0; +} +@media screen and (max-width:889px) { + .layout-single-column .column-subheading { + border-left: 0; + border-right: 0; + border-radius: 0; + } } .layout-single-column .columns-area__panels__main .column-link { margin-left: 0; width: 100%; + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } @@ -1999,7 +2390,17 @@ body.layout-single-column { color: var(--color-accent); } .layout-single-column .columns-area__panels__main article:last-child .column-link { - border: 0; + border-bottom: 1px solid var(--color-lines); + border-radius: 0 0 8px 8px; +} +@media screen and (max-width:889px) { + .layout-single-column .columns-area__panels__main .column-link { + border-left: 0; + border-right: 0; + } + .layout-single-column .columns-area__panels__main article:last-child .column-link { + border-radius: 0; + } } /* List adder dialog */ @@ -2030,13 +2431,13 @@ body.layout-single-column { } .layout-single-column .account-authorize { background-color: var(--color-content-bg); - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; padding: 20px } .layout-single-column .account--panel { background-color: var(--color-accent-bg); border: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .account__header__content { color: var(--color-content-fg); @@ -2059,7 +2460,7 @@ body.layout-single-column { ----------------------------------------- */ .layout-single-column .button, .layout-single-column .account__header__tabs__buttons .icon-button { - border-radius: 7px; + border-radius: 8px; } .layout-single-column .button, .layout-single-column .button.logo-button, @@ -2140,8 +2541,13 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-content-fg-muted); -} + background-color: var(--color-accent-border); + box-shadow: + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 20px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset, + 0 0 0 1px var(--color-accent-border) inset +} .layout-single-column .react-toggle-thumb { border: 0; } @@ -2153,6 +2559,9 @@ body.layout-single-column { .layout-single-column .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } +.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--color-accent-focus); +} /* ⏺️ Radio buttons */ @@ -2280,7 +2689,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .interaction-modal .copypaste button { - padding: 7px 18px; + padding: 8px 18px; } .layout-single-column .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); @@ -2385,7 +2794,7 @@ body.layout-single-column { /* πŸ–ΌοΈ Picture in Picture */ .layout-single-column .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); - border-radius: 7px; + border-radius: 8px; } .layout-single-column .picture-in-picture__footer, .layout-single-column .picture-in-picture__header { @@ -2419,24 +2828,30 @@ body.layout-single-column { padding: 0 0 20px; } .layout-single-column .server-banner__hero { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; margin-bottom: 0; } .layout-single-column .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); } .layout-single-column .server-banner__meta { - padding: 10px 15px 20px; + padding: 0 15px 20px; background-color: var(--color-content-bg); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); gap: 0; margin: 0; - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; align-items: end; } .layout-single-column .server-banner h4 { color: var(--color-fg); + font-size: 80%; } .layout-single-column .server-banner__number { color: var(--color-content-fg-bold); @@ -2448,6 +2863,8 @@ body.layout-single-column { background-color: transparent; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .server-banner__meta__column:first-child { width: calc(60% - 5px); @@ -2455,9 +2872,6 @@ body.layout-single-column { .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; @@ -2514,7 +2928,7 @@ body.layout-single-column { } .layout-single-column .announcements { margin-bottom: 10px; - border-radius: 7px; + border-radius: 8px; overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); @@ -2528,7 +2942,7 @@ body.layout-single-column { color: var(--color-content-fg); } .layout-single-column .announcements__mastodon { - border-radius: 0 0 0 7px; + border-radius: 0 0 0 8px; } .layout-single-column .reactions-bar__item { background-color: var(--color-content-bg); @@ -2565,9 +2979,16 @@ body.layout-single-column { ------------- */ .layout-single-column .scrollable.about { background-color: var(--color-content-bg); + border: 1px solid var(--color-lines); display: flex; flex-flow: column; } +@media screen and (max-width:889px) { + .layout-single-column .scrollable.about { + border-left: 0; + border-right: 0; + } +} .layout-single-column .about__header { order: 1; margin-bottom: 10px; @@ -2602,7 +3023,7 @@ body.layout-single-column { .layout-single-column .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); - border-radius: 7px 7px 0 0; + border-radius: 0; background-color: var(--color-content-bg); } .layout-single-column .about__header__hero, @@ -2612,6 +3033,14 @@ body.layout-single-column { .layout-single-column .about__header h1 { margin-bottom: 0; } +@media screen and (min-width:890px) { + .layout-single-column .scrollable.about { + border-radius: 8px !important; + } + .layout-single-column .about__header__hero { + border-radius: 8px 8px 0 0; + } +} .layout-single-column .about__mail { color: var(--color-content-fg); } @@ -2624,6 +3053,8 @@ body.layout-single-column { background: none; box-shadow: none; padding: 0; + border-left: 0; + border-right: 0; } .layout-single-column .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); @@ -2642,15 +3073,15 @@ body.layout-single-column { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; - border-radius: 7px; + border-radius: 8px; } .layout-single-column .about__section.active .about__section__title { - border-radius: 7px 7px 0 0; + border-radius: 8px 8px 0 0; } .layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); - border-radius: 0 0 7px 7px; + border-radius: 0 0 8px 8px; } .layout-single-column .prose, From ba5763fc910eb97a44d1ebcd48475001a649f483 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 20:45:45 +0200 Subject: [PATCH 05/24] Moved border on top bars --- TangerineUI-purple.css | 12 +++++++----- TangerineUI.css | 12 +++++++----- .../tangerineui-purple/layout-single-column.scss | 12 +++++++----- .../styles/tangerineui/layout-single-column.scss | 12 +++++++----- 4 files changed, 28 insertions(+), 20 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 2983b6a..67443ce 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1414,9 +1414,10 @@ body.layout-single-column { .layout-single-column .tabs-bar__wrapper { box-shadow: none; display: none; - margin-bottom: 0; + margin-bottom: -2px; border-radius: 0; height: 45px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .column-header, .layout-single-column .column-back-button, @@ -1441,7 +1442,6 @@ body.layout-single-column { .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; - border-bottom: 1px solid rgba(0, 0, 0, .1); } .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 */ @@ -1455,6 +1455,8 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + } + .layout-single-column .tabs-bar__wrapper { border-color: rgba(255, 255, 255, .1); } } @@ -1594,9 +1596,6 @@ body.layout-single-column { margin-left: 3px; font-weight: 500; } -.layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { - padding-bottom: 13px; -} .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover { color: var(--color-content-fg); @@ -1613,6 +1612,9 @@ body.layout-single-column { .layout-single-column .column-link:not(.column-link--logo) { transition: all .2s; } + .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; + } .layout-single-column a.column-link--transparent span::before { content: " "; left: -40px; diff --git a/TangerineUI.css b/TangerineUI.css index eeb76fd..7c9ef62 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1414,9 +1414,10 @@ body.layout-single-column { .layout-single-column .tabs-bar__wrapper { box-shadow: none; display: none; - margin-bottom: 0; + margin-bottom: -2px; border-radius: 0; height: 45px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .column-header, .layout-single-column .column-back-button, @@ -1441,7 +1442,6 @@ body.layout-single-column { .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; - border-bottom: 1px solid rgba(0, 0, 0, .1); } .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 */ @@ -1455,6 +1455,8 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + } + .layout-single-column .tabs-bar__wrapper { border-color: rgba(255, 255, 255, .1); } } @@ -1594,9 +1596,6 @@ body.layout-single-column { margin-left: 3px; font-weight: 500; } -.layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { - padding-bottom: 13px; -} .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover { color: var(--color-content-fg); @@ -1613,6 +1612,9 @@ body.layout-single-column { .layout-single-column .column-link:not(.column-link--logo) { transition: all .2s; } + .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; + } .layout-single-column a.column-link--transparent span::before { content: " "; left: -40px; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 2983b6a..67443ce 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1414,9 +1414,10 @@ body.layout-single-column { .layout-single-column .tabs-bar__wrapper { box-shadow: none; display: none; - margin-bottom: 0; + margin-bottom: -2px; border-radius: 0; height: 45px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .column-header, .layout-single-column .column-back-button, @@ -1441,7 +1442,6 @@ body.layout-single-column { .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; - border-bottom: 1px solid rgba(0, 0, 0, .1); } .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 */ @@ -1455,6 +1455,8 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + } + .layout-single-column .tabs-bar__wrapper { border-color: rgba(255, 255, 255, .1); } } @@ -1594,9 +1596,6 @@ body.layout-single-column { margin-left: 3px; font-weight: 500; } -.layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { - padding-bottom: 13px; -} .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover { color: var(--color-content-fg); @@ -1613,6 +1612,9 @@ body.layout-single-column { .layout-single-column .column-link:not(.column-link--logo) { transition: all .2s; } + .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; + } .layout-single-column a.column-link--transparent span::before { content: " "; left: -40px; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index eeb76fd..7c9ef62 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1414,9 +1414,10 @@ body.layout-single-column { .layout-single-column .tabs-bar__wrapper { box-shadow: none; display: none; - margin-bottom: 0; + margin-bottom: -2px; border-radius: 0; height: 45px; + border-bottom: 1px solid rgba(0, 0, 0, .1); } .layout-single-column .column-header, .layout-single-column .column-back-button, @@ -1441,7 +1442,6 @@ body.layout-single-column { .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button):after, .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper):after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; - border-bottom: 1px solid rgba(0, 0, 0, .1); } .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 */ @@ -1455,6 +1455,8 @@ body.layout-single-column { @media screen and (max-width:1174px) { .layout-single-column .ui::after { background-color: rgba(3, 3, 3, .65); + } + .layout-single-column .tabs-bar__wrapper { border-color: rgba(255, 255, 255, .1); } } @@ -1594,9 +1596,6 @@ body.layout-single-column { margin-left: 3px; font-weight: 500; } -.layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { - padding-bottom: 13px; -} .layout-single-column a.column-link--transparent.active, .layout-single-column a.column-link--transparent.active:hover { color: var(--color-content-fg); @@ -1613,6 +1612,9 @@ body.layout-single-column { .layout-single-column .column-link:not(.column-link--logo) { transition: all .2s; } + .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + padding-bottom: 13px; + } .layout-single-column a.column-link--transparent span::before { content: " "; left: -40px; From 0e135f1dfd1d4f6892b3b1a4e7c308a3c7f89875 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 20:55:25 +0200 Subject: [PATCH 06/24] Restore trending hashtags for logged out users --- TangerineUI-purple.css | 2 +- TangerineUI.css | 2 +- .../styles/tangerineui-purple/layout-single-column.scss | 2 +- .../app/javascript/styles/tangerineui/layout-single-column.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 67443ce..01ba956 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1941,6 +1941,7 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .account { border-left: 0; border-right: 0; + border-radius: 0; } } @@ -3150,7 +3151,6 @@ body.layout-single-column { /* πŸ‘‹ 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__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 */ diff --git a/TangerineUI.css b/TangerineUI.css index 7c9ef62..95bb803 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1941,6 +1941,7 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .account { border-left: 0; border-right: 0; + border-radius: 0; } } @@ -3150,7 +3151,6 @@ body.layout-single-column { /* πŸ‘‹ 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__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 */ diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 67443ce..01ba956 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1941,6 +1941,7 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .account { border-left: 0; border-right: 0; + border-radius: 0; } } @@ -3150,7 +3151,6 @@ body.layout-single-column { /* πŸ‘‹ 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__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 */ diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 7c9ef62..95bb803 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1941,6 +1941,7 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .account { border-left: 0; border-right: 0; + border-radius: 0; } } @@ -3150,7 +3151,6 @@ body.layout-single-column { /* πŸ‘‹ 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__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 */ From a42bc15054bb539973f5dd7454d8a6a86eccd626 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 21:02:11 +0200 Subject: [PATCH 07/24] Tweaks colors for trending items in sidebar --- TangerineUI-purple.css | 6 +++--- TangerineUI.css | 6 +++--- .../styles/tangerineui-purple/layout-single-column.scss | 6 +++--- .../javascript/styles/tangerineui/layout-single-column.scss | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 01ba956..ac8e8bd 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2006,10 +2006,10 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .trends__item__name, -.layout-single-column .trends__item__name a { - color: var(--color-content-fg); +.layout-single-column .trends__item__current { + color: var(--color-fg-muted); } -.getting-started__trends .trends__item__current { +.layout-single-column .trends__item__name a { color: var(--color-fg); } diff --git a/TangerineUI.css b/TangerineUI.css index 95bb803..de617f1 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2006,10 +2006,10 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .trends__item__name, -.layout-single-column .trends__item__name a { - color: var(--color-content-fg); +.layout-single-column .trends__item__current { + color: var(--color-fg-muted); } -.getting-started__trends .trends__item__current { +.layout-single-column .trends__item__name a { color: var(--color-fg); } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 01ba956..ac8e8bd 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2006,10 +2006,10 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .trends__item__name, -.layout-single-column .trends__item__name a { - color: var(--color-content-fg); +.layout-single-column .trends__item__current { + color: var(--color-fg-muted); } -.getting-started__trends .trends__item__current { +.layout-single-column .trends__item__name a { color: var(--color-fg); } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 95bb803..de617f1 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2006,10 +2006,10 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .trends__item__name, -.layout-single-column .trends__item__name a { - color: var(--color-content-fg); +.layout-single-column .trends__item__current { + color: var(--color-fg-muted); } -.getting-started__trends .trends__item__current { +.layout-single-column .trends__item__name a { color: var(--color-fg); } From e07ae28646df892b9235848e452b9cbd1934271c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 21:16:45 +0200 Subject: [PATCH 08/24] , --- TangerineUI-purple.css | 2 +- TangerineUI.css | 2 +- .../styles/tangerineui-purple/layout-single-column.scss | 2 +- .../app/javascript/styles/tangerineui/layout-single-column.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index ac8e8bd..835097d 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2155,7 +2155,7 @@ body.layout-single-column { .layout-single-column .explore__search-results .trends__item:first-child { border-radius: 8px 8px 0 0; } - .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .account:last-child, .layout-single-column .explore__search-results .trends__item:last-child, .layout-single-column .explore__search-results .load-more:last-child { border-radius: 0 0 8px 8px; diff --git a/TangerineUI.css b/TangerineUI.css index de617f1..ca8465e 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2155,7 +2155,7 @@ body.layout-single-column { .layout-single-column .explore__search-results .trends__item:first-child { border-radius: 8px 8px 0 0; } - .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .account:last-child, .layout-single-column .explore__search-results .trends__item:last-child, .layout-single-column .explore__search-results .load-more:last-child { border-radius: 0 0 8px 8px; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index ac8e8bd..835097d 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2155,7 +2155,7 @@ body.layout-single-column { .layout-single-column .explore__search-results .trends__item:first-child { border-radius: 8px 8px 0 0; } - .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .account:last-child, .layout-single-column .explore__search-results .trends__item:last-child, .layout-single-column .explore__search-results .load-more:last-child { border-radius: 0 0 8px 8px; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index de617f1..ca8465e 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2155,7 +2155,7 @@ body.layout-single-column { .layout-single-column .explore__search-results .trends__item:first-child { border-radius: 8px 8px 0 0; } - .layout-single-column .explore__search-results .account:last-child + .layout-single-column .explore__search-results .account:last-child, .layout-single-column .explore__search-results .trends__item:last-child, .layout-single-column .explore__search-results .load-more:last-child { border-radius: 0 0 8px 8px; From 9e523a30abac6ea78650f1194e83c8d7c8493dd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 21:59:25 +0200 Subject: [PATCH 09/24] renamed accent-lines variable --- TangerineUI-purple.css | 47 +++++++++---------- TangerineUI.css | 47 +++++++++---------- .../layout-single-column.scss | 47 +++++++++---------- .../tangerineui/layout-single-column.scss | 47 +++++++++---------- 4 files changed, 84 insertions(+), 104 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 835097d..5a7ae44 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -28,7 +28,7 @@ --color-accent: #6364ff; --color-accent-focus: #563acc; - --color-accent-border: rgba(99, 100, 255, 0.12); + --color-accent-lines: rgba(99, 100, 255, 0.12); --color-accent-bg: #e5ddf6; --color-accent-fg: #ffffff; @@ -53,7 +53,7 @@ --color-accent: #7a7af9; --color-accent-focus: #5a47ff; - --color-accent-border: rgba(122, 122, 249, 0.12); + --color-accent-lines: rgba(122, 122, 249, 0.12); --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; @@ -599,8 +599,8 @@ body.layout-single-column { .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); - border-left: 1px solid var(--color-accent-border); - border-right: 1px solid var(--color-accent-border); + border-left: 1px solid var(--color-accent-lines); + border-right: 1px solid var(--color-accent-lines); border-top: 0; border-bottom: 0; box-shadow: none; @@ -694,7 +694,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); } .layout-single-column .emoji-mart-anchor-bar { background-color: var(--color-accent); @@ -727,7 +727,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-search input { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); border-radius: 8px; } .layout-single-column .emoji-mart-search input:focus { @@ -886,13 +886,8 @@ body.layout-single-column { 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, @@ -906,15 +901,15 @@ body.layout-single-column { width: auto; } .layout-single-column .status--in-thread .status__line { - -webkit-border-start: 4px solid var(--color-lines); - border-inline-start: 4px solid var(--color-lines); + -webkit-border-start: 4px solid var(--color-accent-bg); + border-inline-start: 4px solid var(--color-accent-bg); inset-inline-start: 43px; position: absolute; top: 0; width: 0; } .layout-single-column .status__line--full:before { - background: var(--color-lines); + background: var(--color-accent-bg); inset-inline-start: -3px; width: 3px; } @@ -1341,11 +1336,11 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .item-list > .load-gap:first-child, @@ -1469,7 +1464,7 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -1488,7 +1483,7 @@ body.layout-single-column { .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1523,7 +1518,7 @@ body.layout-single-column { content: " "; width: 2px; height: auto; - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); top: 8px; right: -1px; left: auto; @@ -2095,7 +2090,7 @@ body.layout-single-column { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -2338,7 +2333,7 @@ body.layout-single-column { /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -2544,12 +2539,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); box-shadow: - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset } .layout-single-column .react-toggle-thumb { border: 0; diff --git a/TangerineUI.css b/TangerineUI.css index ca8465e..b5c3668 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -28,7 +28,7 @@ --color-accent: #f76902; --color-accent-focus: #ff9447; - --color-accent-border: rgba(247, 105, 2, 0.12); + --color-accent-lines: rgba(247, 105, 2, 0.12); --color-accent-bg: #f6e5dd; --color-accent-fg: #ffffff; @@ -53,7 +53,7 @@ --color-accent: #e68933; --color-accent-focus: #ffa047; - --color-accent-border: rgb(230, 137, 51, 0.12); + --color-accent-lines: rgb(230, 137, 51, 0.12); --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; @@ -599,8 +599,8 @@ body.layout-single-column { .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); - border-left: 1px solid var(--color-accent-border); - border-right: 1px solid var(--color-accent-border); + border-left: 1px solid var(--color-accent-lines); + border-right: 1px solid var(--color-accent-lines); border-top: 0; border-bottom: 0; box-shadow: none; @@ -694,7 +694,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); } .layout-single-column .emoji-mart-anchor-bar { background-color: var(--color-accent); @@ -727,7 +727,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-search input { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); border-radius: 8px; } .layout-single-column .emoji-mart-search input:focus { @@ -886,13 +886,8 @@ body.layout-single-column { 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, @@ -906,15 +901,15 @@ body.layout-single-column { width: auto; } .layout-single-column .status--in-thread .status__line { - -webkit-border-start: 4px solid var(--color-lines); - border-inline-start: 4px solid var(--color-lines); + -webkit-border-start: 4px solid var(--color-accent-bg); + border-inline-start: 4px solid var(--color-accent-bg); inset-inline-start: 43px; position: absolute; top: 0; width: 0; } .layout-single-column .status__line--full:before { - background: var(--color-lines); + background: var(--color-accent-bg); inset-inline-start: -3px; width: 3px; } @@ -1341,11 +1336,11 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .item-list > .load-gap:first-child, @@ -1469,7 +1464,7 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -1488,7 +1483,7 @@ body.layout-single-column { .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1523,7 +1518,7 @@ body.layout-single-column { content: " "; width: 2px; height: auto; - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); top: 8px; right: -1px; left: auto; @@ -2095,7 +2090,7 @@ body.layout-single-column { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -2338,7 +2333,7 @@ body.layout-single-column { /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -2544,12 +2539,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); box-shadow: - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset } .layout-single-column .react-toggle-thumb { border: 0; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 835097d..5a7ae44 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -28,7 +28,7 @@ --color-accent: #6364ff; --color-accent-focus: #563acc; - --color-accent-border: rgba(99, 100, 255, 0.12); + --color-accent-lines: rgba(99, 100, 255, 0.12); --color-accent-bg: #e5ddf6; --color-accent-fg: #ffffff; @@ -53,7 +53,7 @@ --color-accent: #7a7af9; --color-accent-focus: #5a47ff; - --color-accent-border: rgba(122, 122, 249, 0.12); + --color-accent-lines: rgba(122, 122, 249, 0.12); --color-accent-bg: #261f3c; --color-accent-fg: #ffffff; @@ -599,8 +599,8 @@ body.layout-single-column { .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); - border-left: 1px solid var(--color-accent-border); - border-right: 1px solid var(--color-accent-border); + border-left: 1px solid var(--color-accent-lines); + border-right: 1px solid var(--color-accent-lines); border-top: 0; border-bottom: 0; box-shadow: none; @@ -694,7 +694,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); } .layout-single-column .emoji-mart-anchor-bar { background-color: var(--color-accent); @@ -727,7 +727,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-search input { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); border-radius: 8px; } .layout-single-column .emoji-mart-search input:focus { @@ -886,13 +886,8 @@ body.layout-single-column { 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, @@ -906,15 +901,15 @@ body.layout-single-column { width: auto; } .layout-single-column .status--in-thread .status__line { - -webkit-border-start: 4px solid var(--color-lines); - border-inline-start: 4px solid var(--color-lines); + -webkit-border-start: 4px solid var(--color-accent-bg); + border-inline-start: 4px solid var(--color-accent-bg); inset-inline-start: 43px; position: absolute; top: 0; width: 0; } .layout-single-column .status__line--full:before { - background: var(--color-lines); + background: var(--color-accent-bg); inset-inline-start: -3px; width: 3px; } @@ -1341,11 +1336,11 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .item-list > .load-gap:first-child, @@ -1469,7 +1464,7 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -1488,7 +1483,7 @@ body.layout-single-column { .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1523,7 +1518,7 @@ body.layout-single-column { content: " "; width: 2px; height: auto; - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); top: 8px; right: -1px; left: auto; @@ -2095,7 +2090,7 @@ body.layout-single-column { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -2338,7 +2333,7 @@ body.layout-single-column { /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -2544,12 +2539,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); box-shadow: - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset } .layout-single-column .react-toggle-thumb { border: 0; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index ca8465e..b5c3668 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -28,7 +28,7 @@ --color-accent: #f76902; --color-accent-focus: #ff9447; - --color-accent-border: rgba(247, 105, 2, 0.12); + --color-accent-lines: rgba(247, 105, 2, 0.12); --color-accent-bg: #f6e5dd; --color-accent-fg: #ffffff; @@ -53,7 +53,7 @@ --color-accent: #e68933; --color-accent-focus: #ffa047; - --color-accent-border: rgb(230, 137, 51, 0.12); + --color-accent-lines: rgb(230, 137, 51, 0.12); --color-accent-bg: #3c2a1f; --color-accent-fg: #ffffff; @@ -599,8 +599,8 @@ body.layout-single-column { .layout-single-column .reply-indicator, .layout-single-column .compose-form .compose-form__warning { background-color: var(--color-accent-bg); - border-left: 1px solid var(--color-accent-border); - border-right: 1px solid var(--color-accent-border); + border-left: 1px solid var(--color-accent-lines); + border-right: 1px solid var(--color-accent-lines); border-top: 0; border-bottom: 0; box-shadow: none; @@ -694,7 +694,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); } .layout-single-column .emoji-mart-anchor-bar { background-color: var(--color-accent); @@ -727,7 +727,7 @@ body.layout-single-column { } .layout-single-column .emoji-mart-search input { background-color: var(--color-accent-bg); - border-color: var(--color-accent-border); + border-color: var(--color-accent-lines); border-radius: 8px; } .layout-single-column .emoji-mart-search input:focus { @@ -886,13 +886,8 @@ body.layout-single-column { 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, @@ -906,15 +901,15 @@ body.layout-single-column { width: auto; } .layout-single-column .status--in-thread .status__line { - -webkit-border-start: 4px solid var(--color-lines); - border-inline-start: 4px solid var(--color-lines); + -webkit-border-start: 4px solid var(--color-accent-bg); + border-inline-start: 4px solid var(--color-accent-bg); inset-inline-start: 43px; position: absolute; top: 0; width: 0; } .layout-single-column .status__line--full:before { - background: var(--color-lines); + background: var(--color-accent-bg); inset-inline-start: -3px; width: 3px; } @@ -1341,11 +1336,11 @@ body.layout-single-column { .layout-single-column .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .load-gap:hover, .layout-single-column .load-more:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); } @media screen and (min-width:890px) { .layout-single-column .item-list > .load-gap:first-child, @@ -1469,7 +1464,7 @@ body.layout-single-column { .layout-single-column .account__section-headline, .layout-single-column .notification__filter-bar { background: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -1488,7 +1483,7 @@ body.layout-single-column { .layout-single-column .account__section-headline button:hover, .layout-single-column .notification__filter-bar a:hover, .layout-single-column .notification__filter-bar button:hover { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } @@ -1523,7 +1518,7 @@ body.layout-single-column { content: " "; width: 2px; height: auto; - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); top: 8px; right: -1px; left: auto; @@ -2095,7 +2090,7 @@ body.layout-single-column { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); } .layout-single-column .search__input::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { @@ -2338,7 +2333,7 @@ body.layout-single-column { /* πŸ“‹ Lists tab */ .layout-single-column .column-inline-form { background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-border); + border: 1px solid var(--color-accent-lines); border-radius: 8px; margin-bottom: 10px; } @@ -2544,12 +2539,12 @@ body.layout-single-column { vertical-align: top; } .layout-single-column .react-toggle-track { - background-color: var(--color-accent-border); + background-color: var(--color-accent-lines); box-shadow: - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 20px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset, - 0 0 0 1px var(--color-accent-border) inset + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 20px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset, + 0 0 0 1px var(--color-accent-lines) inset } .layout-single-column .react-toggle-thumb { border: 0; From 59cf407f98ccf863e1fc1817626dd8b0ce8856d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 22:18:02 +0200 Subject: [PATCH 10/24] Improved preliminar support for threaded replies --- TangerineUI-purple.css | 41 +++++++++++-------- TangerineUI.css | 19 ++++++--- .../layout-single-column.scss | 41 +++++++++++-------- .../tangerineui/layout-single-column.scss | 19 ++++++--- 4 files changed, 74 insertions(+), 46 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 5a7ae44..4bd8031 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -778,11 +778,13 @@ body.layout-single-column { } } .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom: 1px solid var(--color-lines); } @@ -791,19 +793,21 @@ body.layout-single-column { } @media screen and (min-width:890px) { .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; -} -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { - border-top-left-radius: 0; - border-top-right-radius: 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } + .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { @@ -907,15 +911,18 @@ body.layout-single-column { position: absolute; top: 0; width: 0; + height: 14px; +} +.layout-single-column .status__line.status__line--full { + height: 100%; } .layout-single-column .status__line--full:before { - background: var(--color-accent-bg); - inset-inline-start: -3px; - width: 3px; + background: transparent; } -.layout-single-column .status__line.status__line--full.status__line--first { - top: 58px; - height: calc(100% - 58px); +@media screen and (max-width:889px) { + .layout-single-column .status--in-thread .status__line { + inset-inline-start: 39px; + } } /* ⏺️ Posts when in focus */ diff --git a/TangerineUI.css b/TangerineUI.css index b5c3668..7c293b0 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -778,11 +778,13 @@ body.layout-single-column { } } .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom: 1px solid var(--color-lines); } @@ -791,12 +793,14 @@ body.layout-single-column { } @media screen and (min-width:890px) { .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; @@ -907,15 +911,18 @@ body.layout-single-column { position: absolute; top: 0; width: 0; + height: 14px; +} +.layout-single-column .status__line.status__line--full { + height: 100%; } .layout-single-column .status__line--full:before { - background: var(--color-accent-bg); - inset-inline-start: -3px; - width: 3px; + background: transparent; } -.layout-single-column .status__line.status__line--full.status__line--first { - top: 58px; - height: calc(100% - 58px); +@media screen and (max-width:889px) { + .layout-single-column .status--in-thread .status__line { + inset-inline-start: 39px; + } } /* ⏺️ Posts when in focus */ diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 5a7ae44..4bd8031 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -778,11 +778,13 @@ body.layout-single-column { } } .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom: 1px solid var(--color-lines); } @@ -791,19 +793,21 @@ body.layout-single-column { } @media screen and (min-width:890px) { .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; -} -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { - border-top-left-radius: 0; - border-top-right-radius: 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + } + .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + border-top-left-radius: 0; + border-top-right-radius: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { @@ -907,15 +911,18 @@ body.layout-single-column { position: absolute; top: 0; width: 0; + height: 14px; +} +.layout-single-column .status__line.status__line--full { + height: 100%; } .layout-single-column .status__line--full:before { - background: var(--color-accent-bg); - inset-inline-start: -3px; - width: 3px; + background: transparent; } -.layout-single-column .status__line.status__line--full.status__line--first { - top: 58px; - height: calc(100% - 58px); +@media screen and (max-width:889px) { + .layout-single-column .status--in-thread .status__line { + inset-inline-start: 39px; + } } /* ⏺️ Posts when in focus */ diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index b5c3668..7c293b0 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -778,11 +778,13 @@ body.layout-single-column { } } .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, +.layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, +.layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom: 1px solid var(--color-lines); } @@ -791,12 +793,14 @@ body.layout-single-column { } @media screen and (min-width:890px) { .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable > div:first-child > .status__wrapper, .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper, .layout-single-column .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, + .layout-single-column .scrollable > div:last-child > .status__wrapper, .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; @@ -907,15 +911,18 @@ body.layout-single-column { position: absolute; top: 0; width: 0; + height: 14px; +} +.layout-single-column .status__line.status__line--full { + height: 100%; } .layout-single-column .status__line--full:before { - background: var(--color-accent-bg); - inset-inline-start: -3px; - width: 3px; + background: transparent; } -.layout-single-column .status__line.status__line--full.status__line--first { - top: 58px; - height: calc(100% - 58px); +@media screen and (max-width:889px) { + .layout-single-column .status--in-thread .status__line { + inset-inline-start: 39px; + } } /* ⏺️ Posts when in focus */ From 8d136856c737b29000f2854feb6636bb56ca6f78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sat, 29 Jul 2023 22:20:50 +0200 Subject: [PATCH 11/24] Fixed first in thread line --- TangerineUI-purple.css | 4 ++++ TangerineUI.css | 4 ++++ .../styles/tangerineui-purple/layout-single-column.scss | 4 ++++ .../javascript/styles/tangerineui/layout-single-column.scss | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 4bd8031..7bebb97 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -919,6 +919,10 @@ body.layout-single-column { .layout-single-column .status__line--full:before { background: transparent; } +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} @media screen and (max-width:889px) { .layout-single-column .status--in-thread .status__line { inset-inline-start: 39px; diff --git a/TangerineUI.css b/TangerineUI.css index 7c293b0..0f87b63 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -919,6 +919,10 @@ body.layout-single-column { .layout-single-column .status__line--full:before { background: transparent; } +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} @media screen and (max-width:889px) { .layout-single-column .status--in-thread .status__line { inset-inline-start: 39px; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 4bd8031..7bebb97 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -919,6 +919,10 @@ body.layout-single-column { .layout-single-column .status__line--full:before { background: transparent; } +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} @media screen and (max-width:889px) { .layout-single-column .status--in-thread .status__line { inset-inline-start: 39px; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 7c293b0..0f87b63 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -919,6 +919,10 @@ body.layout-single-column { .layout-single-column .status__line--full:before { background: transparent; } +.layout-single-column .status__line.status__line--full.status__line--first { + top: 58px; + height: calc(100% - 58px); +} @media screen and (max-width:889px) { .layout-single-column .status--in-thread .status__line { inset-inline-start: 39px; From 51d3080d6a20539ee56f26d52ba18869d8d400c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 14:49:58 +0200 Subject: [PATCH 12/24] Revamped post action icons ft. micro-interactions --- TangerineUI-purple.css | 134 ++++++++++++++---- TangerineUI.css | 134 ++++++++++++++---- .../layout-single-column.scss | 134 ++++++++++++++---- .../tangerineui/layout-single-column.scss | 134 ++++++++++++++---- 4 files changed, 428 insertions(+), 108 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 7bebb97..21fdf64 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -65,16 +65,16 @@ --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: 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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236364ff' stroke='%236364ff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236364ff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236364ff'%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"); @@ -83,8 +83,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236364ff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -97,8 +97,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236364ff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -111,10 +111,10 @@ --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-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%236364ff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffb609" stroke="%23ffb609" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { @@ -123,16 +123,16 @@ --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: 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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236b6cfb' stroke='%236b6cfb' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236b6cfb' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236b6cfb'%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"); @@ -141,8 +141,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6cfb' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -155,8 +155,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6cfb" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -169,8 +169,8 @@ --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: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%236b6cfb" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @@ -292,6 +292,7 @@ body.layout-single-column { .layout-single-column i.fa-bookmark:before { background-image: var(--icon-bookmark); background-size: 80%; + background-position: center 55%; } .layout-single-column .detailed-status__button i.fa-bookmark:before { background-image: var(--icon-bookmark-accent); @@ -317,8 +318,7 @@ body.layout-single-column { } .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); + background-image: var(--icon-star-active); } .layout-single-column .detailed-status__link i.fa.fa-star:before { content: " "; @@ -364,7 +364,7 @@ body.layout-single-column { .layout-single-column i.fa-reply-all::before { content: var(--icon-reply); position: relative; - top: 2px; + top: 3px; } .layout-single-column .detailed-status__button i.fa-reply::before, .layout-single-column .detailed-status__button i.fa-reply-all::before { @@ -863,6 +863,7 @@ body.layout-single-column { right: 0; top: -1px; content: ""; + opacity: .7; } @media screen and (max-width:889px) { .layout-single-column .status::before, @@ -870,6 +871,12 @@ body.layout-single-column { width: calc(100% - 73px); } } +@media (prefers-color-scheme: dark) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + opacity: 1; + } +} /* Remove border between posts when applicable */ .layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ @@ -949,16 +956,26 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); + box-shadow: + inset 0 -4px var(--color-accent-lines), + inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 1px solid var(--color-lines); border-top-right-radius: 8px; border-top-left-radius: 8px; + box-shadow: + inset 0 -4px var(--color-accent-lines); } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; + box-shadow: + inset 0 4px var(--color-accent-lines); +} +.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ + box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { @@ -974,6 +991,15 @@ body.layout-single-column { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + + + .layout-single-column .detailed-status { + padding: 8px 8px 14px; + } +} +.layout-single-column .detailed-status__display-avatar .account__avatar { + width: 60px !important; + height: 60px !important; } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -1029,6 +1055,57 @@ body.layout-single-column { position: absolute; right: 18px; } +.layout-single-column .status__action-bar .icon-button.disabled { + pointer-events: none; +} +.layout-single-column .status__action-bar .icon-button:active, +.layout-single-column .status__action-bar .icon-button.active:active, +.layout-single-column .status__action-bar .icon-button:focus, +.layout-single-column .status__action-bar .icon-button.active:focus, +.layout-single-column .detailed-status__action-bar .icon-button:active, +.layout-single-column .detailed-status__action-bar .icon-button.active:active, +.layout-single-column .detailed-status__action-bar .icon-button:focus, +.layout-single-column .detailed-status__action-bar .icon-button.active:focus { + background-color: transparent; +} +.layout-single-column .icon-button.star-icon.deactivate>.fa-star, +.layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ + animation: none; +} +.layout-single-column .icon-button.active>.fa { + animation: bounce .4s ease-out !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa { + animation: bounce-detailed .4s ease-out !important; +} +@keyframes bounce { + 0% { + transform: scale(.8); + } + 50% { + transform: scale(1.2); + } + 75% { + transform: scale(.6); + } + 100% { + transform: scale(.8); + } +} +@keyframes bounce-detailed { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.4); + } + 75% { + transform: scale(.8); + } + 100% { + transform: scale(1); + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; @@ -1038,6 +1115,8 @@ body.layout-single-column { } .layout-single-column .status__action-bar .icon-button .fa { transform: scale(.8); + height: 32px; + line-height: 32px; } .layout-single-column .status__action-bar i.fa-star:before, .layout-single-column .status__action-bar i.fa-bookmark:before, @@ -1648,6 +1727,7 @@ body.layout-single-column { top: -4px; font-weight: bold; border: 0; + z-index: 1; } .layout-single-column .compose-panel hr, .navigation-panel hr { display: none; diff --git a/TangerineUI.css b/TangerineUI.css index 0f87b63..a98f759 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -65,16 +65,16 @@ --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: 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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23f76902' stroke='%23f76902' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23f76902' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23f76902'%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"); @@ -83,8 +83,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f76902' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -97,8 +97,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -111,10 +111,10 @@ --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-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23f76902" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffb609" stroke="%23ffb609" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { @@ -123,16 +123,16 @@ --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: 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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23e68933' stroke='%23e68933' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23e68933'%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"); @@ -141,8 +141,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e68933' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -155,8 +155,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -169,8 +169,8 @@ --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: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23e68933" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @@ -292,6 +292,7 @@ body.layout-single-column { .layout-single-column i.fa-bookmark:before { background-image: var(--icon-bookmark); background-size: 80%; + background-position: center 55%; } .layout-single-column .detailed-status__button i.fa-bookmark:before { background-image: var(--icon-bookmark-accent); @@ -317,8 +318,7 @@ body.layout-single-column { } .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); + background-image: var(--icon-star-active); } .layout-single-column .detailed-status__link i.fa.fa-star:before { content: " "; @@ -364,7 +364,7 @@ body.layout-single-column { .layout-single-column i.fa-reply-all::before { content: var(--icon-reply); position: relative; - top: 2px; + top: 3px; } .layout-single-column .detailed-status__button i.fa-reply::before, .layout-single-column .detailed-status__button i.fa-reply-all::before { @@ -863,6 +863,7 @@ body.layout-single-column { right: 0; top: -1px; content: ""; + opacity: .7; } @media screen and (max-width:889px) { .layout-single-column .status::before, @@ -870,6 +871,12 @@ body.layout-single-column { width: calc(100% - 73px); } } +@media (prefers-color-scheme: dark) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + opacity: 1; + } +} /* Remove border between posts when applicable */ .layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ @@ -949,16 +956,26 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); + box-shadow: + inset 0 -4px var(--color-accent-lines), + inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 1px solid var(--color-lines); border-top-right-radius: 8px; border-top-left-radius: 8px; + box-shadow: + inset 0 -4px var(--color-accent-lines); } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; + box-shadow: + inset 0 4px var(--color-accent-lines); +} +.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ + box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { @@ -974,6 +991,15 @@ body.layout-single-column { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + + + .layout-single-column .detailed-status { + padding: 8px 8px 14px; + } +} +.layout-single-column .detailed-status__display-avatar .account__avatar { + width: 60px !important; + height: 60px !important; } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -1029,6 +1055,57 @@ body.layout-single-column { position: absolute; right: 18px; } +.layout-single-column .status__action-bar .icon-button.disabled { + pointer-events: none; +} +.layout-single-column .status__action-bar .icon-button:active, +.layout-single-column .status__action-bar .icon-button.active:active, +.layout-single-column .status__action-bar .icon-button:focus, +.layout-single-column .status__action-bar .icon-button.active:focus, +.layout-single-column .detailed-status__action-bar .icon-button:active, +.layout-single-column .detailed-status__action-bar .icon-button.active:active, +.layout-single-column .detailed-status__action-bar .icon-button:focus, +.layout-single-column .detailed-status__action-bar .icon-button.active:focus { + background-color: transparent; +} +.layout-single-column .icon-button.star-icon.deactivate>.fa-star, +.layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ + animation: none; +} +.layout-single-column .icon-button.active>.fa { + animation: bounce .4s ease-out !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa { + animation: bounce-detailed .4s ease-out !important; +} +@keyframes bounce { + 0% { + transform: scale(.8); + } + 50% { + transform: scale(1.2); + } + 75% { + transform: scale(.6); + } + 100% { + transform: scale(.8); + } +} +@keyframes bounce-detailed { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.4); + } + 75% { + transform: scale(.8); + } + 100% { + transform: scale(1); + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; @@ -1038,6 +1115,8 @@ body.layout-single-column { } .layout-single-column .status__action-bar .icon-button .fa { transform: scale(.8); + height: 32px; + line-height: 32px; } .layout-single-column .status__action-bar i.fa-star:before, .layout-single-column .status__action-bar i.fa-bookmark:before, @@ -1648,6 +1727,7 @@ body.layout-single-column { top: -4px; font-weight: bold; border: 0; + z-index: 1; } .layout-single-column .compose-panel hr, .navigation-panel hr { display: none; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 7bebb97..21fdf64 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -65,16 +65,16 @@ --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: 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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236364ff' stroke='%236364ff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236364ff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236364ff'%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"); @@ -83,8 +83,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236364ff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -97,8 +97,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236364ff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -111,10 +111,10 @@ --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-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%236364ff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffb609" stroke="%23ffb609" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { @@ -123,16 +123,16 @@ --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: 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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236b6cfb' stroke='%236b6cfb' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236b6cfb' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236b6cfb'%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"); @@ -141,8 +141,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6cfb' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -155,8 +155,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6cfb" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -169,8 +169,8 @@ --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: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%236b6cfb" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @@ -292,6 +292,7 @@ body.layout-single-column { .layout-single-column i.fa-bookmark:before { background-image: var(--icon-bookmark); background-size: 80%; + background-position: center 55%; } .layout-single-column .detailed-status__button i.fa-bookmark:before { background-image: var(--icon-bookmark-accent); @@ -317,8 +318,7 @@ body.layout-single-column { } .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); + background-image: var(--icon-star-active); } .layout-single-column .detailed-status__link i.fa.fa-star:before { content: " "; @@ -364,7 +364,7 @@ body.layout-single-column { .layout-single-column i.fa-reply-all::before { content: var(--icon-reply); position: relative; - top: 2px; + top: 3px; } .layout-single-column .detailed-status__button i.fa-reply::before, .layout-single-column .detailed-status__button i.fa-reply-all::before { @@ -863,6 +863,7 @@ body.layout-single-column { right: 0; top: -1px; content: ""; + opacity: .7; } @media screen and (max-width:889px) { .layout-single-column .status::before, @@ -870,6 +871,12 @@ body.layout-single-column { width: calc(100% - 73px); } } +@media (prefers-color-scheme: dark) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + opacity: 1; + } +} /* Remove border between posts when applicable */ .layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ @@ -949,16 +956,26 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); + box-shadow: + inset 0 -4px var(--color-accent-lines), + inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 1px solid var(--color-lines); border-top-right-radius: 8px; border-top-left-radius: 8px; + box-shadow: + inset 0 -4px var(--color-accent-lines); } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; + box-shadow: + inset 0 4px var(--color-accent-lines); +} +.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ + box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { @@ -974,6 +991,15 @@ body.layout-single-column { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + + + .layout-single-column .detailed-status { + padding: 8px 8px 14px; + } +} +.layout-single-column .detailed-status__display-avatar .account__avatar { + width: 60px !important; + height: 60px !important; } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -1029,6 +1055,57 @@ body.layout-single-column { position: absolute; right: 18px; } +.layout-single-column .status__action-bar .icon-button.disabled { + pointer-events: none; +} +.layout-single-column .status__action-bar .icon-button:active, +.layout-single-column .status__action-bar .icon-button.active:active, +.layout-single-column .status__action-bar .icon-button:focus, +.layout-single-column .status__action-bar .icon-button.active:focus, +.layout-single-column .detailed-status__action-bar .icon-button:active, +.layout-single-column .detailed-status__action-bar .icon-button.active:active, +.layout-single-column .detailed-status__action-bar .icon-button:focus, +.layout-single-column .detailed-status__action-bar .icon-button.active:focus { + background-color: transparent; +} +.layout-single-column .icon-button.star-icon.deactivate>.fa-star, +.layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ + animation: none; +} +.layout-single-column .icon-button.active>.fa { + animation: bounce .4s ease-out !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa { + animation: bounce-detailed .4s ease-out !important; +} +@keyframes bounce { + 0% { + transform: scale(.8); + } + 50% { + transform: scale(1.2); + } + 75% { + transform: scale(.6); + } + 100% { + transform: scale(.8); + } +} +@keyframes bounce-detailed { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.4); + } + 75% { + transform: scale(.8); + } + 100% { + transform: scale(1); + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; @@ -1038,6 +1115,8 @@ body.layout-single-column { } .layout-single-column .status__action-bar .icon-button .fa { transform: scale(.8); + height: 32px; + line-height: 32px; } .layout-single-column .status__action-bar i.fa-star:before, .layout-single-column .status__action-bar i.fa-bookmark:before, @@ -1648,6 +1727,7 @@ body.layout-single-column { top: -4px; font-weight: bold; border: 0; + z-index: 1; } .layout-single-column .compose-panel hr, .navigation-panel hr { display: none; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 0f87b63..a98f759 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -65,16 +65,16 @@ --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: 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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23f76902' stroke='%23f76902' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23282C37' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23282C37'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23f76902' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23f76902'%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"); @@ -83,8 +83,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23282C37' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f76902' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23282C37" xmlns="http://www.w3.org/2000/svg" color="%23282C37"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23282C37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -97,8 +97,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23282C37" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -111,10 +111,10 @@ --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-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23282C37" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23f76902" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffb609" stroke="%23ffb609" stroke-width="4" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282C37' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { @@ -123,16 +123,16 @@ --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: 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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23e68933' stroke='%23e68933' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23e68933'%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"); @@ -141,8 +141,8 @@ --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: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); + --icon-share-accent: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e68933' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E"); --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" color="%23ffffff"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E'); @@ -155,8 +155,8 @@ --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: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -169,8 +169,8 @@ --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: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23ffffff" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); + --icon-star-accent: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%23e68933" stroke-width="7" viewBox="-1 -1 70 70"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A'); --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E"); } @@ -292,6 +292,7 @@ body.layout-single-column { .layout-single-column i.fa-bookmark:before { background-image: var(--icon-bookmark); background-size: 80%; + background-position: center 55%; } .layout-single-column .detailed-status__button i.fa-bookmark:before { background-image: var(--icon-bookmark-accent); @@ -317,8 +318,7 @@ body.layout-single-column { } .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); + background-image: var(--icon-star-active); } .layout-single-column .detailed-status__link i.fa.fa-star:before { content: " "; @@ -364,7 +364,7 @@ body.layout-single-column { .layout-single-column i.fa-reply-all::before { content: var(--icon-reply); position: relative; - top: 2px; + top: 3px; } .layout-single-column .detailed-status__button i.fa-reply::before, .layout-single-column .detailed-status__button i.fa-reply-all::before { @@ -863,6 +863,7 @@ body.layout-single-column { right: 0; top: -1px; content: ""; + opacity: .7; } @media screen and (max-width:889px) { .layout-single-column .status::before, @@ -870,6 +871,12 @@ body.layout-single-column { width: calc(100% - 73px); } } +@media (prefers-color-scheme: dark) { + .layout-single-column .status::before, + .layout-single-column .notification__message::before { + opacity: 1; + } +} /* Remove border between posts when applicable */ .layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ @@ -949,16 +956,26 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); + box-shadow: + inset 0 -4px var(--color-accent-lines), + inset 0 4px var(--color-accent-lines); } .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 1px solid var(--color-lines); border-top-right-radius: 8px; border-top-left-radius: 8px; + box-shadow: + inset 0 -4px var(--color-accent-lines); } .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; + box-shadow: + inset 0 4px var(--color-accent-lines); +} +.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ + box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { @@ -974,6 +991,15 @@ body.layout-single-column { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + + + .layout-single-column .detailed-status { + padding: 8px 8px 14px; + } +} +.layout-single-column .detailed-status__display-avatar .account__avatar { + width: 60px !important; + height: 60px !important; } .layout-single-column .detailed-status .status__content { line-height: 24px; @@ -1029,6 +1055,57 @@ body.layout-single-column { position: absolute; right: 18px; } +.layout-single-column .status__action-bar .icon-button.disabled { + pointer-events: none; +} +.layout-single-column .status__action-bar .icon-button:active, +.layout-single-column .status__action-bar .icon-button.active:active, +.layout-single-column .status__action-bar .icon-button:focus, +.layout-single-column .status__action-bar .icon-button.active:focus, +.layout-single-column .detailed-status__action-bar .icon-button:active, +.layout-single-column .detailed-status__action-bar .icon-button.active:active, +.layout-single-column .detailed-status__action-bar .icon-button:focus, +.layout-single-column .detailed-status__action-bar .icon-button.active:focus { + background-color: transparent; +} +.layout-single-column .icon-button.star-icon.deactivate>.fa-star, +.layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ + animation: none; +} +.layout-single-column .icon-button.active>.fa { + animation: bounce .4s ease-out !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa { + animation: bounce-detailed .4s ease-out !important; +} +@keyframes bounce { + 0% { + transform: scale(.8); + } + 50% { + transform: scale(1.2); + } + 75% { + transform: scale(.6); + } + 100% { + transform: scale(.8); + } +} +@keyframes bounce-detailed { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.4); + } + 75% { + transform: scale(.8); + } + 100% { + transform: scale(1); + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; @@ -1038,6 +1115,8 @@ body.layout-single-column { } .layout-single-column .status__action-bar .icon-button .fa { transform: scale(.8); + height: 32px; + line-height: 32px; } .layout-single-column .status__action-bar i.fa-star:before, .layout-single-column .status__action-bar i.fa-bookmark:before, @@ -1648,6 +1727,7 @@ body.layout-single-column { top: -4px; font-weight: bold; border: 0; + z-index: 1; } .layout-single-column .compose-panel hr, .navigation-panel hr { display: none; From e374b1228daeb47caba7b7e69a8f1ef1dbe015db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 15:15:27 +0200 Subject: [PATCH 13/24] Fixed search icon alignment --- TangerineUI-purple.css | 4 ++-- TangerineUI.css | 4 ++-- .../styles/tangerineui-purple/layout-single-column.scss | 4 ++-- .../javascript/styles/tangerineui/layout-single-column.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 21fdf64..88c0a90 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2195,7 +2195,7 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { right: 15px; - top: 15px; + top: 16px; color: var(--color-accent); } .layout-single-column .compose-panel .fa-search.active, @@ -2293,7 +2293,7 @@ body.layout-single-column { .layout-single-column i.fa.active { color: var(--color-accent); transform: scale(1); - top: 13px; + top: 14px; } .layout-single-column .explore__search-header { padding: 10px 0 0; diff --git a/TangerineUI.css b/TangerineUI.css index a98f759..4292300 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2195,7 +2195,7 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { right: 15px; - top: 15px; + top: 16px; color: var(--color-accent); } .layout-single-column .compose-panel .fa-search.active, @@ -2293,7 +2293,7 @@ body.layout-single-column { .layout-single-column i.fa.active { color: var(--color-accent); transform: scale(1); - top: 13px; + top: 14px; } .layout-single-column .explore__search-header { padding: 10px 0 0; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 21fdf64..88c0a90 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2195,7 +2195,7 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { right: 15px; - top: 15px; + top: 16px; color: var(--color-accent); } .layout-single-column .compose-panel .fa-search.active, @@ -2293,7 +2293,7 @@ body.layout-single-column { .layout-single-column i.fa.active { color: var(--color-accent); transform: scale(1); - top: 13px; + top: 14px; } .layout-single-column .explore__search-header { padding: 10px 0 0; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index a98f759..4292300 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2195,7 +2195,7 @@ body.layout-single-column { .layout-single-column .compose-panel .fa-search, .layout-single-column .compose-panel .fa.active { right: 15px; - top: 15px; + top: 16px; color: var(--color-accent); } .layout-single-column .compose-panel .fa-search.active, @@ -2293,7 +2293,7 @@ body.layout-single-column { .layout-single-column i.fa.active { color: var(--color-accent); transform: scale(1); - top: 13px; + top: 14px; } .layout-single-column .explore__search-header { padding: 10px 0 0; From df6f75d38504fc84a11810de6772972ae70e8c5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 17:08:39 +0200 Subject: [PATCH 14/24] Tweaks to icons + Fixed edited history dropdown --- TangerineUI-purple.css | 70 ++++++++++++++++--- TangerineUI.css | 70 ++++++++++++++++--- .../layout-single-column.scss | 70 ++++++++++++++++--- .../tangerineui/layout-single-column.scss | 70 ++++++++++++++++--- 4 files changed, 240 insertions(+), 40 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 88c0a90..2ff99f1 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -525,7 +525,7 @@ body.layout-single-column { border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-textarea__suggestions, .layout-single-column .compose-form .autosuggest-textarea__textarea, @@ -752,6 +752,10 @@ body.layout-single-column { .layout-single-column .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong { + font-weight: bold; +} .layout-single-column .status { margin-left: 56px; padding: 0 10px; @@ -842,7 +846,8 @@ body.layout-single-column { position: absolute; right: 22px; color: var(--color-content-fg); - opacity: .7; + opacity: .6; + font-weight: bold; } .layout-single-column .status__avatar { margin-bottom: -10px; @@ -1009,9 +1014,13 @@ body.layout-single-column { 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); +.layout-single-column .detailed-status__display-name strong, +.layout-single-column .detailed-status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .detailed-status__display-name strong { + font-size: 18px; + font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; @@ -1072,7 +1081,7 @@ body.layout-single-column { .layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .icon-button.active>.fa { +.layout-single-column .status__action-bar .icon-button.active>.fa { animation: bounce .4s ease-out !important; } .layout-single-column .detailed-status__action-bar .icon-button.active>.fa { @@ -1083,7 +1092,7 @@ body.layout-single-column { transform: scale(.8); } 50% { - transform: scale(1.2); + transform: scale(1.4); } 75% { transform: scale(.6); @@ -1097,7 +1106,7 @@ body.layout-single-column { transform: scale(1); } 50% { - transform: scale(1.4); + transform: scale(1.6); } 75% { transform: scale(.8); @@ -1298,7 +1307,7 @@ body.layout-single-column { .layout-single-column .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); - border-bottom: 0; + border: 1px solid var(--color-accent-lines); } .layout-single-column .follow_requests-unlocked_explanation a { color: var(--color-accent); @@ -1337,6 +1346,35 @@ body.layout-single-column { } } +/* Speech bubble look DMs */ +.layout-single-column .status-direct .status__content, +.layout-single-column .detailed-status-direct .status__content { + padding: .7em 1.2em .7em 1em; + margin-top: 4px; + background: var(--color-accent-bg); + border: 1px solid var(--color-accent-lines); + border-radius: 5px 18px 18px 16px; + display: inline-block; +} +.layout-single-column .status-direct .fa.fa-at, +.layout-single-column .detailed-status-direct .fa.fa-at { + font-size: 20px; +} +.layout-single-column .status-direct .fa.fa-at::before, +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-size: contain; + background-repeat: no-repeat; + background-image: var(--icon-direct-messages); + background-position: center 3px; + color: transparent; +} +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-position: center 4px; +} +.layout-single-column .status-direct.muted .status__content { + background: rgba(155, 174, 200, 0.1); +} + /* ⏺️ Column headers @@ -1911,7 +1949,10 @@ body.layout-single-column { } .layout-single-column .account__header__tabs__name h1, .layout-single-column .account__header__tabs__name h1 small { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); +} +.layout-single-column .account__header__tabs__name h1 > span { + font-size: 18px; } .layout-single-column .account__header__tabs__name h1 small { opacity: .7; @@ -2667,6 +2708,15 @@ body.layout-single-column { background-color: var(--color-accent); } +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__container__header, +.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__item button { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-color: var(--color-lines); +} .layout-single-column .dropdown-menu, .layout-single-column .dropdown-menu__item a, diff --git a/TangerineUI.css b/TangerineUI.css index 4292300..6ecf464 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -525,7 +525,7 @@ body.layout-single-column { border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-textarea__suggestions, .layout-single-column .compose-form .autosuggest-textarea__textarea, @@ -752,6 +752,10 @@ body.layout-single-column { .layout-single-column .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong { + font-weight: bold; +} .layout-single-column .status { margin-left: 56px; padding: 0 10px; @@ -842,7 +846,8 @@ body.layout-single-column { position: absolute; right: 22px; color: var(--color-content-fg); - opacity: .7; + opacity: .6; + font-weight: bold; } .layout-single-column .status__avatar { margin-bottom: -10px; @@ -1009,9 +1014,13 @@ body.layout-single-column { 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); +.layout-single-column .detailed-status__display-name strong, +.layout-single-column .detailed-status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .detailed-status__display-name strong { + font-size: 18px; + font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; @@ -1072,7 +1081,7 @@ body.layout-single-column { .layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .icon-button.active>.fa { +.layout-single-column .status__action-bar .icon-button.active>.fa { animation: bounce .4s ease-out !important; } .layout-single-column .detailed-status__action-bar .icon-button.active>.fa { @@ -1083,7 +1092,7 @@ body.layout-single-column { transform: scale(.8); } 50% { - transform: scale(1.2); + transform: scale(1.4); } 75% { transform: scale(.6); @@ -1097,7 +1106,7 @@ body.layout-single-column { transform: scale(1); } 50% { - transform: scale(1.4); + transform: scale(1.6); } 75% { transform: scale(.8); @@ -1298,7 +1307,7 @@ body.layout-single-column { .layout-single-column .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); - border-bottom: 0; + border: 1px solid var(--color-accent-lines); } .layout-single-column .follow_requests-unlocked_explanation a { color: var(--color-accent); @@ -1337,6 +1346,35 @@ body.layout-single-column { } } +/* Speech bubble look DMs */ +.layout-single-column .status-direct .status__content, +.layout-single-column .detailed-status-direct .status__content { + padding: .7em 1.2em .7em 1em; + margin-top: 4px; + background: var(--color-accent-bg); + border: 1px solid var(--color-accent-lines); + border-radius: 5px 18px 18px 16px; + display: inline-block; +} +.layout-single-column .status-direct .fa.fa-at, +.layout-single-column .detailed-status-direct .fa.fa-at { + font-size: 20px; +} +.layout-single-column .status-direct .fa.fa-at::before, +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-size: contain; + background-repeat: no-repeat; + background-image: var(--icon-direct-messages); + background-position: center 3px; + color: transparent; +} +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-position: center 4px; +} +.layout-single-column .status-direct.muted .status__content { + background: rgba(155, 174, 200, 0.1); +} + /* ⏺️ Column headers @@ -1911,7 +1949,10 @@ body.layout-single-column { } .layout-single-column .account__header__tabs__name h1, .layout-single-column .account__header__tabs__name h1 small { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); +} +.layout-single-column .account__header__tabs__name h1 > span { + font-size: 18px; } .layout-single-column .account__header__tabs__name h1 small { opacity: .7; @@ -2667,6 +2708,15 @@ body.layout-single-column { background-color: var(--color-accent); } +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__container__header, +.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__item button { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-color: var(--color-lines); +} .layout-single-column .dropdown-menu, .layout-single-column .dropdown-menu__item a, diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 88c0a90..2ff99f1 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -525,7 +525,7 @@ body.layout-single-column { border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-textarea__suggestions, .layout-single-column .compose-form .autosuggest-textarea__textarea, @@ -752,6 +752,10 @@ body.layout-single-column { .layout-single-column .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong { + font-weight: bold; +} .layout-single-column .status { margin-left: 56px; padding: 0 10px; @@ -842,7 +846,8 @@ body.layout-single-column { position: absolute; right: 22px; color: var(--color-content-fg); - opacity: .7; + opacity: .6; + font-weight: bold; } .layout-single-column .status__avatar { margin-bottom: -10px; @@ -1009,9 +1014,13 @@ body.layout-single-column { 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); +.layout-single-column .detailed-status__display-name strong, +.layout-single-column .detailed-status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .detailed-status__display-name strong { + font-size: 18px; + font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; @@ -1072,7 +1081,7 @@ body.layout-single-column { .layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .icon-button.active>.fa { +.layout-single-column .status__action-bar .icon-button.active>.fa { animation: bounce .4s ease-out !important; } .layout-single-column .detailed-status__action-bar .icon-button.active>.fa { @@ -1083,7 +1092,7 @@ body.layout-single-column { transform: scale(.8); } 50% { - transform: scale(1.2); + transform: scale(1.4); } 75% { transform: scale(.6); @@ -1097,7 +1106,7 @@ body.layout-single-column { transform: scale(1); } 50% { - transform: scale(1.4); + transform: scale(1.6); } 75% { transform: scale(.8); @@ -1298,7 +1307,7 @@ body.layout-single-column { .layout-single-column .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); - border-bottom: 0; + border: 1px solid var(--color-accent-lines); } .layout-single-column .follow_requests-unlocked_explanation a { color: var(--color-accent); @@ -1337,6 +1346,35 @@ body.layout-single-column { } } +/* Speech bubble look DMs */ +.layout-single-column .status-direct .status__content, +.layout-single-column .detailed-status-direct .status__content { + padding: .7em 1.2em .7em 1em; + margin-top: 4px; + background: var(--color-accent-bg); + border: 1px solid var(--color-accent-lines); + border-radius: 5px 18px 18px 16px; + display: inline-block; +} +.layout-single-column .status-direct .fa.fa-at, +.layout-single-column .detailed-status-direct .fa.fa-at { + font-size: 20px; +} +.layout-single-column .status-direct .fa.fa-at::before, +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-size: contain; + background-repeat: no-repeat; + background-image: var(--icon-direct-messages); + background-position: center 3px; + color: transparent; +} +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-position: center 4px; +} +.layout-single-column .status-direct.muted .status__content { + background: rgba(155, 174, 200, 0.1); +} + /* ⏺️ Column headers @@ -1911,7 +1949,10 @@ body.layout-single-column { } .layout-single-column .account__header__tabs__name h1, .layout-single-column .account__header__tabs__name h1 small { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); +} +.layout-single-column .account__header__tabs__name h1 > span { + font-size: 18px; } .layout-single-column .account__header__tabs__name h1 small { opacity: .7; @@ -2667,6 +2708,15 @@ body.layout-single-column { background-color: var(--color-accent); } +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__container__header, +.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__item button { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-color: var(--color-lines); +} .layout-single-column .dropdown-menu, .layout-single-column .dropdown-menu__item a, diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 4292300..6ecf464 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -525,7 +525,7 @@ body.layout-single-column { border-right: 1px solid var(--color-lines); } .layout-single-column .navigation-bar strong { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); } .layout-single-column .compose-form .autosuggest-textarea__suggestions, .layout-single-column .compose-form .autosuggest-textarea__textarea, @@ -752,6 +752,10 @@ body.layout-single-column { .layout-single-column .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } +.layout-single-column .account__display-name strong, +.layout-single-column .status__display-name strong { + font-weight: bold; +} .layout-single-column .status { margin-left: 56px; padding: 0 10px; @@ -842,7 +846,8 @@ body.layout-single-column { position: absolute; right: 22px; color: var(--color-content-fg); - opacity: .7; + opacity: .6; + font-weight: bold; } .layout-single-column .status__avatar { margin-bottom: -10px; @@ -1009,9 +1014,13 @@ body.layout-single-column { 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); +.layout-single-column .detailed-status__display-name strong, +.layout-single-column .detailed-status__display-name .display-name__account { + color: var(--color-content-fg); +} +.layout-single-column .detailed-status__display-name strong { + font-size: 18px; + font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; @@ -1072,7 +1081,7 @@ body.layout-single-column { .layout-single-column .icon-button.star-icon.activate>.fa-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .icon-button.active>.fa { +.layout-single-column .status__action-bar .icon-button.active>.fa { animation: bounce .4s ease-out !important; } .layout-single-column .detailed-status__action-bar .icon-button.active>.fa { @@ -1083,7 +1092,7 @@ body.layout-single-column { transform: scale(.8); } 50% { - transform: scale(1.2); + transform: scale(1.4); } 75% { transform: scale(.6); @@ -1097,7 +1106,7 @@ body.layout-single-column { transform: scale(1); } 50% { - transform: scale(1.4); + transform: scale(1.6); } 75% { transform: scale(.8); @@ -1298,7 +1307,7 @@ body.layout-single-column { .layout-single-column .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); - border-bottom: 0; + border: 1px solid var(--color-accent-lines); } .layout-single-column .follow_requests-unlocked_explanation a { color: var(--color-accent); @@ -1337,6 +1346,35 @@ body.layout-single-column { } } +/* Speech bubble look DMs */ +.layout-single-column .status-direct .status__content, +.layout-single-column .detailed-status-direct .status__content { + padding: .7em 1.2em .7em 1em; + margin-top: 4px; + background: var(--color-accent-bg); + border: 1px solid var(--color-accent-lines); + border-radius: 5px 18px 18px 16px; + display: inline-block; +} +.layout-single-column .status-direct .fa.fa-at, +.layout-single-column .detailed-status-direct .fa.fa-at { + font-size: 20px; +} +.layout-single-column .status-direct .fa.fa-at::before, +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-size: contain; + background-repeat: no-repeat; + background-image: var(--icon-direct-messages); + background-position: center 3px; + color: transparent; +} +.layout-single-column .detailed-status-direct .fa.fa-at::before { + background-position: center 4px; +} +.layout-single-column .status-direct.muted .status__content { + background: rgba(155, 174, 200, 0.1); +} + /* ⏺️ Column headers @@ -1911,7 +1949,10 @@ body.layout-single-column { } .layout-single-column .account__header__tabs__name h1, .layout-single-column .account__header__tabs__name h1 small { - color: var(--color-content-fg-bold); + color: var(--color-content-fg); +} +.layout-single-column .account__header__tabs__name h1 > span { + font-size: 18px; } .layout-single-column .account__header__tabs__name h1 small { opacity: .7; @@ -2667,6 +2708,15 @@ body.layout-single-column { background-color: var(--color-accent); } +.layout-single-column .dropdown-menu, +.layout-single-column .dropdown-menu__container__header, +.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, +.layout-single-column .dropdown-menu__item a, +.layout-single-column .dropdown-menu__item button { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border-color: var(--color-lines); +} .layout-single-column .dropdown-menu, .layout-single-column .dropdown-menu__item a, From 2dedb44f5e2aa7934e36d15e1eb155d8b04a2723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 17:40:41 +0200 Subject: [PATCH 15/24] Fixed muted DM border in notifications --- TangerineUI-purple.css | 1 + TangerineUI.css | 1 + .../styles/tangerineui-purple/layout-single-column.scss | 1 + .../app/javascript/styles/tangerineui/layout-single-column.scss | 1 + 4 files changed, 4 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 2ff99f1..53786f3 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1373,6 +1373,7 @@ body.layout-single-column { } .layout-single-column .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); + border-color: var(--color-lines); } diff --git a/TangerineUI.css b/TangerineUI.css index 6ecf464..33d81d7 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1373,6 +1373,7 @@ body.layout-single-column { } .layout-single-column .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); + border-color: var(--color-lines); } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 2ff99f1..53786f3 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1373,6 +1373,7 @@ body.layout-single-column { } .layout-single-column .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); + border-color: var(--color-lines); } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 6ecf464..33d81d7 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1373,6 +1373,7 @@ body.layout-single-column { } .layout-single-column .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); + border-color: var(--color-lines); } From b97efa3e180ba74f17432c62e3898da632e3bccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 17:45:43 +0200 Subject: [PATCH 16/24] Fixed post margin conflict in Notifications --- TangerineUI-purple.css | 4 ++-- TangerineUI.css | 4 ++-- .../styles/tangerineui-purple/layout-single-column.scss | 4 ++-- .../javascript/styles/tangerineui/layout-single-column.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 53786f3..47f1f32 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -815,8 +815,8 @@ body.layout-single-column { } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + .layout-single-column .scrollable:first-child > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable:first-child > div > article:first-child > div > .status__wrapper { margin-top: 15px; } } diff --git a/TangerineUI.css b/TangerineUI.css index 33d81d7..e093448 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -815,8 +815,8 @@ body.layout-single-column { } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + .layout-single-column .scrollable:first-child > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable:first-child > div > article:first-child > div > .status__wrapper { margin-top: 15px; } } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 53786f3..47f1f32 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -815,8 +815,8 @@ body.layout-single-column { } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + .layout-single-column .scrollable:first-child > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable:first-child > div > article:first-child > div > .status__wrapper { margin-top: 15px; } } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 33d81d7..e093448 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -815,8 +815,8 @@ body.layout-single-column { } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper { + .layout-single-column .scrollable:first-child > div:first-child > div:first-child > .status__wrapper, + .layout-single-column .scrollable:first-child > div > article:first-child > div > .status__wrapper { margin-top: 15px; } } From dc5106adada877513084075cc9a402b15f15d13b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 21:22:32 +0200 Subject: [PATCH 17/24] =?UTF-8?q?Boost=20icons=20are=20rockets=20now=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- TangerineUI-purple.css | 94 ++++++++++++++----- TangerineUI.css | 92 +++++++++++++----- .../layout-single-column.scss | 94 ++++++++++++++----- .../tangerineui/layout-single-column.scss | 92 +++++++++++++----- 4 files changed, 286 insertions(+), 86 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 47f1f32..20bd8eb 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -65,11 +65,10 @@ --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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236364ff' stroke='%236364ff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%236364ff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23F91880; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-5.19,3.92c1.104,-0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,-0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2Z' style='fill-rule:nonzero;'/%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='%23F91880' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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"); @@ -98,8 +97,8 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236364ff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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-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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ba7c' 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'); @@ -123,14 +122,8 @@ --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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236b6cfb' stroke='%236b6cfb' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-boost: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%236b6cfb; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236b6cfb' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236b6cfb'%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"); @@ -157,7 +150,6 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6cfb" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -314,6 +306,7 @@ body.layout-single-column { line-height: 34px; } .layout-single-column .detailed-status__button i.fa-star:before { + background-size: 75%; background-image: var(--icon-star-accent); } .layout-single-column button.icon-button.active i.fa-star:before, @@ -336,12 +329,13 @@ body.layout-single-column { background-image: var(--icon-boost-accent); } .layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw, .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); + background-image: var(--icon-boost-active); } .layout-single-column .detailed-status__link .fa.fa-retweet:before { background-image: var(--icon-boost); @@ -1055,11 +1049,6 @@ body.layout-single-column { 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; @@ -1115,6 +1104,67 @@ body.layout-single-column { transform: scale(1); } } +.layout-single-column .status__action-bar .icon-button.reblogPrivate>.fa-retweet { + opacity: 1; +} +.layout-single-column .status__action-bar .icon-button.active>.fa-retweet { + animation: launch 1.2s ease-in !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa-retweet { + animation: launch-detailed 1.2s ease-out !important; +} +@keyframes launch { + 0% { + transform: scale(.8) translate(0); + opacity: 0; + } + 5% { + transform: scale(.8) translate(0); + opacity: 1; + } + 50% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(.8) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(.8) translate(0); + opacity: 1; + } +} +@keyframes launch-detailed { + 0% { + transform: scale(1) translate(0); + opacity: 0; + } + 5% { + transform: scale(1) translate(0); + opacity: 1; + } + 50% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(1) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(1) translate(0); + opacity: 1; + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; diff --git a/TangerineUI.css b/TangerineUI.css index e093448..4639ba1 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -65,11 +65,10 @@ --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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23f76902' stroke='%23f76902' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23f76902; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23F91880; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-5.19,3.92c1.104,-0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,-0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2Z' style='fill-rule:nonzero;'/%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='%23F91880' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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"); @@ -99,7 +98,7 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ba7c' 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'); @@ -123,14 +122,8 @@ --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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23e68933' stroke='%23e68933' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-boost: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23e68933; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23e68933'%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"); @@ -157,7 +150,6 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -314,6 +306,7 @@ body.layout-single-column { line-height: 34px; } .layout-single-column .detailed-status__button i.fa-star:before { + background-size: 75%; background-image: var(--icon-star-accent); } .layout-single-column button.icon-button.active i.fa-star:before, @@ -336,12 +329,13 @@ body.layout-single-column { background-image: var(--icon-boost-accent); } .layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw, .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); + background-image: var(--icon-boost-active); } .layout-single-column .detailed-status__link .fa.fa-retweet:before { background-image: var(--icon-boost); @@ -1055,11 +1049,6 @@ body.layout-single-column { 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; @@ -1115,6 +1104,67 @@ body.layout-single-column { transform: scale(1); } } +.layout-single-column .status__action-bar .icon-button.reblogPrivate>.fa-retweet { + opacity: 1; +} +.layout-single-column .status__action-bar .icon-button.active>.fa-retweet { + animation: launch 1.2s ease-in !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa-retweet { + animation: launch-detailed 1.2s ease-out !important; +} +@keyframes launch { + 0% { + transform: scale(.8) translate(0); + opacity: 0; + } + 5% { + transform: scale(.8) translate(0); + opacity: 1; + } + 50% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(.8) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(.8) translate(0); + opacity: 1; + } +} +@keyframes launch-detailed { + 0% { + transform: scale(1) translate(0); + opacity: 0; + } + 5% { + transform: scale(1) translate(0); + opacity: 1; + } + 50% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(1) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(1) translate(0); + opacity: 1; + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 47f1f32..20bd8eb 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -65,11 +65,10 @@ --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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236364ff' stroke='%236364ff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%236364ff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23F91880; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-5.19,3.92c1.104,-0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,-0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2Z' style='fill-rule:nonzero;'/%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='%23F91880' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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"); @@ -98,8 +97,8 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236364ff" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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-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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); + --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ba7c' 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'); @@ -123,14 +122,8 @@ --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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%236b6cfb' stroke='%236b6cfb' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-boost: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%236b6cfb; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%236b6cfb' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%236b6cfb'%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"); @@ -157,7 +150,6 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b6cfb" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -314,6 +306,7 @@ body.layout-single-column { line-height: 34px; } .layout-single-column .detailed-status__button i.fa-star:before { + background-size: 75%; background-image: var(--icon-star-accent); } .layout-single-column button.icon-button.active i.fa-star:before, @@ -336,12 +329,13 @@ body.layout-single-column { background-image: var(--icon-boost-accent); } .layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw, .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); + background-image: var(--icon-boost-active); } .layout-single-column .detailed-status__link .fa.fa-retweet:before { background-image: var(--icon-boost); @@ -1055,11 +1049,6 @@ body.layout-single-column { 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; @@ -1115,6 +1104,67 @@ body.layout-single-column { transform: scale(1); } } +.layout-single-column .status__action-bar .icon-button.reblogPrivate>.fa-retweet { + opacity: 1; +} +.layout-single-column .status__action-bar .icon-button.active>.fa-retweet { + animation: launch 1.2s ease-in !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa-retweet { + animation: launch-detailed 1.2s ease-out !important; +} +@keyframes launch { + 0% { + transform: scale(.8) translate(0); + opacity: 0; + } + 5% { + transform: scale(.8) translate(0); + opacity: 1; + } + 50% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(.8) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(.8) translate(0); + opacity: 1; + } +} +@keyframes launch-detailed { + 0% { + transform: scale(1) translate(0); + opacity: 0; + } + 5% { + transform: scale(1) translate(0); + opacity: 1; + } + 50% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(1) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(1) translate(0); + opacity: 1; + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index e093448..4639ba1 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -65,11 +65,10 @@ --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%20fill='%23282C37' stroke='%23282C37' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23f76902' stroke='%23f76902' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23282C37; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23f76902; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-active: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23F91880; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-5.19,3.92c1.104,-0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,-0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2Z' style='fill-rule:nonzero;'/%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='%23F91880' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23282C37' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E"); --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%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"); @@ -99,7 +98,7 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f76902" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300ba7c' 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'); @@ -123,14 +122,8 @@ --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%20fill='%23ffffff' stroke='%23ffffff' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%23e68933' stroke='%23e68933' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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%20fill='%2300ba7c' stroke='%2300ba7c' stroke-width='1' 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'%2F%3E%3C%2Fsvg%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-boost: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23ffffff; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); + --icon-boost-accent: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill:%23e68933; fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M20.92,2.38c-1.123,-0.251 -2.27,-0.379 -3.42,-0.38c-2.194,-0.139 -4.355,0.603 -6,2.06c-1.073,1.073 -2.137,2.143 -3.19,3.21c-1.21,-0.13 -4.08,-0.2 -6,1.74c-0.385,0.387 -0.385,1.023 0,1.41c0,0 4.316,2.224 6.732,4.644c2.416,2.421 4.568,6.676 4.568,6.676c0.387,0.385 1.023,0.385 1.41,0c1.95,-2 1.89,-4.82 1.77,-6l3.21,-3.2c3.19,-3.19 1.74,-9.18 1.68,-9.43c-0.094,-0.367 -0.389,-0.651 -0.76,-0.73Zm-2.36,8.75l-3.56,3.54c-0.234,0.236 -0.335,0.574 -0.27,0.9c0.216,1.338 0.028,2.71 -0.54,3.94c-0,0 -1.589,-3.692 -3.758,-5.865c-2.168,-2.174 -5.912,-3.825 -5.912,-3.825c1.25,-0.575 2.647,-0.75 4,-0.5c0.325,0.042 0.65,-0.077 0.87,-0.32c0.22,-0.243 1.4,-1.45 3.51,-3.56c1.297,-1.042 2.941,-1.556 4.6,-1.44c0.781,0.004 1.56,0.071 2.33,0.2c0.24,1.43 0.62,5.04 -1.27,6.93Z' style='fill-rule:nonzero;'/%3E%3Ccircle cx='15.73' cy='8.3' r='2'/%3E%3Cpath d='M5.882,15.269c1.569,0.009 2.835,1.296 2.825,2.87c-0.009,1.575 -1.406,2.242 -2.859,2.837c-0.951,0.389 -3.182,1.371 -3.688,0.885c-0.545,-0.523 0.454,-2.869 0.863,-3.755c0.66,-1.429 1.291,-2.846 2.859,-2.837Z'/%3E%3C/svg%3E"); --icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffffff' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23ffffff'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --icon-reply-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23e68933' aria-hidden='true'%3E%3Cg stroke-width='1' stroke='%23e68933'%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"); @@ -157,7 +150,6 @@ --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.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); --icon-bookmark-accent: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e68933" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E'); - --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%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'); @@ -314,6 +306,7 @@ body.layout-single-column { line-height: 34px; } .layout-single-column .detailed-status__button i.fa-star:before { + background-size: 75%; background-image: var(--icon-star-accent); } .layout-single-column button.icon-button.active i.fa-star:before, @@ -336,12 +329,13 @@ body.layout-single-column { background-image: var(--icon-boost-accent); } .layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, +.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw, .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); + background-image: var(--icon-boost-active); } .layout-single-column .detailed-status__link .fa.fa-retweet:before { background-image: var(--icon-boost); @@ -1055,11 +1049,6 @@ body.layout-single-column { 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; @@ -1115,6 +1104,67 @@ body.layout-single-column { transform: scale(1); } } +.layout-single-column .status__action-bar .icon-button.reblogPrivate>.fa-retweet { + opacity: 1; +} +.layout-single-column .status__action-bar .icon-button.active>.fa-retweet { + animation: launch 1.2s ease-in !important; +} +.layout-single-column .detailed-status__action-bar .icon-button.active>.fa-retweet { + animation: launch-detailed 1.2s ease-out !important; +} +@keyframes launch { + 0% { + transform: scale(.8) translate(0); + opacity: 0; + } + 5% { + transform: scale(.8) translate(0); + opacity: 1; + } + 50% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(.8) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(.8) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(.8) translate(0); + opacity: 1; + } +} +@keyframes launch-detailed { + 0% { + transform: scale(1) translate(0); + opacity: 0; + } + 5% { + transform: scale(1) translate(0); + opacity: 1; + } + 50% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 80% { + transform: scale(1) translate(150%, -150%); + opacity: 0; + } + 85% { + transform: scale(1) translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: scale(1) translate(0); + opacity: 1; + } +} .layout-single-column .status__action-bar .icon-button, .layout-single-column .detailed-status__action-bar .icon-button { min-width: 32px !important; From 4dfe5e859a639ab11954e9f7d15fef33abd7b17b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 22:20:21 +0200 Subject: [PATCH 18/24] Fixed launch angle --- TangerineUI-purple.css | 4 ++-- TangerineUI.css | 4 ++-- .../styles/tangerineui-purple/layout-single-column.scss | 4 ++-- .../javascript/styles/tangerineui/layout-single-column.scss | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 20bd8eb..43efe29 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1123,11 +1123,11 @@ body.layout-single-column { opacity: 1; } 50% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 80% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 85% { diff --git a/TangerineUI.css b/TangerineUI.css index 4639ba1..29f676d 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1123,11 +1123,11 @@ body.layout-single-column { opacity: 1; } 50% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 80% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 85% { diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 20bd8eb..43efe29 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1123,11 +1123,11 @@ body.layout-single-column { opacity: 1; } 50% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 80% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 85% { diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 4639ba1..29f676d 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1123,11 +1123,11 @@ body.layout-single-column { opacity: 1; } 50% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 80% { - transform: scale(.8) translate(150%, -150%); + transform: scale(.8) translate(200%, -150%); opacity: 0; } 85% { From 105bd038201623f4fe5f5aa7a1eda0f4e4a01f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 22:59:38 +0200 Subject: [PATCH 19/24] Changed status prepend weight to highlight user name --- TangerineUI-purple.css | 1 - TangerineUI.css | 1 - .../styles/tangerineui-purple/layout-single-column.scss | 1 - .../app/javascript/styles/tangerineui/layout-single-column.scss | 1 - 4 files changed, 4 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 43efe29..e764d2b 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1190,7 +1190,6 @@ body.layout-single-column { color: #ffb609; } .layout-single-column .status__prepend { - font-weight: bold; padding-top: 2px; padding-left: 0; padding-right: 0; diff --git a/TangerineUI.css b/TangerineUI.css index 29f676d..e3c6040 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1190,7 +1190,6 @@ body.layout-single-column { color: #ffb609; } .layout-single-column .status__prepend { - font-weight: bold; padding-top: 2px; padding-left: 0; padding-right: 0; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 43efe29..e764d2b 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -1190,7 +1190,6 @@ body.layout-single-column { color: #ffb609; } .layout-single-column .status__prepend { - font-weight: bold; padding-top: 2px; padding-left: 0; padding-right: 0; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 29f676d..e3c6040 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -1190,7 +1190,6 @@ body.layout-single-column { color: #ffb609; } .layout-single-column .status__prepend { - font-weight: bold; padding-top: 2px; padding-left: 0; padding-right: 0; From 9c8f45172d65dff5ca70a15b9c9b9c89a0d08d43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 30 Jul 2023 23:57:48 +0200 Subject: [PATCH 20/24] Fixed Language picker --- TangerineUI-purple.css | 39 +++++++++++++++++++ TangerineUI.css | 39 +++++++++++++++++++ .../layout-single-column.scss | 39 +++++++++++++++++++ .../tangerineui/layout-single-column.scss | 39 +++++++++++++++++++ 4 files changed, 156 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e764d2b..f905074 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + background-color: var(--color-content-bg); + border-radius: 8px; + border: 1px solid var(--color-lines); + box-shadow: 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/TangerineUI.css b/TangerineUI.css index e3c6040..3e71102 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + background-color: var(--color-content-bg); + border-radius: 8px; + border: 1px solid var(--color-lines); + box-shadow: 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index e764d2b..f905074 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + background-color: var(--color-content-bg); + border-radius: 8px; + border: 1px solid var(--color-lines); + box-shadow: 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index e3c6040..3e71102 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2700,9 +2700,48 @@ body.layout-single-column { background-color: var(--color-accent-bg); color: var(--color-accent); } +.layout-single-column .language-dropdown__dropdown { + background-color: var(--color-content-bg); + border-radius: 8px; + border: 1px solid var(--color-lines); + box-shadow: 0 0 5px rgba(0, 0, 0, .15); +} +.layout-single-column .language-dropdown__dropdown__results__item { + border-radius: 8px; +} .layout-single-column .language-dropdown__dropdown__results__item.active, .layout-single-column .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .language-dropdown__dropdown__results__item:hover { + background-color: var(--color-accent-bg); +} +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + font-weight: bold; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name { + opacity: .7; +} +.layout-single-column .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item__native-name { + color: var(--color-content-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item.active:hover .language-dropdown__dropdown__results__item__native-name { + color: var(--color-accent-fg); +} +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__native-name, +.layout-single-column .language-dropdown__dropdown__results__item:active .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, +.layout-single-column .language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name { + color: var(--color-accent); } .layout-single-column .button:not(.button-secondary):active, .layout-single-column .button:not(.button-secondary):focus, From c62b0360ff56d3fae7573d432620b2a64ab8b052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 31 Jul 2023 00:08:14 +0200 Subject: [PATCH 21/24] Added support for moderation reports in notifications tab --- TangerineUI-purple.css | 13 +++++++++++++ TangerineUI.css | 13 +++++++++++++ .../tangerineui-purple/layout-single-column.scss | 13 +++++++++++++ .../styles/tangerineui/layout-single-column.scss | 13 +++++++++++++ 4 files changed, 52 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index f905074..77861b2 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2461,6 +2461,15 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__report { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-top: 10px; + gap: 15px; +} +.layout-single-column .notification__report__details { + color: var(--color-content-fg); +} @media screen and (min-width:889px) { .layout-single-column .notification__message { border-left: 1px solid var(--color-lines); @@ -2471,6 +2480,10 @@ body.layout-single-column { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .layout-single-column .notification__report { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } } .layout-single-column .notification__message .fa { color: var(--color-accent); diff --git a/TangerineUI.css b/TangerineUI.css index 3e71102..9263c93 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2461,6 +2461,15 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__report { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-top: 10px; + gap: 15px; +} +.layout-single-column .notification__report__details { + color: var(--color-content-fg); +} @media screen and (min-width:889px) { .layout-single-column .notification__message { border-left: 1px solid var(--color-lines); @@ -2471,6 +2480,10 @@ body.layout-single-column { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .layout-single-column .notification__report { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } } .layout-single-column .notification__message .fa { color: var(--color-accent); diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index f905074..77861b2 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2461,6 +2461,15 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__report { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-top: 10px; + gap: 15px; +} +.layout-single-column .notification__report__details { + color: var(--color-content-fg); +} @media screen and (min-width:889px) { .layout-single-column .notification__message { border-left: 1px solid var(--color-lines); @@ -2471,6 +2480,10 @@ body.layout-single-column { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .layout-single-column .notification__report { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } } .layout-single-column .notification__message .fa { color: var(--color-accent); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 3e71102..9263c93 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2461,6 +2461,15 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__report { + background-color: var(--color-content-bg); + border-bottom: 0; + padding-top: 10px; + gap: 15px; +} +.layout-single-column .notification__report__details { + color: var(--color-content-fg); +} @media screen and (min-width:889px) { .layout-single-column .notification__message { border-left: 1px solid var(--color-lines); @@ -2471,6 +2480,10 @@ body.layout-single-column { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .layout-single-column .notification__report { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + } } .layout-single-column .notification__message .fa { color: var(--color-accent); From 6f41fb295ee46e91ae8530e5f7aa0510315ff88c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 31 Jul 2023 00:46:04 +0200 Subject: [PATCH 22/24] Zoom on emojis on hover --- TangerineUI-purple.css | 17 +++++++++++++++++ TangerineUI.css | 17 +++++++++++++++++ .../layout-single-column.scss | 17 +++++++++++++++++ .../tangerineui/layout-single-column.scss | 17 +++++++++++++++++ 4 files changed, 68 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 77861b2..a275a9a 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -735,6 +735,20 @@ body.layout-single-column { +/* Zoom on emojis on hover (in post content only */ +.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */ + overflow: visible; +} +.layout-single-column .status__content .emojione { + transition: transform .8s .8s; +} +.layout-single-column .status__content .emojione:hover { + transform: scale(2.5); +} + + + + /* πŸ’¬ Posts -------- */ .layout-single-column .reply-indicator__content, @@ -1204,6 +1218,9 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } +.layout-single-column .status__prepend .muted .emojione { + opacity: 1; +} .layout-single-column .status-card, .layout-single-column .status-card.compact { background-color: var(--color-content-secondary-bg); diff --git a/TangerineUI.css b/TangerineUI.css index 9263c93..e3002fb 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -735,6 +735,20 @@ body.layout-single-column { +/* Zoom on emojis on hover (in post content only */ +.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */ + overflow: visible; +} +.layout-single-column .status__content .emojione { + transition: transform .8s .8s; +} +.layout-single-column .status__content .emojione:hover { + transform: scale(2.5); +} + + + + /* πŸ’¬ Posts -------- */ .layout-single-column .reply-indicator__content, @@ -1204,6 +1218,9 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } +.layout-single-column .status__prepend .muted .emojione { + opacity: 1; +} .layout-single-column .status-card, .layout-single-column .status-card.compact { background-color: var(--color-content-secondary-bg); diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 77861b2..a275a9a 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -735,6 +735,20 @@ body.layout-single-column { +/* Zoom on emojis on hover (in post content only */ +.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */ + overflow: visible; +} +.layout-single-column .status__content .emojione { + transition: transform .8s .8s; +} +.layout-single-column .status__content .emojione:hover { + transform: scale(2.5); +} + + + + /* πŸ’¬ Posts -------- */ .layout-single-column .reply-indicator__content, @@ -1204,6 +1218,9 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } +.layout-single-column .status__prepend .muted .emojione { + opacity: 1; +} .layout-single-column .status-card, .layout-single-column .status-card.compact { background-color: var(--color-content-secondary-bg); diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 9263c93..e3002fb 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -735,6 +735,20 @@ body.layout-single-column { +/* Zoom on emojis on hover (in post content only */ +.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */ + overflow: visible; +} +.layout-single-column .status__content .emojione { + transition: transform .8s .8s; +} +.layout-single-column .status__content .emojione:hover { + transform: scale(2.5); +} + + + + /* πŸ’¬ Posts -------- */ .layout-single-column .reply-indicator__content, @@ -1204,6 +1218,9 @@ body.layout-single-column { .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } +.layout-single-column .status__prepend .muted .emojione { + opacity: 1; +} .layout-single-column .status-card, .layout-single-column .status-card.compact { background-color: var(--color-content-secondary-bg); From b3521e5033fe98a574c7d50ed8a0166d00c92aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 31 Jul 2023 02:06:19 +0200 Subject: [PATCH 23/24] Adjusted notification icon alignment --- TangerineUI-purple.css | 5 +++++ TangerineUI.css | 5 +++++ .../styles/tangerineui-purple/layout-single-column.scss | 5 +++++ .../javascript/styles/tangerineui/layout-single-column.scss | 5 +++++ 4 files changed, 20 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index a275a9a..31bba94 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2509,6 +2509,11 @@ body.layout-single-column { width: 56px; text-align: right; } +@media screen and (max-width:889px) { + .layout-single-column .notification__favourite-icon-wrapper { + width: 51px; + } +} .layout-single-column .notification__favourite-icon-wrapper i.fa-star { font-size: 15px; } diff --git a/TangerineUI.css b/TangerineUI.css index e3002fb..5173a23 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2509,6 +2509,11 @@ body.layout-single-column { width: 56px; text-align: right; } +@media screen and (max-width:889px) { + .layout-single-column .notification__favourite-icon-wrapper { + width: 51px; + } +} .layout-single-column .notification__favourite-icon-wrapper i.fa-star { font-size: 15px; } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index a275a9a..31bba94 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2509,6 +2509,11 @@ body.layout-single-column { width: 56px; text-align: right; } +@media screen and (max-width:889px) { + .layout-single-column .notification__favourite-icon-wrapper { + width: 51px; + } +} .layout-single-column .notification__favourite-icon-wrapper i.fa-star { font-size: 15px; } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index e3002fb..5173a23 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2509,6 +2509,11 @@ body.layout-single-column { width: 56px; text-align: right; } +@media screen and (max-width:889px) { + .layout-single-column .notification__favourite-icon-wrapper { + width: 51px; + } +} .layout-single-column .notification__favourite-icon-wrapper i.fa-star { font-size: 15px; } From de5a5c8fcfe683f1e22c9d802ada5cf948123f7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 31 Jul 2023 02:13:55 +0200 Subject: [PATCH 24/24] Bold display name in Notifications tab --- TangerineUI-purple.css | 3 +++ TangerineUI.css | 3 +++ .../styles/tangerineui-purple/layout-single-column.scss | 3 +++ .../javascript/styles/tangerineui/layout-single-column.scss | 3 +++ 4 files changed, 12 insertions(+) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 31bba94..bd1b227 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -2478,6 +2478,9 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__display-name { + font-weight: bold; +} .layout-single-column .notification__report { background-color: var(--color-content-bg); border-bottom: 0; diff --git a/TangerineUI.css b/TangerineUI.css index 5173a23..dc0e89b 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -2478,6 +2478,9 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__display-name { + font-weight: bold; +} .layout-single-column .notification__report { background-color: var(--color-content-bg); border-bottom: 0; diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 31bba94..bd1b227 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -2478,6 +2478,9 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__display-name { + font-weight: bold; +} .layout-single-column .notification__report { background-color: var(--color-content-bg); border-bottom: 0; diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 5173a23..dc0e89b 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -2478,6 +2478,9 @@ body.layout-single-column { .layout-single-column .scrollable > div > article:first-child .notification__message { border-top: 1px solid var(--color-lines); } +.layout-single-column .notification__display-name { + font-weight: bold; +} .layout-single-column .notification__report { background-color: var(--color-content-bg); border-bottom: 0;