diff --git a/CHANGELOG.md b/CHANGELOG.md
index b17dcdeef..b1aebda19 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,90 @@ Changelog
All notable changes to this project will be documented in this file.
+## [4.1.6] - 2023-07-28
+
+### Fixed
+
+- Fix memory leak in streaming server ([ThisIsMissEm](https://github.com/mastodon/mastodon/pull/26228))
+- Fix wrong filters sometimes applying in streaming ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/26159), [ThisIsMissEm](https://github.com/mastodon/mastodon/pull/26213), [renchap](https://github.com/mastodon/mastodon/pull/26233))
+- Fix incorrect connect timeout in outgoing requests ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/26116))
+
+## [4.1.5] - 2023-07-21
+
+### Added
+
+- Add check preventing Sidekiq workers from running with Makara configured ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25850))
+
+### Changed
+
+- Change request timeout handling to use a longer deadline ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/26055))
+
+### Fixed
+
+- Fix moderation interface for remote instances with a .zip TLD ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25886))
+- Fix remote accounts being possibly persisted to database with incomplete protocol values ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25886))
+- Fix trending publishers table not rendering correctly on narrow screens ([vmstan](https://github.com/mastodon/mastodon/pull/25945))
+
+### Security
+
+- Fix CSP headers being unintentionally wide ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/26105))
+
+## [4.1.4] - 2023-07-07
+
+### Fixed
+
+- Fix branding:generate_app_icons failing because of disallowed ICO coder ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25794))
+- Fix crash in admin interface when viewing a remote user with verified links ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25796))
+- Fix processing of media files with unusual names ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25788))
+
+## [4.1.3] - 2023-07-06
+
+### Added
+
+- Add fallback redirection when getting a webfinger query `LOCAL_DOMAIN@LOCAL_DOMAIN` ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/23600))
+
+### Changed
+
+- Change OpenGraph-based embeds to allow fullscreen ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25058))
+- Change AccessTokensVacuum to also delete expired tokens ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24868))
+- Change profile updates to be sent to recently-mentioned servers ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24852))
+- Change automatic post deletion thresholds and load detection ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24614))
+- Change `/api/v1/statuses/:id/history` to always return at least one item ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25510))
+- Change auto-linking to allow carets in URL query params ([renchap](https://github.com/mastodon/mastodon/pull/25216))
+
+### Removed
+
+- Remove invalid `X-Frame-Options: ALLOWALL` ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25070))
+
+### Fixed
+
+- Fix wrong view being displayed when a webhook fails validation ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25464))
+- Fix soft-deleted post cleanup scheduler overwhelming the streaming server ([ThisIsMissEm](https://github.com/mastodon/mastodon/pull/25519))
+- Fix incorrect pagination headers in `/api/v2/admin/accounts` ([danielmbrasil](https://github.com/mastodon/mastodon/pull/25477))
+- Fix multiple inefficiencies in automatic post cleanup worker ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24607), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/24785), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/24840))
+- Fix performance of streaming by parsing message JSON once ([ThisIsMissEm](https://github.com/mastodon/mastodon/pull/25278), [ThisIsMissEm](https://github.com/mastodon/mastodon/pull/25361))
+- Fix CSP headers when `S3_ALIAS_HOST` includes a path component ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25273))
+- Fix `tootctl accounts approve --number N` not approving N earliest registrations ([danielmbrasil](https://github.com/mastodon/mastodon/pull/24605))
+- Fix reports not being closed when performing batch suspensions ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24988))
+- Fix being able to vote on your own polls ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25015))
+- Fix race condition when reblogging a status ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25016))
+- Fix “Authorized applications” inefficiently and incorrectly getting last use date ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25060))
+- Fix “Authorized applications” crashing when listing apps with certain admin API scopes ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25713))
+- Fix multiple N+1s in ConversationsController ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25134), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/25399), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/25499))
+- Fix user archive takeouts when using OpenStack Swift ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24431))
+- Fix searching for remote content by URL not working under certain conditions ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25637))
+- Fix inefficiencies in indexing content for search ([VyrCossont](https://github.com/mastodon/mastodon/pull/24285), [VyrCossont](https://github.com/mastodon/mastodon/pull/24342))
+
+### Security
+
+- Add finer permission requirements for managing webhooks ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25463))
+- Update dependencies
+- Add hardening headers for user-uploaded files ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25756))
+- Fix verified links possibly hiding important parts of the URL (CVE-2023-36462)
+- Fix timeout handling of outbound HTTP requests (CVE-2023-36461)
+- Fix arbitrary file creation through media processing (CVE-2023-36460)
+- Fix possible XSS in preview cards (CVE-2023-36459)
+
## [4.1.2] - 2023-04-04
### Fixed
diff --git a/Containerfile b/Containerfile
new file mode 100644
index 000000000..cac82ae2a
--- /dev/null
+++ b/Containerfile
@@ -0,0 +1,99 @@
+# syntax=docker/dockerfile:1.4
+# This needs to be bullseye-slim because the Ruby image is built on bullseye-slim
+ARG NODE_VERSION="16.18.1-bullseye-slim"
+
+FROM ghcr.io/moritzheiber/ruby-jemalloc:3.0.6-slim as ruby
+FROM node:${NODE_VERSION} as build
+
+COPY --from=ruby /opt/ruby /opt/ruby
+
+ENV DEBIAN_FRONTEND="noninteractive" \
+ PATH="${PATH}:/opt/ruby/bin"
+
+#SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+
+WORKDIR /opt/mastodon
+COPY Gemfile* package.json yarn.lock /opt/mastodon/
+
+# hadolint ignore=DL3008
+RUN apt-get update && \
+ apt-get install -y --no-install-recommends build-essential \
+ ca-certificates \
+ git \
+ libicu-dev \
+ libidn11-dev \
+ libpq-dev \
+ libjemalloc-dev \
+ zlib1g-dev \
+ libgdbm-dev \
+ libgmp-dev \
+ libssl-dev \
+ libyaml-0-2 \
+ ca-certificates \
+ libreadline8 \
+ python3 \
+ shared-mime-info && \
+ bundle config set --local deployment 'true' && \
+ bundle config set --local without 'development test' && \
+ bundle config set silence_root_warning true && \
+ bundle install -j"$(nproc)" && \
+ yarn install --pure-lockfile --network-timeout 600000
+
+FROM node:${NODE_VERSION}
+
+ARG UID="991"
+ARG GID="991"
+
+COPY --from=ruby /opt/ruby /opt/ruby
+
+#SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+
+ENV DEBIAN_FRONTEND="noninteractive" \
+ PATH="${PATH}:/opt/ruby/bin:/opt/mastodon/bin"
+
+# Ignoreing these here since we don't want to pin any versions and the Debian image removes apt-get content after use
+# hadolint ignore=DL3008,DL3009
+RUN apt-get update && \
+ echo "Etc/UTC" > /etc/localtime && \
+ groupadd -g "${GID}" mastodon && \
+ useradd -l -u "$UID" -g "${GID}" -m -d /opt/mastodon mastodon && \
+ apt-get -y --no-install-recommends install whois \
+ wget \
+ procps \
+ libssl1.1 \
+ libpq5 \
+ imagemagick \
+ ffmpeg \
+ libjemalloc2 \
+ libicu67 \
+ libidn11 \
+ libyaml-0-2 \
+ file \
+ ca-certificates \
+ tzdata \
+ libreadline8 \
+ tini && \
+ ln -s /opt/mastodon /mastodon
+
+# Note: no, cleaning here since Debian does this automatically
+# See the file /etc/apt/apt.conf.d/docker-clean within the Docker image's filesystem
+
+COPY --chown=mastodon:mastodon . /opt/mastodon
+COPY --chown=mastodon:mastodon --from=build /opt/mastodon /opt/mastodon
+
+ENV RAILS_ENV="production" \
+ NODE_ENV="production" \
+ RAILS_SERVE_STATIC_FILES="true" \
+ BIND="0.0.0.0"
+
+# Set the run user
+USER mastodon
+WORKDIR /opt/mastodon
+
+# Precompile assets
+RUN OTP_SECRET=precompile_placeholder SECRET_KEY_BASE=precompile_placeholder rails assets:precompile && \
+ yarn cache clean
+
+# Set the work dir and the container entry point
+ENTRYPOINT ["/usr/bin/tini", "--"]
+EXPOSE 3000 4000
diff --git a/Gemfile.lock b/Gemfile.lock
index 2d7ee2df8..2fd88754c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -10,40 +10,40 @@ GIT
GEM
remote: https://rubygems.org/
specs:
- actioncable (6.1.7.2)
- actionpack (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ actioncable (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
nio4r (~> 2.0)
websocket-driver (>= 0.6.1)
- actionmailbox (6.1.7.2)
- actionpack (= 6.1.7.2)
- activejob (= 6.1.7.2)
- activerecord (= 6.1.7.2)
- activestorage (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ actionmailbox (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ activejob (= 6.1.7.4)
+ activerecord (= 6.1.7.4)
+ activestorage (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
mail (>= 2.7.1)
- actionmailer (6.1.7.2)
- actionpack (= 6.1.7.2)
- actionview (= 6.1.7.2)
- activejob (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ actionmailer (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ actionview (= 6.1.7.4)
+ activejob (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
mail (~> 2.5, >= 2.5.4)
rails-dom-testing (~> 2.0)
- actionpack (6.1.7.2)
- actionview (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ actionpack (6.1.7.4)
+ actionview (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
rack (~> 2.0, >= 2.0.9)
rack-test (>= 0.6.3)
rails-dom-testing (~> 2.0)
rails-html-sanitizer (~> 1.0, >= 1.2.0)
- actiontext (6.1.7.2)
- actionpack (= 6.1.7.2)
- activerecord (= 6.1.7.2)
- activestorage (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ actiontext (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ activerecord (= 6.1.7.4)
+ activestorage (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
nokogiri (>= 1.8.5)
- actionview (6.1.7.2)
- activesupport (= 6.1.7.2)
+ actionview (6.1.7.4)
+ activesupport (= 6.1.7.4)
builder (~> 3.1)
erubi (~> 1.4)
rails-dom-testing (~> 2.0)
@@ -54,22 +54,22 @@ GEM
case_transform (>= 0.2)
jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
active_record_query_trace (1.8)
- activejob (6.1.7.2)
- activesupport (= 6.1.7.2)
+ activejob (6.1.7.4)
+ activesupport (= 6.1.7.4)
globalid (>= 0.3.6)
- activemodel (6.1.7.2)
- activesupport (= 6.1.7.2)
- activerecord (6.1.7.2)
- activemodel (= 6.1.7.2)
- activesupport (= 6.1.7.2)
- activestorage (6.1.7.2)
- actionpack (= 6.1.7.2)
- activejob (= 6.1.7.2)
- activerecord (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ activemodel (6.1.7.4)
+ activesupport (= 6.1.7.4)
+ activerecord (6.1.7.4)
+ activemodel (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
+ activestorage (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ activejob (= 6.1.7.4)
+ activerecord (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
marcel (~> 1.0)
mini_mime (>= 1.1.0)
- activesupport (6.1.7.2)
+ activesupport (6.1.7.4)
concurrent-ruby (~> 1.0, >= 1.0.2)
i18n (>= 1.6, < 2)
minitest (>= 5.1)
@@ -173,7 +173,7 @@ GEM
cocoon (1.2.15)
coderay (1.1.3)
color_diff (0.1)
- concurrent-ruby (1.2.0)
+ concurrent-ruby (1.2.2)
connection_pool (2.3.0)
cose (1.2.1)
cbor (~> 0.5.9)
@@ -206,7 +206,7 @@ GEM
docile (1.4.0)
domain_name (0.5.20190701)
unf (>= 0.0.5, < 1.0.0)
- doorkeeper (5.6.4)
+ doorkeeper (5.6.6)
railties (>= 5)
dotenv (2.8.1)
dotenv-rails (2.8.1)
@@ -388,7 +388,7 @@ GEM
loofah (2.19.1)
crass (~> 1.0.2)
nokogiri (>= 1.5.9)
- mail (2.8.0.1)
+ mail (2.8.1)
mini_mime (>= 0.1.1)
net-imap
net-pop
@@ -405,12 +405,12 @@ GEM
mime-types-data (~> 3.2015)
mime-types-data (3.2022.0105)
mini_mime (1.1.2)
- mini_portile2 (2.8.1)
+ mini_portile2 (2.8.2)
minitest (5.17.0)
msgpack (1.6.0)
multi_json (1.15.0)
multipart-post (2.1.1)
- net-imap (0.3.4)
+ net-imap (0.3.6)
date
net-protocol
net-ldap (0.17.1)
@@ -423,8 +423,8 @@ GEM
net-smtp (0.3.3)
net-protocol
net-ssh (7.0.1)
- nio4r (2.5.8)
- nokogiri (1.14.1)
+ nio4r (2.5.9)
+ nokogiri (1.14.5)
mini_portile2 (~> 2.8.0)
racc (~> 1.4)
nsa (0.2.8)
@@ -497,7 +497,7 @@ GEM
activesupport (>= 3.0.0)
raabro (1.4.0)
racc (1.6.2)
- rack (2.2.6.2)
+ rack (2.2.7)
rack-attack (6.6.1)
rack (>= 1.0, < 3)
rack-cors (1.1.1)
@@ -512,20 +512,20 @@ GEM
rack
rack-test (2.0.2)
rack (>= 1.3)
- rails (6.1.7.2)
- actioncable (= 6.1.7.2)
- actionmailbox (= 6.1.7.2)
- actionmailer (= 6.1.7.2)
- actionpack (= 6.1.7.2)
- actiontext (= 6.1.7.2)
- actionview (= 6.1.7.2)
- activejob (= 6.1.7.2)
- activemodel (= 6.1.7.2)
- activerecord (= 6.1.7.2)
- activestorage (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ rails (6.1.7.4)
+ actioncable (= 6.1.7.4)
+ actionmailbox (= 6.1.7.4)
+ actionmailer (= 6.1.7.4)
+ actionpack (= 6.1.7.4)
+ actiontext (= 6.1.7.4)
+ actionview (= 6.1.7.4)
+ activejob (= 6.1.7.4)
+ activemodel (= 6.1.7.4)
+ activerecord (= 6.1.7.4)
+ activestorage (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
bundler (>= 1.15.0)
- railties (= 6.1.7.2)
+ railties (= 6.1.7.4)
sprockets-rails (>= 2.0.0)
rails-controller-testing (1.0.5)
actionpack (>= 5.0.1.rc1)
@@ -541,9 +541,9 @@ GEM
railties (>= 6.0.0, < 7)
rails-settings-cached (0.6.6)
rails (>= 4.2.0)
- railties (6.1.7.2)
- actionpack (= 6.1.7.2)
- activesupport (= 6.1.7.2)
+ railties (6.1.7.4)
+ actionpack (= 6.1.7.4)
+ activesupport (= 6.1.7.4)
method_source
rake (>= 12.2)
thor (~> 1.0)
@@ -627,7 +627,7 @@ GEM
fugit (~> 1.1, >= 1.1.6)
safety_net_attestation (0.4.0)
jwt (~> 2.0)
- sanitize (6.0.1)
+ sanitize (6.0.2)
crass (~> 1.0.2)
nokogiri (>= 1.12.0)
scenic (1.7.0)
@@ -688,9 +688,9 @@ GEM
unicode-display_width (>= 1.1.1, < 3)
terrapin (0.6.0)
climate_control (>= 0.0.3, < 1.0)
- thor (1.2.1)
+ thor (1.2.2)
tilt (2.0.11)
- timeout (0.3.1)
+ timeout (0.3.2)
tpm-key_attestation (0.11.0)
bindata (~> 2.4)
openssl (> 2.0, < 3.1)
@@ -753,7 +753,7 @@ GEM
xorcist (1.1.3)
xpath (3.2.0)
nokogiri (~> 1.8)
- zeitwerk (2.6.6)
+ zeitwerk (2.6.8)
PLATFORMS
ruby
diff --git a/app/controllers/admin/webhooks_controller.rb b/app/controllers/admin/webhooks_controller.rb
index d6fb1a4ea..76062ddf7 100644
--- a/app/controllers/admin/webhooks_controller.rb
+++ b/app/controllers/admin/webhooks_controller.rb
@@ -20,6 +20,7 @@ module Admin
authorize :webhook, :create?
@webhook = Webhook.new(resource_params)
+ @webhook.current_account = current_account
if @webhook.save
redirect_to admin_webhook_path(@webhook)
@@ -39,10 +40,12 @@ module Admin
def update
authorize @webhook, :update?
+ @webhook.current_account = current_account
+
if @webhook.update(resource_params)
redirect_to admin_webhook_path(@webhook)
else
- render :show
+ render :edit
end
end
diff --git a/app/controllers/api/v1/conversations_controller.rb b/app/controllers/api/v1/conversations_controller.rb
index 6c7583403..818ba6ebb 100644
--- a/app/controllers/api/v1/conversations_controller.rb
+++ b/app/controllers/api/v1/conversations_controller.rb
@@ -11,7 +11,7 @@ class Api::V1::ConversationsController < Api::BaseController
def index
@conversations = paginated_conversations
- render json: @conversations, each_serializer: REST::ConversationSerializer
+ render json: @conversations, each_serializer: REST::ConversationSerializer, relationships: StatusRelationshipsPresenter.new(@conversations.map(&:last_status), current_user&.account_id)
end
def read
@@ -32,6 +32,19 @@ class Api::V1::ConversationsController < Api::BaseController
def paginated_conversations
AccountConversation.where(account: current_account)
+ .includes(
+ account: :account_stat,
+ last_status: [
+ :media_attachments,
+ :preview_cards,
+ :status_stat,
+ :tags,
+ {
+ active_mentions: [account: :account_stat],
+ account: :account_stat,
+ },
+ ]
+ )
.to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
end
diff --git a/app/controllers/api/v1/statuses/histories_controller.rb b/app/controllers/api/v1/statuses/histories_controller.rb
index 7fe73a6f5..b1c19987a 100644
--- a/app/controllers/api/v1/statuses/histories_controller.rb
+++ b/app/controllers/api/v1/statuses/histories_controller.rb
@@ -7,11 +7,15 @@ class Api::V1::Statuses::HistoriesController < Api::BaseController
before_action :set_status
def show
- render json: @status.edits.includes(:account, status: [:account]), each_serializer: REST::StatusEditSerializer
+ render json: status_edits, each_serializer: REST::StatusEditSerializer
end
private
+ def status_edits
+ @status.edits.includes(:account, status: [:account]).to_a.presence || [@status.build_snapshot(at_time: @status.edited_at || @status.created_at)]
+ end
+
def set_status
@status = Status.find(params[:status_id])
authorize @status, :show?
diff --git a/app/controllers/api/v1/statuses/reblogs_controller.rb b/app/controllers/api/v1/statuses/reblogs_controller.rb
index 1be15a5a4..a4079a16d 100644
--- a/app/controllers/api/v1/statuses/reblogs_controller.rb
+++ b/app/controllers/api/v1/statuses/reblogs_controller.rb
@@ -2,6 +2,8 @@
class Api::V1::Statuses::ReblogsController < Api::BaseController
include Authorization
+ include Redisable
+ include Lockable
before_action -> { doorkeeper_authorize! :write, :'write:statuses' }
before_action :require_user!
@@ -10,7 +12,9 @@ class Api::V1::Statuses::ReblogsController < Api::BaseController
override_rate_limit_headers :create, family: :statuses
def create
- @status = ReblogService.new.call(current_account, @reblog, reblog_params)
+ with_lock("reblog:#{current_account.id}:#{@reblog.id}") do
+ @status = ReblogService.new.call(current_account, @reblog, reblog_params)
+ end
render json: @status, serializer: REST::StatusSerializer
end
diff --git a/app/controllers/api/v2/admin/accounts_controller.rb b/app/controllers/api/v2/admin/accounts_controller.rb
index b25831aa0..bc8f8b6f3 100644
--- a/app/controllers/api/v2/admin/accounts_controller.rb
+++ b/app/controllers/api/v2/admin/accounts_controller.rb
@@ -18,6 +18,14 @@ class Api::V2::Admin::AccountsController < Api::V1::Admin::AccountsController
private
+ def next_path
+ api_v2_admin_accounts_url(pagination_params(max_id: pagination_max_id)) if records_continue?
+ end
+
+ def prev_path
+ api_v2_admin_accounts_url(pagination_params(min_id: pagination_since_id)) unless @accounts.empty?
+ end
+
def filtered_accounts
AccountFilter.new(translated_filter_params).results
end
diff --git a/app/controllers/backups_controller.rb b/app/controllers/backups_controller.rb
index 0687b62c5..5891da6f6 100644
--- a/app/controllers/backups_controller.rb
+++ b/app/controllers/backups_controller.rb
@@ -13,7 +13,7 @@ class BackupsController < ApplicationController
when :s3
redirect_to @backup.dump.expiring_url(10)
when :fog
- if Paperclip::Attachment.default_options.dig(:storage, :fog_credentials, :openstack_temp_url_key).present?
+ if Paperclip::Attachment.default_options.dig(:fog_credentials, :openstack_temp_url_key).present?
redirect_to @backup.dump.expiring_url(Time.now.utc + 10)
else
redirect_to full_asset_url(@backup.dump.url)
diff --git a/app/controllers/media_controller.rb b/app/controllers/media_controller.rb
index 3cdd97f06..a90c585ac 100644
--- a/app/controllers/media_controller.rb
+++ b/app/controllers/media_controller.rb
@@ -46,6 +46,6 @@ class MediaController < ApplicationController
end
def allow_iframing
- response.headers['X-Frame-Options'] = 'ALLOWALL'
+ response.headers.delete('X-Frame-Options')
end
end
diff --git a/app/controllers/oauth/authorized_applications_controller.rb b/app/controllers/oauth/authorized_applications_controller.rb
index 45151cdd7..63afc4c06 100644
--- a/app/controllers/oauth/authorized_applications_controller.rb
+++ b/app/controllers/oauth/authorized_applications_controller.rb
@@ -8,6 +8,8 @@ class Oauth::AuthorizedApplicationsController < Doorkeeper::AuthorizedApplicatio
before_action :require_not_suspended!, only: :destroy
before_action :set_body_classes
+ before_action :set_last_used_at_by_app, only: :index, unless: -> { request.format == :json }
+
skip_before_action :require_functional!
include Localized
@@ -30,4 +32,14 @@ class Oauth::AuthorizedApplicationsController < Doorkeeper::AuthorizedApplicatio
def require_not_suspended!
forbidden if current_account.suspended?
end
+
+ def set_last_used_at_by_app
+ @last_used_at_by_app = Doorkeeper::AccessToken
+ .select('DISTINCT ON (application_id) application_id, last_used_at')
+ .where(resource_owner_id: current_resource_owner.id)
+ .where.not(last_used_at: nil)
+ .order(application_id: :desc, last_used_at: :desc)
+ .pluck(:application_id, :last_used_at)
+ .to_h
+ end
end
diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb
index 0e0783b4b..33defaa1c 100644
--- a/app/controllers/statuses_controller.rb
+++ b/app/controllers/statuses_controller.rb
@@ -43,7 +43,7 @@ class StatusesController < ApplicationController
return not_found if @status.hidden? || @status.reblog?
expires_in 180, public: true
- response.headers['X-Frame-Options'] = 'ALLOWALL'
+ response.headers.delete('X-Frame-Options')
render layout: 'embedded'
end
diff --git a/app/controllers/well_known/webfinger_controller.rb b/app/controllers/well_known/webfinger_controller.rb
index 2b296ea3b..f83a62a1f 100644
--- a/app/controllers/well_known/webfinger_controller.rb
+++ b/app/controllers/well_known/webfinger_controller.rb
@@ -18,7 +18,14 @@ module WellKnown
private
def set_account
- @account = Account.find_local!(username_from_resource)
+ username = username_from_resource
+ @account = begin
+ if username == Rails.configuration.x.local_domain
+ Account.representative
+ else
+ Account.find_local!(username)
+ end
+ end
end
def username_from_resource
diff --git a/app/helpers/formatting_helper.rb b/app/helpers/formatting_helper.rb
index c70931489..ce87c3524 100644
--- a/app/helpers/formatting_helper.rb
+++ b/app/helpers/formatting_helper.rb
@@ -58,6 +58,10 @@ module FormattingHelper
end
def account_field_value_format(field, with_rel_me: true)
- html_aware_format(field.value, field.account.local?, with_rel_me: with_rel_me, with_domains: true, multiline: false)
+ if field.verified? && !field.account.local?
+ TextFormatter.shortened_link(field.value_for_verification)
+ else
+ html_aware_format(field.value, field.account.local?, with_rel_me: with_rel_me, with_domains: true, multiline: false)
+ end
end
end
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index e641d59f4..9b6f84fa1 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -90,7 +90,7 @@ class ComposeForm extends ImmutablePureComponent {
const fulltext = this.getFulltextForCharacterCounting();
const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
- return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia));
+ return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 5000 || (isOnlyWhitespace && !anyMedia));
};
handleSubmit = (e) => {
@@ -280,7 +280,7 @@ class ComposeForm extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/styles/elephant-contrast.scss b/app/javascript/styles/elephant-contrast.scss
new file mode 100644
index 000000000..5285e07fa
--- /dev/null
+++ b/app/javascript/styles/elephant-contrast.scss
@@ -0,0 +1,6 @@
+@import 'contrast/variables';
+@import 'application';
+@import 'contrast/diff';
+@import 'elephant/layout-single-column.scss';
+@import 'elephant/layout-multiple-columns.scss';
+@import 'gh/elephant-mods.scss';
diff --git a/app/javascript/styles/elephant-light.scss b/app/javascript/styles/elephant-light.scss
new file mode 100644
index 000000000..f72d3b506
--- /dev/null
+++ b/app/javascript/styles/elephant-light.scss
@@ -0,0 +1,6 @@
+@import 'mastodon-light/variables';
+@import 'application';
+@import 'mastodon-light/diff';
+@import 'elephant/layout-single-column.scss';
+@import 'elephant/layout-multiple-columns.scss';
+@import 'gh/elephant-mods.scss';
diff --git a/app/javascript/styles/elephant.scss b/app/javascript/styles/elephant.scss
new file mode 100644
index 000000000..d416c9842
--- /dev/null
+++ b/app/javascript/styles/elephant.scss
@@ -0,0 +1,4 @@
+@import 'application';
+@import 'elephant/layout-single-column.scss';
+@import 'elephant/layout-multiple-columns.scss';
+@import 'gh/elephant-mods.scss';
diff --git a/app/javascript/styles/elephant/layout-multiple-columns.scss b/app/javascript/styles/elephant/layout-multiple-columns.scss
new file mode 100644
index 000000000..1895c6389
--- /dev/null
+++ b/app/javascript/styles/elephant/layout-multiple-columns.scss
@@ -0,0 +1,4228 @@
+/* Mastodon Bird UI by @rolle@mementomori.social
+ 1.6.4 */
+
+/* CSS variables */
+:root {
+ /* Brand colors */
+ --color-brand-twitter: #1d9bf0;
+ --color-brand-twitter-bg: #15202b;
+ --color-brand-twitter-dim: #8b98a5;
+ --color-brand-twitter-mud: #273340;
+ --color-brand-twitter-dark: #232543;
+ --color-brand-twitter-threaded-line: #425364;
+ --color-brand-mastodon: #595aff;
+ --color-brand-mastodon-links: #8c8dff;
+ --color-brand-mastodon-bg: #1e2028;
+ --color-brand-mastodon-dim: #717c9b;
+ --color-brand-mastodon-mud: #272c40;
+ --color-brand-mastodon-dark: #232543;
+ --color-brand-mastodon-threaded-line: #434264;
+ --color-brand-mastodon-text-light: #8493a7;
+
+ /* Colors */
+ /* Note: Remember to search for the DIM hex
+ and replace it inside the SVG icons if you decide to change it */
+ --color-bg: var(--color-brand-mastodon-bg);
+ --color-bg-75: #1e2028bf;
+ --color-fg: #fff;
+ --color-border: #38384d;
+ --color-dim: var(--color-brand-mastodon-dim);
+ --color-accent: var(--color-brand-mastodon-links);
+ --color-accent-dark: var(--color-brand-mastodon);
+ --color-green: #00ba7c;
+ --color-red: #f91880;
+ --color-red-75: #f91880bf;
+ --color-yellow: #ffac33;
+ --color-light-shade: #ffffff05;
+ --color-focusable-toot: #ffffff09;
+ --color-light-text: #f7f9f9;
+ --color-mud: var(--color-brand-mastodon-mud);
+ --color-black-coral: #5a5371;
+ --color-profile-button-hover: #f1eff41a;
+ --color-column-link-hover: #f7f7f91a;
+ --color-modal-overlay: #5b708366;
+ --color-dark: var(--color-brand-mastodon-dark);
+ --color-thread-line: var(--color-brand-mastodon-threaded-line);
+ --color-gainsboro: #dcd9e8;
+ --color-light-purple: #9baec8;
+ --color-lighter-purple: #a5b8d3;
+ --color-dark-electric-blue: #576078;
+ --color-button-text: #f7f9f9;
+ --color-ghost-button-text: var(--color-button-text);
+ --color-verified: #79bd9a;
+ --color-destructive: #df405a;
+ --color-light-fuchsia-pink: #ff8cfd;
+ --color-hashtag: var(--color-accent);
+ --color-mention: var(--color-accent);
+ --color-link: var(--color-accent);
+
+ /* In the original UI this color is lighten($ui-base-color, 12%) */
+ --color-outer-space: #42485a;
+
+ /* Font related */
+ --font-stack: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, Inter, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+ --font-size: 15px;
+ --font-size-smaller: 13px;
+ --font-size-12: 12px;
+ --font-size-mid: 14px;
+ --font-size-bigger: 17px;
+ --font-size-heading: 20px;
+ --font-weight-bold: 700;
+ --line-height: 22px;
+ --line-height-mid: 20px;
+
+ /* Grids and gaps */
+ --gap-default: 12px;
+
+ /* Element sizes */
+ --size-avatar: 48px;
+ --size-avatar-small: 32px;
+ --size-icon-notification: 30px;
+ --width-main-panel: 600px;
+ --width-side-panel: 260px;
+ --width-column: 380px;
+ --border-radius: 16px;
+ --border-radius-badges: 4px;
+ --badges-distance-from-edge: 12px;
+
+ /* Misc */
+ --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
+ --active-header-radial-gradient: radial-gradient(ellipse, rgba(99, 100, 255, .23) 0, rgba(99, 100, 255, 0) 60%);
+ --compose-form-linear-gradient: linear-gradient(180deg, rgba(30, 32, 40, 1) 0%, rgba(30, 32, 40, 1) 53%, rgba(30, 32, 40, 0.8141631652661064) 76%, rgba(30, 32, 40, 0.7077205882352942) 87%, rgba(30, 32, 40, 0.458420868347339) 97%, rgba(30, 32, 40, 0) 100%);
+
+ /* Logo */
+ --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%3E%3C/svg%3E');
+
+ /* Icons */
+ --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23717c9b" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
+ --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E');
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23f7f9f9" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23f7f9f9" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E');
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-active: '\f005';
+ --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
+ --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23717c9b" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+ --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+ --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E");
+}
+
+/* High Contrast theme */
+body.theme-elephant-contrast.layout-multiple-columns {
+ --color-dim: #b8b3c0;
+
+ /* Icons */
+ --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23b8b3c0" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23b8b3c0" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23b8b3c0" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23b8b3c0" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+}
+
+/* Light theme */
+body.theme-elephant-light.layout-multiple-columns {
+ --color-bg: #fff;
+ --color-fg: #000;
+ --color-border: #e6e1ed;
+ --color-dim: #9388a6;
+ --color-green: #17bf63;
+ --color-red: #e0245e;
+ --color-red-75: #e0245ebf;
+ --color-light-shade: #00000005;
+ --color-focusable-toot: rgba(0, 0, 0, 0.035);
+ --color-light-text: #1f1b23;
+ --color-mud: #e5e1ed;
+ --color-black-coral: #9188a6;
+ --color-profile-button-hover: #1e1b231a;
+ --color-column-link-hover: #1e1b231a;
+ --color-modal-overlay: #6a5b8366;
+ --color-dark: #f7f9f9;
+ --color-thread-line: #e1e8ed;
+ --color-gainsboro: #8899a6;
+ --color-light-purple: #9588a6;
+ --color-dark-electric-blue: #9088a6;
+ --color-bg-75: #ffffffbf;
+ --color-accent: var(--color-accent-dark);
+ --color-accent-dark-50: #595aff80;
+ --color-ghost-button-text: var(--color-accent-dark);
+
+ /* Misc */
+ --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%);
+
+ /* Icons for light theme */
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%231f1b23" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%231f1b23" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231f1b23" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E');
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%231f1b23" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
+ --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239FA4BB' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E");
+}
+
+/* Vars on iPad, landscape */
+@media (min-width: 1175px) and (max-width: 1260px) {
+ :root {
+ --width-main-panel: 500px;
+ --width-side-panel: 265px;
+ }
+}
+
+/* Vars in mobile */
+@media (max-width: 500px) {
+ :root {
+ --font-size-heading: 17px;
+ --badges-distance-from-edge: 10px;
+ }
+
+ /* Hide scrollbar on mobile, since we can't pick the handle anyway */
+ .layout-multiple-columns::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+/* Search popout offset */
+.layout-multiple-columns .search__popout,
+.layout-multiple-columns .search-popout {
+ left: calc(30px / 2);
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ max-width: calc(100% - 30px) !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: calc(100% - 30px) !important;
+}
+
+body.embed,
+body.layout-multiple-columns {
+ background-color: var(--color-bg);
+ color: var(--color-fg);
+ font-family: var(--font-stack);
+}
+
+.layout-multiple-columns .ui {
+ display: flex;
+ width: 100%;
+}
+
+/* Text color */
+.layout-multiple-columns .account__header__tabs__name h1,
+.layout-multiple-columns .account__header__bio .account__header__content,
+.layout-multiple-columns .reply-indicator__content,
+.layout-multiple-columns .status__content {
+ color: var(--color-fg);
+}
+
+/* Link color variants */
+.layout-multiple-columns .status-link.hashtag {
+ color: var(--color-hashtag);
+}
+
+.layout-multiple-columns .status-link.mention:not(.hashtag) {
+ color: var(--color-mention);
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns .status-link.mention:not(.hashtag):not(.mention) {
+ color: var(--color-link);
+}
+
+/* Logo */
+.layout-multiple-columns .ui__header__logo,
+.layout-multiple-columns .column-link.column-link--logo {
+ background-image: var(--logo);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+ height: 50px;
+ padding: 0;
+ width: 50px;
+}
+
+.layout-multiple-columns .ui__header__logo img,
+.layout-multiple-columns .ui__header__logo svg {
+ display: none;
+}
+
+/* Things that should have the default font-size */
+.layout-multiple-columns .notification__message,
+.layout-multiple-columns .account__header__tabs__name h1 small,
+.layout-multiple-columns .button,
+.layout-multiple-columns .status__content__read-more-button,
+.layout-multiple-columns .status__prepend,
+.layout-multiple-columns .status__info,
+.layout-multiple-columns .status__relative-time,
+.layout-multiple-columns .status__info .status__display-name,
+.layout-multiple-columns .account__section-headline a,
+.layout-multiple-columns .account__section-headline button,
+.layout-multiple-columns .notification__filter-bar a,
+.layout-multiple-columns .notification__filter-bar button {
+ font-size: var(--font-size);
+ line-height: var(--line-height);
+}
+
+/* Things that should have the mid font-size */
+.layout-multiple-columns .account__header__extra__links,
+.layout-multiple-columns .columns-area__panels__pane--compositional .account__header__account-note textarea,
+.layout-multiple-columns .account__header__content,
+.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
+.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
+ font-size: var(--font-size-mid);
+ line-height: var(--line-height-mid);
+}
+
+/* Exceptions */
+.layout-multiple-columns .account__header__content {
+ line-height: 18px;
+}
+
+/* Things that will have even smaller font size */
+.layout-multiple-columns .account__header__account-note label {
+ font-size: var(--font-size-12);
+}
+
+/* Modal overlay */
+.layout-multiple-columns .modal-root__overlay {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ background-color: var(--color-modal-overlay) !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-light-text) !important;
+}
+
+.layout-multiple-columns .modal-root__modal .display-name strong,
+.layout-multiple-columns .modal-root__modal .status__content {
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ color: var(--color-light-text) !important;
+}
+
+/* Hide footer buttons in modals */
+.layout-multiple-columns .media-modal__overlay .picture-in-picture__footer {
+ display: none;
+}
+
+/* Report modal */
+.layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text {
+ display: grid;
+ gap: 6px;
+}
+
+.layout-multiple-columns .media-modal__navigation .fa-times::before {
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
+/* List adder input */
+.layout-multiple-columns .list-editor input.setting-text,
+.layout-multiple-columns .list-adder input.setting-text {
+ background-color: transparent;
+ border-color: var(--color-black-coral);
+ height: 38px;
+}
+
+.layout-multiple-columns .list-editor .column-inline-form button,
+.layout-multiple-columns .list-adder .column-inline-form button,
+.layout-multiple-columns .list-editor .column-inline-form button::before {
+ min-height: 38px;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 100% !important;
+}
+
+.layout-multiple-columns .list-editor__search {
+ padding: 15px;
+}
+
+.layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html {
+ color: var(--color-light-text);
+}
+
+.layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html,
+.layout-multiple-columns .list-editor__search .search__input {
+ background-color: transparent;
+ border-color: var(--color-black-coral);
+ height: 38px;
+}
+
+.layout-multiple-columns .list-editor .drawer__inner.backdrop {
+ box-shadow: 2px 4px 15px rgba(0, 0, 0, .2);
+}
+
+.layout-multiple-columns .column-back-button,
+.layout-multiple-columns .drawer__header,
+.layout-multiple-columns .drawer__inner__mastodon {
+ background-color: transparent;
+}
+
+/* Hide the elephant */
+.layout-multiple-columns .drawer__inner__mastodon {
+ display: none;
+}
+
+.layout-multiple-columns .list-editor__search .search__icon .fa {
+ margin: 15px;
+}
+
+.layout-multiple-columns .list-editor .list__display-name,
+.layout-multiple-columns .list-adder .list__display-name {
+ display: flex;
+ gap: var(--gap-default);
+}
+
+.layout-multiple-columns .list__display-name .fa-list-ul::before {
+ top: -2px;
+}
+
+/* Bigger preview cards */
+.layout-multiple-columns .status-card,
+.layout-multiple-columns .status-card.compact {
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ display: block;
+ transition: all 200ms;
+}
+
+/* Hide empty YouTube description */
+.layout-multiple-columns .status-card__description:empty {
+ display: none;
+}
+
+.layout-multiple-columns .status-card:focus,
+.layout-multiple-columns .status-card:hover {
+ background-color: rgba(255 255 255 / .03);
+}
+
+.layout-multiple-columns .fa-file-text::before {
+ content: "";
+}
+
+.layout-multiple-columns .status-card .status-card__image-image,
+.layout-multiple-columns .status-card .status-card__image-image.compact {
+ border-radius: 0;
+}
+
+.layout-multiple-columns .status-card .status-card__content,
+.layout-multiple-columns .status-card.compact .status-card__content {
+ padding: 15px;
+}
+
+.layout-multiple-columns .status-card .status-card__title,
+.layout-multiple-columns .status-card.compact .status-card__title {
+ color: var(--color-fg);
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 1.3;
+ margin-bottom: 10px;
+ white-space: inherit;
+}
+
+.layout-multiple-columns .status-card .status-card__host,
+.layout-multiple-columns .status-card.compact .status-card__host {
+ color: var(--color-dim);
+ font-size: var(--font-size-mid);
+ margin-bottom: 5px;
+ margin-top: 0;
+}
+
+/* Announcements */
+.layout-multiple-columns .announcements__pagination .fa,
+.layout-multiple-columns .announcements__pagination {
+ color: var(--color-dim);
+}
+
+.layout-multiple-columns .announcements__pagination .icon-button:hover i {
+ color: var(--color-light-purple);
+}
+
+/* Dark panels like modals and boxes */
+.layout-multiple-columns .column-select__menu *,
+.layout-multiple-columns .column-select__menu,
+.layout-multiple-columns .column-settings__hashtags .column-select__control,
+.layout-multiple-columns .about__meta,
+.layout-multiple-columns .about__section__title,
+.layout-multiple-columns .announcements,
+.layout-multiple-columns .report-dialog-modal,
+.layout-multiple-columns .report-modal__target,
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions,
+.layout-multiple-columns .privacy-dropdown__dropdown,
+.layout-multiple-columns .drawer__backdrop,
+.layout-multiple-columns .list-editor__account,
+.layout-multiple-columns .list-editor,
+.layout-multiple-columns .list-editor__lists,
+.layout-multiple-columns .list-adder__account,
+.layout-multiple-columns .list-adder,
+.layout-multiple-columns .list-adder__lists,
+.layout-multiple-columns .dropdown-menu__arrow::before,
+.layout-multiple-columns .dropdown-menu,
+.layout-multiple-columns .dropdown-menu__item a,
+.layout-multiple-columns .dropdown-menu__item button,
+.layout-multiple-columns .emoji-mart-category-label span,
+.layout-multiple-columns .emoji-mart-bar:first-child,
+.layout-multiple-columns .emoji-picker-dropdown__menu,
+.layout-multiple-columns .privacy-dropdown.active .privacy-dropdown__value,
+.layout-multiple-columns .emoji-mart-search input,
+.layout-multiple-columns .emoji-mart-scroll,
+.layout-multiple-columns .emoji-mart-search,
+.layout-multiple-columns .follow_requests-unlocked_explanation,
+.layout-multiple-columns .dismissable-banner,
+.layout-multiple-columns .block-modal__action-bar,
+.layout-multiple-columns .boost-modal__action-bar,
+.layout-multiple-columns .confirmation-modal__action-bar,
+.layout-multiple-columns .mute-modal__action-bar,
+.layout-multiple-columns .setting-text__wrapper,
+.layout-multiple-columns .setting-text,
+.layout-multiple-columns .report-modal__comment,
+.layout-multiple-columns .report-modal__container,
+.layout-multiple-columns .actions-modal,
+.layout-multiple-columns .block-modal,
+.layout-multiple-columns .boost-modal,
+.layout-multiple-columns .compare-history-modal,
+.layout-multiple-columns .confirmation-modal,
+.layout-multiple-columns .mute-modal,
+.layout-multiple-columns .report-modal,
+.layout-multiple-columns .column-header__collapsible-inner {
+ background-color: var(--color-dark);
+ border-color: var(--color-dark);
+ color: var(--color-light-text);
+}
+
+/* Hashtag list */
+.layout-multiple-columns .column-settings__hashtags .column-select__multi-value,
+.layout-multiple-columns .column-settings__hashtags .column-select__control {
+ color: var(--color-light-purple);
+}
+
+.layout-multiple-columns .column-settings__hashtags .column-select__multi-value {
+ background-color: var(--color-bg-75);
+}
+
+/* Has dark 1px border */
+.layout-multiple-columns .dismissable-banner {
+ border: 1px solid var(--color-dark);
+}
+
+/* More subtle box-shadow for dropdown-menu */
+.layout-multiple-columns .search-popout,
+.layout-multiple-columns .search__popout,
+.layout-multiple-columns .dropdown-menu {
+ box-shadow: 2px 4px 16px rgb(0 0 0 / .01);
+}
+
+/* Autosuggest box shadow reset */
+.layout-multiple-columns .column-select__menu,
+.layout-multiple-columns .search-popout,
+.layout-multiple-columns .search__popout,
+.layout-multiple-columns .dropdown-menu,
+.layout-multiple-columns .emoji-picker-dropdown__menu,
+.layout-multiple-columns .compose-form .compose-form__warning,
+.layout-multiple-columns .privacy-dropdown.active .privacy-dropdown__value,
+.layout-multiple-columns .privacy-dropdown__dropdown,
+.layout-multiple-columns .language-dropdown__dropdown,
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions {
+ box-shadow: none;
+}
+
+/* Composer form warnings */
+.layout-multiple-columns .compose-form .compose-form__warning {
+ background-color: var(--color-light-purple);
+ color: var(--color-bg);
+}
+
+/* Content warning placeholder */
+.layout-multiple-columns .compose-form .autosuggest-textarea__textarea::placeholder,
+.layout-multiple-columns .compose-form .spoiler-input__input::placeholder {
+ color: var(--color-dim);
+}
+
+/* Border colors */
+.layout-multiple-columns .account__header__bar,
+.layout-multiple-columns .about__meta__divider,
+.layout-multiple-columns .poll__footer,
+.layout-multiple-columns .report-dialog-modal .poll__option.dialog-option,
+.layout-multiple-columns .account,
+.layout-multiple-columns .report-dialog-modal__container,
+.layout-multiple-columns .dropdown-menu__item.edited-timestamp__history__item,
+.layout-multiple-columns .dropdown-menu__container__header,
+.layout-multiple-columns .compare-history-modal .report-modal__target,
+.layout-multiple-columns .account__section-headline,
+.layout-multiple-columns .detailed-status__action-bar,
+.layout-multiple-columns .column-back-button,
+.layout-multiple-columns .column-header,
+.layout-multiple-columns .audio-player,
+.layout-multiple-columns .video-player,
+.layout-multiple-columns .media-gallery,
+.layout-multiple-columns .compose-form .spoiler-input__input,
+.layout-multiple-columns .compose-form__autosuggest-wrapper,
+.layout-multiple-columns .compose-form__poll-wrapper,
+.layout-multiple-columns .compose-form__poll-wrapper select,
+.layout-multiple-columns .poll__option input[type="text"],
+.layout-multiple-columns .report-dialog-modal__textarea,
+.layout-multiple-columns .search__input,
+.layout-multiple-columns .setting-text,
+.layout-multiple-columns .dropdown-menu__separator,
+.layout-multiple-columns .status,
+.layout-multiple-columns .emoji-mart-search input,
+.layout-multiple-columns .conversation,
+.layout-multiple-columns .setting-text__wrapper {
+ border-color: var(--color-border);
+}
+
+/* Change panel order */
+.layout-multiple-columns .columns-area__panels__pane {
+ order: 3;
+}
+
+.layout-multiple-columns .columns-area__panels__main {
+ order: 2;
+}
+
+.layout-multiple-columns .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational {
+ order: 1;
+}
+
+/* Make the side input last in order */
+.layout-multiple-columns .drawer {
+ order: 999999;
+ padding: 0 10px;
+ width: var(--width-column);
+}
+
+.layout-multiple-columns .drawer__header,
+.layout-multiple-columns .drawer__inner {
+ background-color: var(--color-bg);
+ border-color: var(--color-bg);
+}
+
+.layout-multiple-columns .columns-area__panels__pane,
+.layout-multiple-columns .columns-area__panels__pane__inner,
+.layout-multiple-columns .compose-panel {
+ min-width: var(--width-side-panel);
+ width: var(--width-side-panel);
+}
+
+.layout-multiple-columns .columns-area__panels__pane--compositional {
+ flex-grow: 1;
+ height: 100vh;
+ max-width: 350px;
+ overflow: visible;
+ position: sticky;
+ top: 0;
+}
+
+.layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
+ position: static;
+}
+
+.layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner,
+.compose-panel {
+ /* stylelint-disable-next-line */
+ width: 100% !important;
+}
+
+.layout-multiple-columns .search {
+ margin-inline: 10px;
+}
+
+/* stylelint-disable-next-line */
+@media (min-width: 1175px) {
+ .layout-multiple-columns .columns-area__panels__main {
+ max-width: calc(var(--width-main-panel) + calc(var(--gap-default) * 4));
+ padding-left: calc(var(--gap-default) * 2);
+ padding-right: calc(var(--gap-default) * 2);
+ }
+
+ .layout-multiple-columns .navigation-panel {
+ margin-right: -20px;
+ /* stylelint-disable-next-line */
+ padding-left: 0 !important;
+ padding-right: 20px;
+ }
+}
+
+.layout-multiple-columns .emoji-mart-anchor-bar,
+.layout-multiple-columns .column-link.column-link--logo svg {
+ display: none;
+}
+
+/* Accented items like links */
+.layout-multiple-columns .about__section__title,
+.layout-multiple-columns .account__header__bio .account__header__fields a,
+.layout-multiple-columns .column-back-button,
+.layout-multiple-columns .emoji-mart-anchor.emoji-mart-anchor-selected,
+.layout-multiple-columns .text-icon-button.active,
+.layout-multiple-columns .empty-column-indicator a,
+.layout-multiple-columns .follow_requests-unlocked_explanation a,
+.layout-multiple-columns .column-header__back-button,
+.layout-multiple-columns .link-button,
+.layout-multiple-columns .reply-indicator__content a.unhandled-link,
+.layout-multiple-columns .status__content a.unhandled-link,
+.layout-multiple-columns .column-header > .column-header__back-button,
+.layout-multiple-columns .reply-indicator__content a,
+body.embed .status__content a,
+.layout-multiple-columns .status__content a,
+.layout-multiple-columns .column-link--transparent.active,
+.layout-multiple-columns .status__content__read-more-button {
+ color: var(--color-accent);
+}
+
+/* Toggles etc. */
+.layout-multiple-columns .search-results__header,
+.layout-multiple-columns .drawer__inner,
+.layout-multiple-columns .react-toggle .react-toggle-track {
+ background-color: var(--color-bg);
+}
+
+/* Accented background colors */
+.layout-multiple-columns .react-toggle--checked .react-toggle-track,
+.layout-multiple-columns .language-dropdown__dropdown__results__item.active,
+.layout-multiple-columns .icon-with-badge__badge,
+.layout-multiple-columns .button {
+ background-color: var(--color-accent-dark);
+}
+
+.layout-multiple-columns .block-modal__cancel-button,
+.layout-multiple-columns .confirmation-modal__cancel-button,
+.layout-multiple-columns .confirmation-modal__secondary-button,
+.layout-multiple-columns .mute-modal__cancel-button {
+ background-color: transparent;
+ color: var(--color-dim);
+ font-size: var(--font-size-mid);
+}
+
+.layout-multiple-columns .block-modal__cancel-button:focus,
+.layout-multiple-columns .confirmation-modal__cancel-button:focus,
+.layout-multiple-columns .confirmation-modal__secondary-button:focus,
+.layout-multiple-columns .mute-modal__cancel-button:focus,
+.layout-multiple-columns .block-modal__cancel-button:hover,
+.layout-multiple-columns .confirmation-modal__cancel-button:hover,
+.layout-multiple-columns .confirmation-modal__secondary-button:hover,
+.layout-multiple-columns .mute-modal__cancel-button:hover {
+ background-color: transparent;
+ color: var(--color-dark-electric-blue);
+}
+
+.column-link--transparent .icon-with-badge__badge,
+.layout-multiple-columns .icon-with-badge__badge {
+ background-color: var(--color-accent-dark);
+ border-color: var(--color-bg);
+}
+
+/* Accented strokes */
+.layout-multiple-columns .trends__item__sparkline path:last-child {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ stroke: var(--color-accent) !important;
+}
+
+/* Mud background colors */
+.layout-multiple-columns .reply-indicator {
+ background-color: var(--color-mud);
+ color: var(--color-light-text);
+}
+
+/* Dropdown hovers */
+.layout-multiple-columns .language-dropdown__dropdown__results__item:hover,
+.layout-multiple-columns .language-dropdown__dropdown__results__item:focus {
+ background-color: var(--color-accent-dark-50);
+ color: var(--color-light-text);
+}
+
+/* Accented border colors */
+.layout-multiple-columns .notification.unread::before,
+.layout-multiple-columns .status__wrapper.unread::before {
+ border-color: var(--color-accent);
+ display: none;
+}
+
+/* Unread message */
+.layout-multiple-columns .conversation--unread,
+.layout-multiple-columns .notification.unread:hover,
+.layout-multiple-columns .notification.unread,
+.layout-multiple-columns .status__wrapper.unread {
+ background-color: var(--color-dark);
+}
+
+.layout-multiple-columns .notification:hover .notification__message {
+ background-color: transparent;
+}
+
+/* Things like notification status update text that should be dim */
+/* stylelint-disable-next-line selector-not-notation */
+.layout-multiple-columns .notification .status-link.mention:not(.hashtag):not(.mention),
+.layout-multiple-columns .notification .status-link.hashtag,
+.layout-multiple-columns .notification .status-link.mention:not(.hashtag),
+.layout-multiple-columns .compose-form .autosuggest-textarea__textarea::placeholder,
+.layout-multiple-columns .compose-form .icon-button,
+.layout-multiple-columns .compose-form .spoiler-input__input::placeholder,
+.layout-multiple-columns .compose-form__poll-wrapper .button.button-secondary,
+.layout-multiple-columns .language-dropdown__dropdown__results__item__common-name,
+.layout-multiple-columns .report-dialog-modal__textarea::placeholder,
+.layout-multiple-columns .poll__link,
+.layout-multiple-columns .muted .poll,
+.layout-multiple-columns .status .status__relative-time,
+.layout-multiple-columns .status .status__visibility-icon,
+.layout-multiple-columns .block-modal__action-bar > div,
+.layout-multiple-columns .boost-modal__action-bar > div,
+.layout-multiple-columns .confirmation-modal__action-bar > div,
+.layout-multiple-columns .mute-modal__action-bar > div,
+.layout-multiple-columns .search-popout > h4,
+.layout-multiple-columns .search__popout > h4,
+.layout-multiple-columns .status-check-box__status .detailed-status__display-name,
+.layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text,
+.layout-multiple-columns .status-card .status-card__description,
+.layout-multiple-columns .status-card.compact .status-card__description,
+.layout-multiple-columns .report-dialog-modal .dialog-option .poll__input,
+.layout-multiple-columns .dropdown-menu__container__header,
+.layout-multiple-columns .sign-in-banner p,
+.layout-multiple-columns .navigation-bar > a,
+.layout-multiple-columns .character-counter,
+.layout-multiple-columns .text-icon-button,
+.layout-multiple-columns .empty-column-indicator,
+.layout-multiple-columns .follow_requests-unlocked_explanation,
+.layout-multiple-columns .poll__footer,
+.layout-multiple-columns .server-banner h4,
+.layout-multiple-columns .column-header__button,
+.layout-multiple-columns .search__icon .fa-times-circle,
+.layout-multiple-columns .timeline-hint,
+.layout-multiple-columns .status__display-name.muted,
+.layout-multiple-columns .setting-text-label,
+.layout-multiple-columns .account__header__bio .account__header__fields dt,
+.layout-multiple-columns .account__header__bio .account__header__fields dd,
+.layout-multiple-columns .link-footer p,
+.layout-multiple-columns .account__header__extra__links a,
+.layout-multiple-columns .trends__item__current,
+.layout-multiple-columns .emoji-mart-anchor,
+.layout-multiple-columns .emoji-mart,
+.layout-multiple-columns .emoji-mart-anchors,
+.layout-multiple-columns .reply-indicator .display-name *,
+.layout-multiple-columns .status__display-name,
+.layout-multiple-columns .status__prepend .status__display-name strong,
+.layout-multiple-columns .status__prepend,
+.layout-multiple-columns .compose-form .compose-form__modifiers,
+.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
+.layout-multiple-columns .compose-form .spoiler-input__input,
+.layout-multiple-columns .autosuggest-textarea__suggestions,
+.layout-multiple-columns .compose-form .autosuggest-account .display-name__account,
+.layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper,
+.layout-multiple-columns .compose-form .compose-form__buttons-wrapper,
+.layout-multiple-columns .account__section-headline a,
+.layout-multiple-columns .account__section-headline button,
+.layout-multiple-columns .notification__filter-bar a,
+.layout-multiple-columns .notification__filter-bar button,
+.layout-multiple-columns .attachment-list.compact .fa,
+.layout-multiple-columns .attachment-list__list a,
+.layout-multiple-columns .notification__message .fa-user-plus,
+.layout-multiple-columns .notification__message .fa-home,
+.layout-multiple-columns .notification__message .fa-retweet,
+.layout-multiple-columns .link-footer p a,
+.layout-multiple-columns .trends__item__name,
+.layout-multiple-columns .muted .status__content,
+.layout-multiple-columns .muted .status__content a,
+.layout-multiple-columns .muted .status__content p,
+.layout-multiple-columns .muted .status__display-name strong,
+.layout-multiple-columns .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
+ color: var(--color-dim);
+}
+
+/* Dim backgrounds */
+.layout-multiple-columns .poll__chart {
+ background-color: var(--color-dim);
+}
+
+/* Lighter border colors */
+.layout-multiple-columns .report-dialog-modal .dialog-option .poll__input,
+.layout-multiple-columns .poll__input {
+ border-color: var(--color-brand-mastodon-text-light);
+}
+
+/* Light grey things */
+.layout-multiple-columns .navigation-bar,
+.layout-multiple-columns .navigation-bar strong {
+ color: var(--color-gainsboro);
+}
+
+/* CW button */
+.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link,
+.layout-multiple-columns .status__content__spoiler-link {
+ background-color: var(--color-dark);
+ color: var(--color-light-purple);
+ font-weight: 500;
+
+ /* Need to override forced styles */
+ /* stylelint-disable-next-line */
+ margin-left: calc(var(--gap-default) / 2) !important;
+ vertical-align: baseline;
+}
+
+.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:focus,
+.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:hover,
+.layout-multiple-columns .status__content .status__content__spoiler-link:focus,
+.layout-multiple-columns .status__content .status__content__spoiler-link:hover {
+ background-color: var(--color-dark);
+ color: var(--color-lighter-purple);
+}
+
+/* CW button in notifications */
+.layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link,
+.layout-multiple-columns .notification .status__content__spoiler-link {
+ background-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+.layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link:focus,
+.layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link:hover,
+.layout-multiple-columns .notification .status__content .status__content__spoiler-link:focus,
+.layout-multiple-columns .notification .status__content .status__content__spoiler-link:hover {
+ background-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+/* Light purple things */
+.account__header__tabs__name h1 small,
+.layout-multiple-columns .account .account__display-name,
+.layout-multiple-columns .column-settings__section,
+.layout-multiple-columns .setting-toggle__label {
+ color: var(--color-light-purple);
+}
+
+/* White things */
+.layout-multiple-columns .compose-form__poll-wrapper select,
+.layout-multiple-columns .actions-modal ul li:not(:empty) a,
+.layout-multiple-columns .report-dialog-modal .status__content,
+.layout-multiple-columns .report-dialog-modal .status__content p,
+.layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong,
+.layout-multiple-columns .report-dialog-modal__lead,
+.layout-multiple-columns .detailed-status__display-name strong,
+.layout-multiple-columns .dismissable-banner__message,
+.layout-multiple-columns .privacy-dropdown__option.active,
+.layout-multiple-columns .privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.layout-multiple-columns .privacy-dropdown__option:focus .privacy-dropdown__option__content,
+.layout-multiple-columns .privacy-dropdown__option,
+.layout-multiple-columns .privacy-dropdown__option__content strong,
+.layout-multiple-columns .status__info .display-name strong.display-name__html,
+.layout-multiple-columns .reply-indicator .display-name strong.display-name__html,
+.layout-multiple-columns .notification__message,
+.layout-multiple-columns .getting-started__trends h4 a,
+.layout-multiple-columns .trends__item__name a,
+.layout-multiple-columns .emoji-mart-search input,
+.layout-multiple-columns .language-dropdown__dropdown__results__item,
+.layout-multiple-columns .reply-indicator__content,
+.layout-multiple-columns .compose-form .compose-form__modifiers:focus,
+.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
+.layout-multiple-columns .compose-form .spoiler-input__input:focus,
+.layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper:focus,
+.layout-multiple-columns .compose-form .compose-form__buttons-wrapper:focus,
+.layout-multiple-columns .autosuggest-textarea .autosuggest-textarea__textarea:focus,
+.layout-multiple-columns .account__section-headline a.active,
+.layout-multiple-columns .account__section-headline button.active,
+.layout-multiple-columns .notification__filter-bar a.active,
+.layout-multiple-columns .notification__filter-bar button.active {
+ color: var(--color-light-text);
+}
+
+.layout-multiple-columns .muted .status__info *,
+.layout-multiple-columns .muted .status__info .display-name * {
+ color: var(--color-light-text);
+}
+
+/* Account names */
+.layout-multiple-columns .status__info .display-name .display-name__account,
+.layout-multiple-columns .display-name__account {
+ color: var(--color-dim);
+}
+
+/* Main panel column */
+.layout-multiple-columns .columns-area__panels__main > div {
+ border-left: 1px solid var(--color-border);
+ border-right: 1px solid var(--color-border);
+}
+
+/* Status header */
+.layout-multiple-columns .status .status__info {
+ align-items: flex-start;
+ gap: var(--gap-default);
+ height: calc(var(--gap-default) * 2);
+ justify-content: flex-start;
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+
+/* Status action bar */
+.layout-multiple-columns .status__action-bar {
+ margin-top: 12px;
+}
+
+/* Display name */
+.layout-multiple-columns .status__info .status__display-name {
+ align-items: flex-start;
+ display: inline-flex;
+ gap: var(--gap-default);
+ order: 1;
+}
+
+.layout-multiple-columns .status__info .display-name {
+ display: flex;
+ gap: calc(var(--gap-default) / 2);
+}
+
+/* The separator dot */
+.layout-multiple-columns .status__info::before {
+ color: var(--color-dim);
+ content: "·";
+ display: inline-block;
+ font-size: var(--font-size);
+ font-weight: 400;
+ height: 20px;
+ margin-left: -6px;
+ margin-right: -10px;
+ order: 2;
+ position: relative;
+}
+
+.layout-multiple-columns .status__info .status__relative-time {
+ height: unset;
+ order: 3;
+}
+
+/* Visibility icon */
+.layout-multiple-columns .status .status__visibility-icon {
+ font-size: var(--font-size-mid);
+}
+
+/* Panels and things that should be transparent */
+.layout-multiple-columns .status__wrapper-direct,
+.layout-multiple-columns .focusable:focus .detailed-status,
+.layout-multiple-columns .focusable:focus .detailed-status__action-bar,
+.layout-multiple-columns .compose-form__poll-wrapper select,
+.layout-multiple-columns .poll__option input[type="text"],
+.layout-multiple-columns .language-dropdown__dropdown,
+body.embed .activity-stream .entry,
+.layout-multiple-columns .report-dialog-modal__textarea,
+.layout-multiple-columns .column-inline-form,
+.layout-multiple-columns .scrollable .account-card,
+.layout-multiple-columns .scrollable .account-card__title__avatar .account__avatar,
+.layout-multiple-columns .scrollable .account-card__title__avatar img,
+.layout-multiple-columns .explore__search-header,
+.layout-multiple-columns .empty-column-indicator,
+.layout-multiple-columns .follow_requests-unlocked_explanation,
+.layout-multiple-columns .column-link,
+.layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel,
+.layout-multiple-columns .tabs-bar__wrapper .column-back-button,
+.layout-multiple-columns .account__header,
+.layout-multiple-columns .column-header__back-button,
+.layout-multiple-columns .compose-form .compose-form__modifiers,
+.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
+.layout-multiple-columns .compose-form .spoiler-input__input,
+.layout-multiple-columns .compose-panel .compose-form__autosuggest-wrapper,
+.layout-multiple-columns .compose-form .compose-form__buttons-wrapper,
+.layout-multiple-columns .column-header__button,
+.layout-multiple-columns .account__section-headline button,
+.layout-multiple-columns .notification__filter-bar button,
+.layout-multiple-columns .account__section-headline,
+.layout-multiple-columns .notification__filter-bar,
+.layout-multiple-columns .tabs-bar__wrapper,
+.layout-multiple-columns .column-header,
+body.embed .detailed-status,
+.layout-multiple-columns .detailed-status,
+.layout-multiple-columns .detailed-status__action-bar,
+.layout-multiple-columns .column > .scrollable {
+ background-color: transparent;
+}
+
+/* Avatar */
+.account__avatar[style="width: 46px; height: 46px;"],
+.layout-multiple-columns .status__avatar {
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ max-height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ max-width: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ min-height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ min-width: var(--size-avatar) !important;
+
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ width: var(--size-avatar) !important;
+}
+
+/* Avatars */
+.layout-multiple-columns .account-card__title__avatar .account__avatar,
+.layout-multiple-columns .account-card__title__avatar img,
+.layout-multiple-columns .account__avatar > img,
+.layout-multiple-columns .column > .scrollable .status__avatar img {
+ border: 0;
+ border-radius: 50%;
+ box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset;
+}
+
+/* Things that should not have border */
+.layout-multiple-columns .column-inline-form,
+.layout-multiple-columns .column > .scrollable,
+.layout-multiple-columns .error-column,
+.layout-multiple-columns .getting-started,
+.layout-multiple-columns .regeneration-indicator,
+.layout-multiple-columns .column-back-button,
+.layout-multiple-columns .column-header {
+ border: 0;
+}
+
+/* Nice active effect in the column header */
+.layout-multiple-columns .column-header__wrapper.active {
+ box-shadow: var(--active-header-box-shadow);
+}
+
+.layout-multiple-columns .column-header__wrapper.active::before {
+ /* stylelint-disable-next-line */
+ background: var(--active-header-radial-gradient);
+}
+
+.layout-multiple-columns .compose-form__autosuggest-wrapper,
+.layout-multiple-columns .compose-form__buttons-wrapper {
+ border: 0;
+}
+
+.layout-multiple-columns article,
+.layout-multiple-columns .status__prepend,
+.layout-multiple-columns .notification__message,
+.layout-multiple-columns .status {
+ transition: all 200ms;
+}
+
+/* Toot hover effect */
+.layout-multiple-columns article:focus,
+.layout-multiple-columns article:hover {
+ background-color: var(--color-light-shade);
+}
+
+/* Focusable toot and other hilighted items */
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item.selected,
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:active,
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:focus,
+.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:hover,
+.layout-multiple-columns .focusable:focus {
+ /* stylelint-disable-next-line */
+ background: var(--color-focusable-toot);
+}
+
+/* URL preview cards */
+.layout-multiple-columns a.status-card,
+.layout-multiple-columns a.status-card.compact:hover,
+.layout-multiple-columns a.status-card.compact:focus,
+.layout-multiple-columns a.status-card.compact {
+ background-color: transparent;
+ border-color: var(--color-border);
+}
+
+/* URL preview card summary text */
+.layout-multiple-columns a.status-card .status-card__host,
+.layout-multiple-columns a.status-card.compact .status-card__host,
+.layout-multiple-columns a.status-card .status-card__description,
+.layout-multiple-columns a.status-card.compact .status-card__description {
+ color: var(--color-dim);
+}
+
+/* Search panel that opens when focusing Search or paste URL field */
+.layout-multiple-columns .explore__search-header .search__popout,
+.layout-multiple-columns .compose-form__poll-wrapper option,
+.layout-multiple-columns .search__popout,
+.layout-multiple-columns .search-popout {
+ background-color: var(--color-dark);
+ border-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+.layout-multiple-columns .search__popout em,
+.layout-multiple-columns .search-popout em {
+ color: var(--color-light-text);
+}
+
+/* URL preview card box */
+/* stylelint-disable-next-line */
+.layout-multiple-columns a.status-card .status-card__content,
+.layout-multiple-columns a.status-card.compact .status-card__content {
+ display: grid;
+ gap: calc(var(--gap-default) / 2);
+ padding: var(--gap-default);
+}
+
+/* URL preview card fonts */
+.layout-multiple-columns a.status-card .status-card__host,
+.layout-multiple-columns a.status-card.compact .status-card__host,
+.layout-multiple-columns a.status-card .status-card__title,
+.layout-multiple-columns a.status-card.compact .status-card__title {
+ font-size: var(--font-size);
+ margin: 0;
+}
+
+/* Status update tinted to right */
+.layout-multiple-columns .status__action-bar,
+.layout-multiple-columns .attachment-list,
+.layout-multiple-columns .status__content__read-more-button,
+.layout-multiple-columns .status .status__content,
+.layout-multiple-columns .notification.notification-admin-sign-up .display-name__account {
+ font-size: var(--font-size);
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+ padding-top: 0;
+}
+
+/* Translate link and other padding resets */
+.layout-multiple-columns .conversation .attachment-list,
+.layout-multiple-columns .translate ~ .status__content__read-more-button {
+ padding-left: 0;
+}
+
+/* Rtl version */
+[dir="rtl"] .layout-multiple-columns .status__action-bar,
+[dir="rtl"] .layout-multiple-columns .attachment-list
+[dir="rtl"] .layout-multiple-columns .status__content__read-more-button,
+[dir="rtl"] .layout-multiple-columns .status .status__content {
+ padding-left: 0;
+ padding-right: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Reset padding from attachment-list on reply indicator */
+.layout-multiple-columns .reply-indicator .attachment-list {
+ padding-left: 0;
+}
+
+.layout-multiple-columns .status__action-bar button,
+.layout-multiple-columns .detailed-status__action-bar button {
+ border-radius: 50%;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button[disabled],
+.layout-multiple-columns .status__action-bar .icon-button[disabled] {
+ opacity: .5;
+ pointer-events: none;
+}
+
+/* Media inside status update tinted to right */
+.layout-multiple-columns .status .audio-player,
+.layout-multiple-columns .status .video-player,
+.layout-multiple-columns .status .media-gallery {
+ margin-left: auto;
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ width: calc(100% - calc(var(--size-avatar) + var(--gap-default))) !important;
+}
+
+.layout-multiple-columns .status .status-card {
+ margin-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Detailed status update */
+.layout-multiple-columns .detailed-status .status__content {
+ font-size: var(--font-size-bigger);
+ line-height: 1.4;
+}
+
+body.embed .detailed-status__meta,
+.layout-multiple-columns .detailed-status__meta {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+body.embed .detailed-status__meta {
+ line-height: 1.5;
+}
+
+body.embed .detailed-status__reblogs,
+body.embed .detailed-status__favorites,
+.layout-multiple-columns .detailed-status__favorites,
+.layout-multiple-columns .detailed-status__reblogs {
+ display: inline-flex;
+ font-size: var(--font-size);
+ gap: 4px;
+}
+
+body.embed .detailed-status__meta .animated-number,
+.layout-multiple-columns .detailed-status__meta .animated-number {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+body.embed .detailed-status__reblogs,
+.layout-multiple-columns .detailed-status__reblogs {
+ font-size: var(--font-size);
+}
+
+body.embed .detailed-status__reblogs,
+body.embed .detailed-status__favorites {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+body.embed .detailed-status__reblogs::after,
+.layout-multiple-columns .detailed-status__reblogs::after {
+ color: var(--color-dim);
+ content: 'Boosts';
+ font-weight: 500;
+}
+
+body.embed .detailed-status__favorites::after,
+.layout-multiple-columns .detailed-status__favorites::after {
+ color: var(--color-dim);
+ content: 'Favourites';
+ font-weight: 500;
+}
+
+body.embed .detailed-status__meta .detailed-status__link .fa-star,
+body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
+.layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-star,
+.layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-retweet {
+ display: none;
+}
+
+/* Icon buttons */
+.layout-multiple-columns .icon-button {
+ color: var(--color-dim);
+}
+
+/* Hide/Show media button */
+.layout-multiple-columns .spoiler-button.spoiler-button--minified > button {
+ background-color: var(--color-bg);
+ border-radius: var(--border-radius-badges);
+ color: var(--color-ghost-button-text);
+ opacity: .5;
+}
+
+/* Alt badge */
+.layout-multiple-columns .media-gallery__item__badges > span {
+ border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-multiple-columns .spoiler-button--minified {
+ inset-inline-start: var(--badges-distance-from-edge);
+ top: var(--badges-distance-from-edge);
+}
+
+.layout-multiple-columns .media-gallery__gifv__label {
+ bottom: var(--badges-distance-from-edge);
+ inset-inline-start: var(--badges-distance-from-edge);
+}
+
+.layout-multiple-columns .icon-button:hover {
+ color: var(--color-accent);
+}
+
+/* Other general buttons */
+.layout-multiple-columns .column-header__button.active:active,
+.column-header__button.active:focus,
+.layout-multiple-columns .column-header__button.active:hover {
+ background-color: var(--color-focusable-toot);
+ color: var(--color-fg);
+}
+
+/* Bars on panels */
+.layout-multiple-columns .ui__header,
+.layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper,
+.layout-multiple-columns .tabs-bar__wrapper {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ border-color: var(--color-border);
+ padding: 0;
+}
+
+@media (min-width: 1175px) {
+ .layout-multiple-columns .ui__header,
+ .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-multiple-columns .tabs-bar__wrapper {
+ margin-right: -2px;
+ }
+}
+
+/* Hidden things */
+/* stylelint-disable-next-line */
+.layout-multiple-columns .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) {
+ display: none;
+}
+
+/* Column headers */
+.layout-multiple-columns .column-header {
+ font-size: var(--font-size-heading);
+ font-weight: var(--font-weight-bold);
+}
+
+/* Column sub-headers */
+.layout-multiple-columns .column-subheading {
+ background-color: transparent;
+ color: var(--color-fg);
+ font-size: var(--font-size-bigger);
+ font-weight: var(--font-weight-bold);
+ text-transform: unset;
+}
+
+/* "Your lists" view */
+.layout-multiple-columns .column-subheading ~ article {
+ padding-left: var(--gap-default);
+ padding-right: var(--gap-default);
+}
+
+/* Notifications */
+.layout-multiple-columns .notification__message {
+ display: grid;
+ gap: var(--gap-default);
+ grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
+ height: calc(var(--gap-default) * 2);
+}
+
+.layout-multiple-columns .notification__message i {
+ font-size: var(--size-icon-notification);
+}
+
+/* Make sure notification user is clickable */
+.layout-multiple-columns .notification__display-name {
+ position: relative;
+ z-index: 99;
+}
+
+/* Hack to display notification message title on one line */
+.layout-multiple-columns .notification__message > span {
+ display: block;
+ margin-top: calc(var(--size-avatar-small) + 6px);
+ overflow: visible;
+}
+
+.layout-multiple-columns .notification__message > span > span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.layout-multiple-columns .notification__message > div {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.layout-multiple-columns .muted .status__avatar {
+ opacity: 1;
+}
+
+.layout-multiple-columns .notification .account__avatar-overlay-base {
+ display: none;
+}
+
+.layout-multiple-columns .notification .account__avatar,
+.layout-multiple-columns .notification .account__avatar-overlay-overlay .account__avatar,
+.layout-multiple-columns .notification .account__avatar-overlay-overlay {
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ height: var(--size-avatar-small) !important;
+ /* stylelint-disable-next-line */
+ min-height: var(--size-avatar-small) !important;
+ /* stylelint-disable-next-line */
+ min-width: var(--size-avatar-small) !important;
+ position: absolute;
+ /* stylelint-disable-next-line */
+ width: var(--size-avatar-small) !important;
+}
+
+.layout-multiple-columns .notification .status__info .status__display-name {
+ overflow: visible;
+}
+
+/* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */
+.layout-multiple-columns .notification.notification-reblog .status__info .status__display-name,
+.layout-multiple-columns .notification.notification-follow .status__info .status__display-name,
+.layout-multiple-columns .notification.notification-favourite .status__info .status__display-name {
+ pointer-events: none;
+}
+
+/* Hack to show follow notification more minimal way */
+.layout-multiple-columns .notification.notification-admin-report .notification__report,
+.layout-multiple-columns .notification.notification-admin-sign-up .account__wrapper,
+.layout-multiple-columns .notification.notification-update .account__wrapper,
+.layout-multiple-columns .notification.notification-follow .account__wrapper {
+ position: relative;
+}
+
+.layout-multiple-columns .notification.notification-admin-report .account__avatar-overlay-overlay {
+ top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default) + 4px));
+}
+
+/* Hack to show follow notification more minimal way */
+.layout-multiple-columns .notification.notification-poll .display-name,
+.layout-multiple-columns .notification.notification-update .display-name__html,
+.layout-multiple-columns .notification.notification-update .display-name__account,
+.layout-multiple-columns .notification.notification-admin-sign-up .display-name__html,
+.layout-multiple-columns .notification.notification-admin-sign-up .display-name,
+.layout-multiple-columns .notification.notification-follow .display-name__html {
+ visibility: hidden;
+}
+
+.layout-multiple-columns .notification.notification-update .account__avatar-wrapper,
+.layout-multiple-columns .notification.notification-admin-sign-up .account__avatar-wrapper,
+.layout-multiple-columns .notification.notification-follow .account__avatar-wrapper,
+.layout-multiple-columns .notification .account__avatar-overlay {
+ left: calc(var(--size-avatar-small) + var(--gap-default) + 18px);
+ margin-top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default)));
+ position: absolute;
+ top: 4px;
+}
+
+.layout-multiple-columns .notification.notification-admin-report .account__avatar-overlay {
+ margin-top: 0;
+ top: 0;
+}
+
+.layout-multiple-columns .notification.notification-status .notification__message > span {
+ display: none;
+}
+
+.layout-multiple-columns .notification.notification-follow .verified-badge,
+.layout-multiple-columns .notification.notification-follow .display-name,
+.layout-multiple-columns .notification.notification-admin-sign-up .display-name + span,
+.layout-multiple-columns .notification.notification-follow .display-name + span,
+.layout-multiple-columns .notification.notification-favourite .status__wrapper-direct .status__prepend,
+.layout-multiple-columns .notification.notification-reblog .display-name,
+.layout-multiple-columns .notification.notification-favourite .display-name {
+ display: none;
+}
+
+/* Minimal boost notification fix */
+.layout-multiple-columns .notification.notification-reblog .notification__message > span {
+ margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2));
+}
+
+/* Minimal follow notification fix */
+.layout-multiple-columns .notification.notification-follow .notification__message > span {
+ margin-top: calc(calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px);
+}
+
+.layout-multiple-columns .notification.notification.notification-admin-sign-up .account__relationship,
+.layout-multiple-columns .notification.notification-follow .account__relationship {
+ transform: translateY(-8px);
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns .notification.notification-follow .account__avatar-wrapper {
+ top: 6px;
+}
+
+/* Minimal fav notification fix */
+.layout-multiple-columns .notification.notification-favourite .notification__message > span {
+ margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2));
+}
+
+/* If a status content is empty and there's only attachment, remove gap */
+.layout-multiple-columns .notification .status__content:has(.status__content__text:empty) + .attachment-list {
+ margin-top: 0;
+}
+
+/* Less space before attachments if no status content */
+.layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .audio-player,
+.layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .video-player,
+.layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .media-gallery,
+.layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .audio-player,
+.layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .video-player,
+.layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery {
+ margin-top: calc(var(--gap-default) / 2);
+}
+
+.layout-multiple-columns .notification.notification.notification-admin-sign-up .notification__message + .account,
+.layout-multiple-columns .notification.notification-follow .notification__message + .account {
+ padding-bottom: 0;
+}
+
+.layout-multiple-columns .status__prepend {
+ padding-left: calc(var(--size-avatar) - 4px);
+}
+
+.layout-multiple-columns .notification.notification-update .account__display-name,
+.layout-multiple-columns .notification.notification-follow .account__display-name {
+ display: inline-flex;
+ gap: var(--gap-default);
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Admin reports and other admin notifications */
+.layout-multiple-columns .notification-admin-report .notification__report {
+ border-color: var(--color-border);
+ display: flex;
+ font-size: var(--font-size);
+ gap: 16px;
+ margin-top: 22px;
+ padding: 16px;
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+.layout-multiple-columns .notification-admin-report .notification__report__details {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+.layout-multiple-columns .notification-admin-report .notification__report__details strong {
+ font-weight: 400;
+}
+
+/* Revert hack for notification admin message that has no avatar visible */
+.layout-multiple-columns .notification-admin-report .notification__message > span {
+ display: block;
+ margin-top: calc(var(--size-avatar-small) + 4px);
+ overflow: visible;
+}
+
+/* Hide things in notifications */
+.layout-multiple-columns .notification .status__relative-time,
+.layout-multiple-columns .notification .status__info::before {
+ display: none;
+}
+
+/* Right side panel */
+.layout-multiple-columns .navigation-panel {
+ box-sizing: border-box;
+ margin-top: 0;
+ overflow-y: auto;
+ padding: 10px;
+}
+
+.layout-multiple-columns .navigation-panel hr {
+ /* Hide but reserve space */
+ visibility: hidden;
+}
+
+.columns-area__panels__pane--navigational .navigation-panel {
+ border: 0;
+ height: 100%;
+}
+
+.layout-multiple-columns .navigation-panel__logo hr {
+ margin: 0;
+}
+
+/* Attempt to hide scrollbars for .navigation-panel for Firefox */
+.dropdown-menu__container__list--scrollable,
+.layout-multiple-columns .navigation-panel {
+ scrollbar-width: none;
+}
+
+/* Hide scrollbars for .navigation-panel for Chrome and Safari */
+.dropdown-menu__container__list--scrollable::-webkit-scrollbar,
+.layout-multiple-columns .navigation-panel::-webkit-scrollbar {
+ display: none;
+ width: 4px;
+}
+
+/* Columns */
+.layout-multiple-columns .column {
+ border-right: 1px solid var(--color-border);
+ padding-left: 0;
+ padding-right: 0;
+ width: var(--width-column);
+}
+
+.layout-multiple-columns .column-subheading,
+.layout-multiple-columns .column-link {
+ align-items: center;
+ color: var(--color-light-text);
+ display: flex;
+ font-size: var(--font-size);
+ gap: var(--gap-default);
+ overflow: visible;
+ padding-bottom: calc(var(--gap-default) + 4px);
+ padding-left: var(--gap-default);
+ padding-right: calc(var(--gap-default) * 1.5);
+ padding-top: calc(var(--gap-default) + 4px);
+ transition: all 100ms;
+}
+
+[dir="rtl"] .layout-multiple-columns .column-link {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+.layout-multiple-columns .column-link > i {
+ min-width: 1.3em;
+}
+
+.layout-multiple-columns .column-link > span {
+ position: relative;
+}
+
+.layout-multiple-columns .account__section-headline a {
+ transition: all 200ms;
+}
+
+.layout-multiple-columns .notification__filter-bar button:hover,
+.layout-multiple-columns .account__section-headline a:hover {
+ background-color: var(--color-column-link-hover);
+}
+
+/* Mobile devices */
+@media (hover: none) {
+ .layout-multiple-columns .notification__filter-bar button.active:hover,
+ .layout-multiple-columns .account__section-headline a.active:hover {
+ background-color: transparent;
+ }
+}
+
+/* Notification filter bar */
+.layout-multiple-columns .notification__filter-bar {
+ border-bottom: 1px solid var(--color-border);
+ border-left: 0;
+ border-right: 0;
+}
+
+.layout-multiple-columns .column-link__icon {
+ margin: 0;
+}
+
+/* Notification badge on side panel */
+.layout-multiple-columns .icon-with-badge__badge {
+ border-radius: 50%;
+ font-size: 11px;
+ left: 12px;
+ top: -6px;
+}
+
+.layout-multiple-columns .column-link--transparent.active {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+/* Top panel */
+.layout-multiple-columns .account__section-headline a.active::after,
+.layout-multiple-columns .account__section-headline button.active::after,
+.layout-multiple-columns .notification__filter-bar a.active::after,
+.layout-multiple-columns .notification__filter-bar button.active::after {
+ background-color: var(--color-accent);
+ border: 0;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ height: 4px;
+ min-width: 56px;
+}
+
+.layout-multiple-columns .account__section-headline a.active::before,
+.layout-multiple-columns .account__section-headline button.active::before,
+.layout-multiple-columns .notification__filter-bar a.active::before,
+.layout-multiple-columns .notification__filter-bar button.active::before {
+ display: none;
+}
+
+.layout-multiple-columns .notification.notification-reblog .status__action-bar,
+.layout-multiple-columns .notification.notification-favourite .status__action-bar {
+ display: none;
+}
+
+.layout-multiple-columns .search .search__icon .fa-search::before {
+ content: '';
+}
+
+.layout-multiple-columns .status__prepend .fa-retweet::before {
+ content: var(--icon-boost-status-prepend);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .notification .notification__message .fa {
+ font-size: 27px;
+ margin-right: 4px;
+ max-width: 30px;
+}
+
+.layout-multiple-columns .notification .fa:not(.fa-link)::before {
+ font-size: 22px;
+ height: 27px;
+}
+
+.layout-multiple-columns .notification .fa.fa-user-plus:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+ font-size: 20px;
+}
+
+.layout-multiple-columns .account__relationship .fa.fa-user-plus:not(.fa-link)::before,
+.layout-multiple-columns .notification .account__relationship .fa.fa-user-plus:not(.fa-link)::before {
+ color: var(--color-dim);
+}
+
+.layout-multiple-columns .notification .fa.fa-flag::before,
+.layout-multiple-columns .notification .fa.fa-tasks:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+}
+
+.layout-multiple-columns .notification .fa.fa-home:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+ font-size: 24px;
+}
+
+/* Follow/unfollow button */
+.layout-multiple-columns .account__relationship .icon-button,
+.layout-multiple-columns .notification .account__relationship .icon-button {
+ background-color: transparent;
+}
+
+.layout-multiple-columns .notification .account__relationship .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-dim);
+ font-size: 20px;
+}
+
+.layout-multiple-columns .list-adder__lists .fa-times::before,
+.layout-multiple-columns .account__wrapper .account__relationship .icon-button.active .fa::before,
+.layout-multiple-columns .explore__search-results .account__relationship .icon-button.active .fa::before,
+.layout-multiple-columns .notification .account__relationship .icon-button.active .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-green);
+ opacity: .75;
+}
+
+.layout-multiple-columns .list-adder__lists .fa-times:hover::before,
+.layout-multiple-columns .explore__search-results .icon-button.active:hover .fa::before,
+.layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-red);
+ opacity: 1;
+}
+
+.layout-multiple-columns .explore__search-results .icon-button:focus .fa::before,
+.layout-multiple-columns .notification .account__relationship .icon-button:focus .fa::before,
+.layout-multiple-columns .explore__search-results .icon-button.active:focus .fa::before,
+.layout-multiple-columns .notification .account__relationship .icon-button.active:focus .fa::before,
+.layout-multiple-columns .explore__search-results .icon-button:hover .fa::before,
+.layout-multiple-columns .notification .account__relationship .icon-button:hover .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-green);
+ opacity: 1;
+}
+
+.layout-multiple-columns .notification .account__relationship {
+ border-radius: 50%;
+ height: 24px;
+ transform: translateY(-4px);
+ width: 24px;
+}
+
+.layout-multiple-columns .notification .account__relationship:hover {
+ background-color: rgba(96, 105, 132, .15);
+}
+
+/* Emoji-mart search input */
+.layout-multiple-columns .emoji-mart-search-icon svg {
+ fill: var(--color-border);
+ opacity: 1;
+}
+
+.layout-multiple-columns .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg {
+ fill: var(--color-accent);
+}
+
+.layout-multiple-columns .emoji-mart-search > input {
+ font-size: var(--font-size-smaller);
+}
+
+.layout-multiple-columns .compose-form__autosuggest-wrapper textarea::placeholder,
+.layout-multiple-columns .report-dialog-modal__textarea::placeholder,
+.layout-multiple-columns .emoji-mart-search > input::placeholder {
+ color: var(--color-dim);
+ opacity: 1;
+}
+
+.layout-multiple-columns .report-dialog-modal__textarea,
+.layout-multiple-columns .report-dialog-modal__textarea:focus,
+.layout-multiple-columns .emoji-mart-search > input:focus {
+ color: var(--color-light-text);
+}
+
+.layout-multiple-columns .emoji-mart-search-icon:disabled {
+ opacity: 1;
+}
+
+/* Search */
+.layout-multiple-columns .search .search__icon .fa-search {
+ background-color: var(--color-mud);
+ background-image: var(--icon-search);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 20px;
+ display: inline-block;
+ height: 24px;
+ top: 10px;
+ width: 24px;
+}
+
+.layout-multiple-columns input.setting-text,
+.layout-multiple-columns .search__input {
+ background-color: var(--color-mud);
+ border-color: var(--color-mud);
+ border-radius: 32px;
+ color: var(--color-dim);
+ font-size: var(--font-size);
+ height: 42px;
+ padding: 0 20px;
+}
+
+/* Input texts */
+.layout-multiple-columns .poll__option input[type="text"],
+.layout-multiple-columns input.setting-text:focus,
+.layout-multiple-columns .search__input:focus {
+ color: var(--color-light-text);
+}
+
+/* Poll input */
+.layout-multiple-columns .poll__option input[type="text"] {
+ background-color: transparent;
+ border-color: var(--color-border);
+}
+
+.layout-multiple-columns .poll__option input[type="text"]:focus {
+ border-color: var(--color-accent);
+}
+
+/* Placeholders */
+.layout-multiple-columns .poll__option input[type="text"]::placeholder,
+.layout-multiple-columns .search__input::placeholder,
+.layout-multiple-columns input::placeholder,
+.layout-multiple-columns input.setting-text::placeholder {
+ color: var(--color-dim);
+ opacity: 1;
+}
+
+/* Profile */
+.layout-multiple-columns .getting-started__trends h4,
+.layout-multiple-columns .account__header__bar {
+ border-color: var(--color-border);
+}
+
+.layout-multiple-columns .account__header__bio .account__header__fields {
+ background-color: transparent;
+ color: var(--color-dim);
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--gap-default);
+ padding: 0;
+}
+
+/* Hide label */
+.layout-multiple-columns .account__header__bio .account__header__fields dt {
+ display: none;
+}
+
+/* Joined label */
+.layout-multiple-columns .account__header__bio .account__header__fields dt:not([title]) {
+ display: inline-flex;
+ font-weight: 400;
+ gap: calc(var(--gap-default) / 2);
+ text-transform: unset;
+}
+
+.layout-multiple-columns h4,
+.layout-multiple-columns .search__popout h4,
+.layout-multiple-columns .search-popout h4,
+.layout-multiple-columns .server-banner h4 {
+ text-transform: unset;
+}
+
+.layout-multiple-columns .account__header__bio .account__header__fields dt:not([title])::before {
+ content: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ height: 18.5px;
+ width: 18.5px;
+}
+
+.layout-multiple-columns .account__header__bio .account__header__fields dd,
+.layout-multiple-columns .account__header__bio .account__header__fields dt {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+.layout-multiple-columns .account__header__bio .account__header__fields dl {
+ background-color: transparent;
+ border: 0;
+ color: var(--color-dim);
+ display: inline-flex;
+ font-size: var(--font-size);
+ font-weight: 400;
+ gap: calc(var(--gap-default) / 2);
+ padding: 0;
+}
+
+.layout-multiple-columns .getting-started__trends h4 {
+ border: 0;
+ font-size: var(--font-size-heading);
+ font-weight: var(--font-weight-bold);
+ line-height: 24px;
+ margin-bottom: var(--gap-default);
+ text-transform: unset;
+}
+
+.layout-multiple-columns .getting-started__trends {
+ margin-top: calc(var(--gap-default) * 2);
+}
+
+.layout-multiple-columns .flex-spacer,
+.layout-multiple-columns .getting-started,
+.layout-multiple-columns .getting-started__wrapper {
+ background-color: transparent;
+}
+
+.layout-multiple-columns .trends__item__name a {
+ font-size: var(--font-size);
+}
+
+.layout-multiple-columns .trends__item__name {
+ display: grid;
+ gap: 4px;
+}
+
+.layout-multiple-columns .account__header__image {
+ height: 200px;
+}
+
+.layout-multiple-columns .account__header__bar .avatar .account__avatar {
+ background-color: transparent;
+ border: 0;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: 90px !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 90px !important;
+}
+
+.layout-multiple-columns .account__header__tabs {
+ overflow: visible;
+}
+
+.layout-multiple-columns .account__header__tabs .account-role {
+ display: none;
+ width: 90px;
+}
+
+/* Follow/unfollow button */
+body.embed .button.logo-button,
+.layout-multiple-columns .notification__report__actions .button,
+.layout-multiple-columns .column-inline-form button,
+.layout-multiple-columns .explore__suggestions .account-card__actions__button button,
+.layout-multiple-columns .account__header__tabs__buttons .button {
+ background-color: transparent;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ color: var(--color-light-text);
+ font-size: var(--font-size);
+ padding-left: 16px;
+ padding-right: 16px;
+ transition: all 200ms;
+}
+
+/* Dark button borders and other things that have borders all around */
+body.embed .button.logo-button,
+.layout-multiple-columns .notification__report__actions .button,
+.layout-multiple-columns .column-inline-form button,
+.layout-multiple-columns .explore__suggestions .account-card__actions__button button,
+.layout-multiple-columns .account__header__tabs__buttons .button,
+.layout-multiple-columns .account__header__tabs__buttons .icon-button {
+ border: 1px solid var(--color-outer-space);
+}
+
+.layout-multiple-columns .account__header__tabs__buttons .icon-button {
+ color: var(--color-light-text);
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns .account__header__tabs__buttons .icon-button {
+ align-items: center;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ display: inline-flex;
+ justify-content: center;
+}
+
+body.embed .button.logo-button:hover,
+.layout-multiple-columns .column-inline-form button:hover,
+.layout-multiple-columns .explore__suggestions .account-card__actions__button button:hover,
+.layout-multiple-columns .account__header__tabs__buttons .icon-button.active {
+ color: var(--color-light-text);
+}
+
+.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa::before {
+ font-size: 17px;
+}
+
+.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-bell-o::before,
+.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-bell::before {
+ content: var(--icon-bell-header-tabs);
+}
+
+.layout-multiple-columns .account__header__tabs__buttons .icon-button.active .fa-bell-o::before,
+.layout-multiple-columns .account__header__tabs__buttons .icon-button.active .fa-bell::before {
+ content: var(--icon-bell-header-tabs-active);
+}
+
+.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa-ellipsis-v::before {
+ position: relative;
+ top: -2px;
+}
+
+.layout-multiple-columns .explore__suggestions .account-card__actions__button button:hover,
+.layout-multiple-columns .account__header__tabs__buttons .button:focus,
+.layout-multiple-columns .account__header__tabs__buttons .button:hover {
+ background-color: var(--color-profile-button-hover);
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:focus,
+.layout-multiple-columns .status__action-bar .icon-button:focus,
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover,
+.layout-multiple-columns .status__action-bar .icon-button:hover {
+ background-color: transparent;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover::after,
+.layout-multiple-columns .status__action-bar .icon-button:hover::after {
+ opacity: 1;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button::after,
+.layout-multiple-columns .status__action-bar .icon-button::after {
+ background-color: rgba(96, 105, 132, .15);
+ border-radius: 50%;
+ content: '';
+ height: 36px;
+ left: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ top: -8px;
+ transform: translateX(1px) translateY(0px);
+ width: 36px;
+ z-index: -1;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button.star-icon::after,
+.layout-multiple-columns .status__action-bar .icon-button.star-icon::after {
+ transform: translateX(2px) translateY(1px);
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:has(.fa-ellipsis-h)::after,
+.layout-multiple-columns .status__action-bar .icon-button:has(.fa-ellipsis-h)::after {
+ transform: translateX(7px) translateY(1px);
+}
+
+.layout-multiple-columns .conversation .icon-button::after {
+ transform: translateX(-8px) translateY(1px);
+}
+
+.layout-multiple-columns .conversation__content {
+ overflow: visible;
+}
+
+.layout-multiple-columns .detailed-status__button {
+ position: relative;
+}
+
+.layout-multiple-columns .detailed-status__button .icon-button.star-icon::after {
+ transform: translateX(3px);
+}
+
+.layout-multiple-columns .status__action-bar .icon-button.icon-button--with-counter::after {
+ transform: translateX(-6px) translateY(2px);
+}
+
+/* Misc UI fixes */
+.layout-multiple-columns .search__icon .fa.active {
+ opacity: 1;
+}
+
+/* Explore -> For you shade in bio */
+.layout-multiple-columns .scrollable .account-card__bio::after {
+ /* stylelint-disable-next-line */
+ background: linear-gradient(270deg, var(--color-bg), transparent);
+}
+
+/* Empty column */
+.layout-multiple-columns .empty-column-indicator {
+ min-height: 120px;
+}
+
+.layout-multiple-columns .status__prepend + .status {
+ padding-top: 10px;
+}
+
+.layout-multiple-columns .search__icon .fa-times-circle {
+ top: 14px;
+}
+
+.layout-multiple-columns .setting-text__toolbar {
+ align-items: center;
+}
+
+.layout-multiple-columns .timeline-hint strong {
+ display: block;
+ margin-bottom: var(--gap-default);
+}
+
+.layout-multiple-columns .timeline-hint br {
+ display: none;
+}
+
+/* General fixes */
+.layout-multiple-columns .account__header__bar .avatar {
+ /* stylelint-disable-next-line */
+ margin-left: 0 !important;
+}
+
+/* Fix for button line-height */
+.layout-multiple-columns .button.logo-button {
+ line-height: 22px;
+}
+
+/* Visual indicator about direct messages
+ @source https://github.com/mastodon/mastodon/issues/22158#issuecomment-1353661031 */
+
+.layout-multiple-columns .detailed-status-direct {
+ position: relative;
+}
+
+.layout-multiple-columns .status__wrapper-direct::after,
+.layout-multiple-columns .detailed-status-direct::after {
+ border-left: 20px solid transparent;
+ border-top: 20px solid var(--color-accent);
+ /* Add a ribbon to the corner */
+ content: '';
+ height: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 0;
+}
+
+.layout-multiple-columns .notification .status__wrapper-direct::after {
+ top: -40px;
+}
+
+/* Private message conversations */
+.layout-multiple-columns .conversation .status__action-bar {
+ padding-left: 0;
+}
+
+/* Default buttons */
+.layout-multiple-columns .compose-form__buttons button,
+.layout-multiple-columns .button {
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+}
+
+/* Compose hover and focus fix */
+.layout-multiple-columns .report-dialog-modal__actions .button:hover,
+.layout-multiple-columns .server-banner .button,
+.layout-multiple-columns .sign-in-banner .button,
+.layout-multiple-columns .ui__header__links .button,
+.layout-multiple-columns .compose-form__publish-button-wrapper button {
+ background-color: var(--color-accent-dark);
+ border-color: var(--color-accent-dark);
+ color: var(--color-button-text);
+ transition: all 200ms;
+}
+
+/* Compose form */
+.layout-multiple-columns .compose-panel .compose-form {
+ background-color: transparent;
+ margin-bottom: 0;
+ position: relative;
+ z-index: 4;
+}
+
+/* Footer items */
+.link-footer {
+ position: relative;
+ z-index: 5;
+}
+
+.layout-multiple-columns .compose-panel .compose-form,
+.layout-multiple-columns .compose-panel,
+.layout-multiple-columns .compose-form__autosuggest-wrapper {
+ overflow: visible;
+}
+
+/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
+@media (min-width: 889px) {
+ .layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
+ /* stylelint-disable-next-line */
+ max-height: 20vh !important; /* stylelint-disable-next-line */
+ overflow-y: auto !important;
+ resize: none;
+ }
+}
+
+@media (min-width: 889px) and (max-height: 1000px) {
+ .layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
+ /* stylelint-disable-next-line */
+ max-height: 10vh !important;
+ resize: none;
+ }
+}
+
+.layout-multiple-columns .server-banner .button:hover,
+.layout-multiple-columns .server-banner .button:focus,
+.layout-multiple-columns .sign-in-banner .button:hover,
+.layout-multiple-columns .sign-in-banner .button:hover:focus,
+.layout-multiple-columns .ui__header__links .button:hover,
+.layout-multiple-columns .ui__header__links .button:focus,
+.layout-multiple-columns .compose-form__publish-button-wrapper button:hover,
+.layout-multiple-columns .compose-form__publish-button-wrapper button:focus {
+ background-color: var(--color-brand-mastodon-links);
+ border-color: var(--color-brand-mastodon-links);
+ color: var(--color-button-text);
+}
+
+/* Tertiary button */
+.layout-multiple-columns .button.button-tertiary {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ /* stylelint-disable-next-line */
+ border: 1px solid var(--color-accent-dark) !important;
+ color: var(--color-ghost-button-text);
+ padding: 6px 17px;
+}
+
+.layout-multiple-columns .button.button-tertiary:active,
+.layout-multiple-columns .button.button-tertiary:focus,
+.layout-multiple-columns .button.button-tertiary:hover {
+ border: 1px solid var(--color-accent-dark);
+}
+
+/* Secondary button */
+.layout-multiple-columns .button.button-secondary {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ border: 1px solid var(--color-dim);
+ color: var(--color-dim);
+}
+
+.layout-multiple-columns .button.button-secondary:hover {
+ /* stylelint-disable-next-line */
+ background-color: var(--color-light-text) !important;
+ border-color: var(--color-light-text);
+ color: var(--color-bg);
+}
+
+.layout-multiple-columns .button.button-tertiary:focus,
+.layout-multiple-columns .button.button-tertiary:hover {
+ /* stylelint-disable-next-line */
+ background-color: var(--color-brand-mastodon-links) !important;
+ /* stylelint-disable-next-line */
+ border-color: var(--color-brand-mastodon-links) !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-bg) !important;
+
+ /* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */
+ padding: 6px 17px;
+}
+
+/* Smaller icon for back button */
+.layout-multiple-columns .column-back-button i,
+.layout-multiple-columns .column-header__back-button i {
+ font-size: 12px;
+}
+
+.layout-multiple-columns .icon-button__counter {
+ font-size: var(--font-size-smaller);
+}
+
+.layout-multiple-columns .notification__favourite-icon-wrapper .fa.fa-retweet {
+ color: var(--color-green);
+}
+
+/* Smaller icons for status action bar */
+.layout-multiple-columns .status__action-bar .fa {
+ font-size: 14.6px;
+ min-width: 18px;
+}
+
+.layout-multiple-columns .status__action-bar .icon-button--with-counter {
+ align-items: center;
+ display: inline-flex;
+ gap: 6px;
+}
+
+.layout-multiple-columns .status__action-bar .icon-button {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: unset !important;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: unset !important;
+}
+
+@media screen and (min-width: 890px) {
+ /* Hide the space between Lists and the actual lists */
+ .layout-multiple-columns .list-panel > hr,
+ .layout-multiple-columns .list-panel + hr {
+ display: none;
+ }
+
+ /* Hide lists if there's not enough space on desktop vertically */
+ .layout-multiple-columns .list-panel {
+ display: none;
+ opacity: 0;
+ transition: all 200ms;
+ }
+
+ .layout-multiple-columns .list-panel:focus,
+ .layout-multiple-columns .list-panel:hover,
+ .layout-multiple-columns .column-link[href="/lists"]:focus ~ .list-panel,
+ .layout-multiple-columns .column-link[href="/lists"]:hover ~ .list-panel {
+ display: block;
+ opacity: 1;
+ }
+
+
+ /* Order of the side nav items */
+ .layout-multiple-columns .navigation-panel__logo {
+ order: 1;
+ }
+
+ .layout-multiple-columns .column-link[href="/home"] {
+ order: 2;
+ }
+
+ .layout-multiple-columns .column-link[href="/notifications"] {
+ order: 3;
+ }
+
+ .layout-multiple-columns .column-link[href="/explore"] {
+ order: 4;
+ }
+
+ .layout-multiple-columns .column-link[href="/public/local"] {
+ order: 5;
+ }
+
+ .layout-multiple-columns .column-link[href="/public"] {
+ order: 6;
+ }
+
+ .layout-multiple-columns .column-link[href="/conversations"] {
+ order: 7;
+ }
+
+ .layout-multiple-columns .column-link[href='/follow_requests'] {
+ order: 8;
+ }
+
+ .layout-multiple-columns .column-link[href="/bookmarks"] {
+ order: 9;
+ }
+
+ .layout-multiple-columns .column-link[href="/favourites"] {
+ order: 10;
+ }
+
+ .layout-multiple-columns .column-link[href="/lists"] {
+ order: 12;
+ }
+
+ /* stylelint-disable-next-line no-duplicate-selectors */
+ .layout-multiple-columns .list-panel {
+ order: 13;
+ }
+
+ .layout-multiple-columns .column-link[href="/settings/preferences"] {
+ order: 11;
+ }
+
+ .layout-multiple-columns .navigation-panel__sign-in-banner,
+ .layout-multiple-columns .navigation-panel__legal {
+ order: 14;
+ }
+
+ .layout-multiple-columns .flex-spacer {
+ order: 15;
+ }
+
+ .layout-multiple-columns .getting-started__trends {
+ order: 16;
+ }
+
+ .layout-multiple-columns .status__action-bar .icon-button {
+ position: relative;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 50px !important;
+ }
+
+ .layout-multiple-columns .conversation .status__action-bar .icon-button {
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: auto !important;
+ }
+
+ /* Fix list links if they are too short */
+ .layout-multiple-columns .list-panel .column-link {
+ display: flex;
+ }
+}
+
+/* Replace bookmark icon */
+.layout-multiple-columns .detailed-status .fa-bookmark::before,
+.layout-multiple-columns .status .fa-bookmark::before {
+ content: var(--icon-bookmark);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .column-link .fa-bookmark::before {
+ content: var(--icon-bookmark-column-link);
+}
+
+.layout-multiple-columns .column-link.active .fa-bookmark::before {
+ content: var(--icon-bookmark-column-link-active);
+}
+
+/* Replace bookmark icon */
+.layout-multiple-columns .status .icon-button:hover:focus .fa-bookmark::before,
+.layout-multiple-columns .status .icon-button:focus .fa-bookmark::before,
+.layout-multiple-columns .status .icon-button.active .fa-bookmark::before {
+ content: var(--icon-bookmark-active);
+}
+
+.layout-multiple-columns .status button.icon-button:hover .fa-bookmark::before {
+ content: var(--icon-bookmark-status-hover);
+}
+
+/* Notifications icon */
+.layout-multiple-columns .column-link .fa-bell::before {
+ content: var(--icon-bell);
+}
+
+.layout-multiple-columns .column-link.active .fa-bell::before {
+ content: var(--icon-bell-active);
+}
+
+/* Home icon */
+.layout-multiple-columns .notification__filter-bar .fa-home::before {
+ content: var(--icon-home-notification);
+}
+
+.layout-multiple-columns .notification__filter-bar .active .fa-home::before {
+ content: var(--icon-home-notification-active);
+}
+
+.layout-multiple-columns .column-link .fa-home::before {
+ content: var(--icon-home);
+ position: relative;
+ top: 1px;
+}
+
+/* Federated icon */
+.layout-multiple-columns .column-link .fa-globe::before {
+ content: var(--icon-globe);
+}
+
+.layout-multiple-columns .column-link.active .fa-home::before {
+ content: var(--icon-home-column-link-active);
+}
+
+/* Explore icon */
+.layout-multiple-columns .column-link .fa-hashtag::before {
+ content: var(--icon-hashtag);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .column-link.active .fa-hashtag::before {
+ content: var(--icon-hashtag-active);
+ position: relative;
+ top: 1px;
+}
+
+/* Local icon */
+.layout-multiple-columns .column-link .fa-users::before {
+ content: var(--icon-users-column-link);
+ position: relative;
+ top: 2px;
+}
+
+.layout-multiple-columns .column-link.active .fa-users::before {
+ content: var(--icon-users-column-link-active);
+}
+
+/* Direct messages icon */
+.layout-multiple-columns .column-link .fa-at::before {
+ content: var(--icon-direct-messages);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .column-link.active .fa-at {
+ transform: scale(1.15);
+}
+
+.layout-multiple-columns .column-link.active .fa-at::before {
+ content: var(--icon-direct-messages-active);
+ position: relative;
+ top: 2px;
+}
+
+/* Replace share icon */
+.layout-multiple-columns .detailed-status .fa-share-alt::before,
+.layout-multiple-columns .status .fa-share-alt::before {
+ content: var(--icon-share);
+}
+
+.layout-multiple-columns .status button.icon-button:hover .fa-share-alt::before {
+ content: var(--icon-share-hover);
+}
+
+/* Replace retweet icon */
+.layout-multiple-columns .notification__filter-bar .fa-retweet::before {
+ content: var(--icon-boost-notification-filter-bar);
+ position: relative;
+ top: 2px;
+}
+
+.layout-multiple-columns .notification__filter-bar .active .fa-retweet::before {
+ content: var(--icon-boost-notification-filter-bar-active);
+ position: relative;
+ top: 2px;
+}
+
+.layout-multiple-columns .notification__filter-bar .fa-tasks::before,
+.layout-multiple-columns .notification__filter-bar .fa-user-plus::before {
+ font-size: 18px;
+}
+
+.layout-multiple-columns .notification__filter-bar .active .fa-mailre-ply::before,
+.layout-multiple-columns .notification__filter-bar .active .fa-reply-all::before,
+.layout-multiple-columns .notification__filter-bar .active .fa-reply::before {
+ content: var(--icon-reply-nofitication-filter-bar-active);
+}
+
+.layout-multiple-columns .detailed-status button.icon-button i.fa-retweet,
+.layout-multiple-columns .status button.icon-button i.fa-retweet {
+ background-image: var(--icon-boost-status);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+/* Replace notification retweet icon */
+.layout-multiple-columns .notification__favourite-icon-wrapper .fa-retweet::before {
+ content: var(--icon-boost-notification-wrapper);
+ position: relative;
+ top: 2px;
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns button.icon-button i.fa-retweet {
+ background-image: var(--icon-boost);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.layout-multiple-columns button.icon-button:hover i.fa-retweet,
+.layout-multiple-columns button.icon-button.active i.fa-retweet {
+ background-image: var(--icon-boost-active);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+/* Un-boost and un-bookmark styles */
+/* Mobile devices */
+.layout-multiple-columns button.icon-button:not(.active):focus i.fa-retweet,
+.layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet {
+ animation: none;
+ background-image: var(--icon-boost);
+}
+
+.layout-multiple-columns .status button.icon-button:not(.active):focus .fa-bookmark::before,
+.layout-multiple-columns .status button.icon-button:not(.active):hover .fa-bookmark::before {
+ content: var(--icon-bookmark);
+}
+
+
+/* Un-boost and un-bookmark numbers on explore page */
+.layout-multiple-columns button.icon-button:not(.active):focus i.fa-retweet ~ span,
+.layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet ~ span {
+ color: var(--color-dim);
+}
+
+
+/* If a hover device */
+@media (hover: hover) {
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet,
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet ~ span {
+ color: var(--color-green);
+ }
+
+ .layout-multiple-columns .status button.icon-button:not(.active):hover i.fa-bookmark::before {
+ /* stylelint-disable-next-line */
+ content: var(--icon-bookmark-status-hover-red);
+ }
+
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet {
+ /* stylelint-disable-next-line */
+ background-image: var(--icon-boost-active) !important;
+ }
+}
+
+.layout-multiple-columns button.icon-button:hover i.fa-retweet ~ span,
+.layout-multiple-columns button.icon-button.active i.fa-retweet ~ span {
+ color: var(--color-green);
+}
+
+.layout-multiple-columns button.icon-button:hover i.fa-star ~ span,
+.layout-multiple-columns button.icon-button.active i.fa-star ~ span {
+ color: var(--color-red);
+}
+
+/* Replace reply icon */
+.layout-multiple-columns .notification__filter-bar .fa-mail-reply::before,
+.layout-multiple-columns .notification__filter-bar .fa-reply::before,
+.layout-multiple-columns .notification__filter-bar .fa-reply-all::before {
+ position: relative;
+ top: 4px;
+}
+
+.layout-multiple-columns .conversation .fa-reply::before,
+.layout-multiple-columns .notification__filter-bar .fa-mail-reply::before,
+.layout-multiple-columns .notification__filter-bar .fa-reply::before,
+.layout-multiple-columns .notification__filter-bar .fa-reply-all::before,
+.layout-multiple-columns .detailed-status .fa-mail-reply::before,
+.layout-multiple-columns .detailed-status .fa-reply::before,
+.layout-multiple-columns .detailed-status .fa-reply-all::before,
+.layout-multiple-columns .status .fa-mail-reply::before,
+.layout-multiple-columns .status .fa-reply::before,
+.layout-multiple-columns .status .fa-reply-all::before {
+ content: var(--icon-reply);
+ position: relative;
+ top: 2px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .fa-mail-reply::before,
+.layout-multiple-columns .detailed-status__action-bar .fa-reply::before,
+.layout-multiple-columns .detailed-status__action-bar .fa-reply-all::before {
+ content: var(--icon-reply-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-mail-reply::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply-all::before {
+ content: var(--icon-reply-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .conversation .icon-button:hover .fa-reply::before {
+ content: var(--icon-reply-conversation);
+}
+
+.layout-multiple-columns .detailed-status__action-bar .fa-share::before,
+.layout-multiple-columns .detailed-status__action-bar .fa-share-alt::before {
+ content: var(--icon-share-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-share::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-share-alt::before {
+ content: var(--icon-share-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button.active .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar-active);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .status button.icon-button:hover .fa-mail-reply::before,
+.layout-multiple-columns .status button.icon-button:hover .fa-reply::before,
+.layout-multiple-columns .status button.icon-button:hover .fa-reply-all::before {
+ content: var(--icon-reply-status-hover);
+}
+
+/* More icons */
+.layout-multiple-columns .fa-list-ul::before {
+ content: var(--icon-list);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .relationship-tag {
+ background-color: var(--color-mud);
+ color: var(--color-light-text);
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 12px;
+ opacity: 1;
+}
+
+/* iPad etc. */
+@media (max-width: 1174px) {
+ .layout-multiple-columns .detailed-status__action-bar .icon-button::after,
+ .layout-multiple-columns .status__action-bar .icon-button::after,
+ .layout-multiple-columns .detailed-status__action-bar-dropdown .icon-button::after {
+ display: none;
+ }
+
+ .layout-multiple-columns .ui__header,
+ .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-multiple-columns .tabs-bar__wrapper {
+ backdrop-filter: unset;
+ background-color: transparent;
+ padding: 0;
+ }
+
+ .layout-multiple-columns .columns-area__panels__main {
+ width: calc(100% - var(--width-side-panel));
+ }
+}
+
+/* In-between breakpoint */
+@media (min-width: 889px) and (max-width: 1174px) {
+ .layout-multiple-columns .columns-area__panels__main > div {
+ border-right: 0;
+ }
+
+ .layout-multiple-columns .ui__header,
+ .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-multiple-columns .tabs-bar__wrapper {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ border-color: var(--color-border);
+ }
+
+ .layout-multiple-columns .columns-area__panels {
+ width: calc(100% - 1px);
+ }
+
+ .layout-multiple-columns .columns-area__panels__main > .tabs-bar__wrapper {
+ border-right: 0;
+ }
+}
+
+/* Mobile */
+@media screen and (max-width: 889px) {
+ /* Better blur overlay for ui-header */
+ .layout-multiple-columns .ui::after {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ content: '';
+ /* Height is .ui__header + .tabs-bar__wrapper */
+ height: calc(48px + 56px);
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ }
+
+ /* Fix navigation-bar getting underneath layer */
+ .layout-multiple-columns .navigation-bar {
+ z-index: 2;
+ }
+
+ .layout-multiple-columns .tabs-bar__wrapper {
+ margin-right: 0;
+ position: sticky;
+ top: 55px;
+ z-index: 2;
+ }
+
+ .layout-multiple-columns .columns-area__panels__main {
+ order: 1;
+ position: unset;
+ width: 100%;
+ }
+
+ .layout-multiple-columns .columns-area__panels {
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ .layout-multiple-columns .columns-area__panels__main::-webkit-scrollbar {
+ display: none;
+ }
+
+ .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+ background-color: var(--color-bg);
+ border-top: 1px solid var(--color-border);
+ bottom: 0;
+ height: 3.5rem;
+ left: 0;
+ max-height: 16vh;
+ width: 100vw;
+ }
+
+ .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel {
+ flex-direction: row;
+ gap: 0;
+ height: 100%;
+ overflow-x: auto;
+ padding: 0;
+ }
+
+ .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
+ display: none;
+ }
+
+ .layout-multiple-columns .column-link {
+ justify-content: center;
+ margin-right: unset;
+ padding-bottom: 0;
+ padding-left: var(--gap-default);
+ padding-right: var(--gap-default);
+ padding-top: 0;
+ width: 38px;
+ }
+
+ .layout-multiple-columns .item-list .column-link {
+ padding-bottom: 4px;
+ padding-top: 4px;
+ width: unset;
+ }
+
+ .layout-multiple-columns .column-link:hover,
+ .layout-multiple-columns .column-link:focus {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-home {
+ font-size: 27px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-ellipsis-h {
+ position: relative;
+ top: -4px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-users,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
+ font-size: 20px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon {
+ font-size: 24px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-fw {
+ font-size: 22px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-star,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bookmark,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
+ font-size: 18px;
+ position: relative;
+ top: 1px;
+ }
+
+ .layout-multiple-columns .columns-area__panels__main > div,
+ .layout-multiple-columns .columns-area__panels__main > div.columns-area.columns-area--mobile {
+ border: 0;
+ }
+
+ .layout-multiple-columns .ui__header {
+ align-items: center;
+ border-bottom: 0;
+ box-sizing: border-box;
+ display: flex;
+ height: 56px;
+ justify-content: space-between;
+ position: sticky;
+ top: 0;
+ width: 100%;
+ z-index: 2;
+ }
+
+ .layout-multiple-columns .account__header__bar .avatar .account__avatar {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: 106px !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 106px !important;
+ }
+
+ .layout-multiple-columns .account__header__image {
+ height: 157px;
+ }
+
+ .layout-multiple-columns .column > .scrollable {
+ padding-bottom: 55px;
+ }
+
+ .layout-multiple-columns .actions-modal ul li:not(:empty) a {
+ color: var(--color-light-text);
+ }
+
+ /* "Your lists" view */
+ .layout-multiple-columns .column-subheading ~ article {
+ padding-bottom: calc(var(--gap-default) / 2);
+ padding-top: calc(var(--gap-default) / 2);
+ }
+
+ .layout-multiple-columns .compose-form {
+ padding-bottom: calc(3.5rem + calc(var(--gap-default) * 2));
+ }
+
+ /* Column items order */
+ .layout-multiple-columns .navigation-panel .column-link,
+ .layout-multiple-columns .navigation-panel .list-panel,
+ .layout-multiple-columns .navigation-panel hr,
+ .layout-multiple-columns .navigation-panel .navigation-panel__logo {
+ order: 99;
+ }
+
+ /* Make the column link 1/4 of width of the screen */
+ .layout-multiple-columns .navigation-panel .navigation-panel__legal,
+ .layout-multiple-columns .navigation-panel .column-link {
+ flex: 0 0 calc(100vw / 4);
+ padding: 0;
+ }
+
+ .layout-multiple-columns .navigation-panel .navigation-panel__legal {
+ order: 999;
+ text-align: center;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(1) {
+ order: 2;
+ }
+
+ /* Home */
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(2) {
+ order: 1;
+ }
+
+ /* Notifications */
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(3) {
+ order: 4;
+ }
+
+ /* Explore */
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(4) {
+ order: 2;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(5) {
+ order: 5;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(6) {
+ order: 6;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(7) {
+ order: 7;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(8) {
+ order: 8;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(9) {
+ order: 9;
+ }
+
+ /* Lists */
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(10) {
+ order: 4;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(11) {
+ order: 11;
+ }
+
+ .layout-multiple-columns .navigation-panel .column-link:nth-child(12) {
+ order: 12;
+ }
+}
+
+/* Retweet animation */
+/* stylelint-disable-next-line selector-not-notation */
+.layout-multiple-columns.no-reduce-motion .icon-button.active:not([aria-label="Unboost"]):not([aria-label="Peru tehostus"]) .fa-retweet {
+ /* stylelint-disable-next-line */
+ animation: spring-rotate-in 1s linear;
+}
+
+.layout-multiple-columns.no-reduce-motion .icon-button:focus .fa-retweet {
+ /* stylelint-disable-next-line */
+ animation: spring-rotate-in 1s linear;
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button {
+ position: relative;
+}
+
+.layout-multiple-columns .detailed-status__action-bar-dropdown .icon-button::after,
+.layout-multiple-columns .detailed-status__button .icon-button::after {
+ transform: translateX(-6px);
+}
+
+/* Add border radius to media */
+.layout-multiple-columns .media-gallery,
+.layout-multiple-columns .audio-player,
+.layout-multiple-columns .video-player,
+.layout-multiple-columns .media-gallery__gifv,
+.layout-multiple-columns .media-gallery__preview {
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+.layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt]))::after,
+.layout-multiple-columns .video-player:has(> video:not([title]))::after,
+.layout-multiple-columns .media-gallery__gifv:has(> video:not([title]))::after {
+ align-self: flex-end;
+ background-color: var(--color-bg-75);
+ border-radius: 4px;
+ bottom: 4px;
+ color: var(--color-light-text);
+ content: 'No alt';
+ display: flex;
+ font-size: 9px;
+ font-weight: 500;
+ height: 14px;
+ justify-self: flex-end;
+ left: auto;
+ line-height: 14px;
+ opacity: 1;
+ padding: 2px 5px;
+ position: absolute;
+ right: 4px;
+ text-transform: uppercase;
+ top: auto;
+ width: unset;
+ z-index: 3;
+}
+
+.layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt])):focus::after,
+.layout-multiple-columns .video-player:has(> video:not([title])):focus::after,
+.layout-multiple-columns .media-gallery__gifv:has(> video:not([title])):focus::after,
+.layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt])):hover::after,
+.layout-multiple-columns .video-player:has(> video:not([title])):hover::after,
+.layout-multiple-columns .media-gallery__gifv:has(> video:not([title])):hover::after {
+ background-color: var(--color-red);
+}
+
+/* More distinct focus color for accessibility, instead of just white */
+.layout-multiple-columns input:focus-visible {
+ outline-color: var(--color-accent);
+ outline-style: solid;
+}
+
+/* Embeds outside Mastodon */
+body.embed .entry .detailed-status {
+ backface-visibility: hidden;
+ background-color: #00000059;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ border-radius: 10px !important;
+ overflow: hidden;
+}
+
+/* Verified */
+.layout-multiple-columns .account__header__fields .verified a,
+.layout-multiple-columns .account__header__bio .account__header__fields .verified a,
+.layout-multiple-columns .account__header__bio .account__header__fields .verified dd,
+.layout-multiple-columns .account__header__bio .account__header__fields .verified dt {
+ color: var(--color-verified);
+}
+
+/* Destructive colors (For you -suggestions, users when focused to the follow button */
+.layout-multiple-columns .button.logo-button.button--destructive:active,
+.layout-multiple-columns .button.logo-button.button--destructive:focus {
+ background-color: var(--color-destructive);
+ border-color: var(--color-destructive);
+}
+
+/* Fix character counter color when it's over the limit */
+.layout-multiple-columns .character-counter.character-counter--over {
+ color: var(--color-destructive);
+}
+
+/* Follow hashtag icon */
+.layout-multiple-columns .column-header__button .column-header__icon.fa-user-plus::before {
+ content: var(--icon-follow-hashtag);
+ position: relative;
+ top: 2px;
+}
+
+/* Unfollow hashtag icon */
+.layout-multiple-columns .column-header__button .column-header__icon.fa-user-times::before {
+ content: var(--icon-unfollow-hashtag);
+ position: relative;
+ top: 2px;
+}
+
+/* Show more in server banner */
+.layout-multiple-columns .server-banner__meta__column {
+ max-width: 60%;
+ width: unset;
+}
+
+/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors, selector-max-specificity, selector-max-pseudo-class, selector-not-notation */
+/* Threaded replies, see https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/4 */
+.layout-multiple-columns .scrollable > div > div .status.status-reply {
+ border-color: transparent;
+ position: relative;
+}
+
+/* If we don't have threads support yet, just use borders */
+.layout-multiple-columns .scrollable > div:not(:has(.status__thread)) .status.status-reply {
+ border-color: var(--color-border);
+}
+
+/* Always have border-bottom in threads on main level to separate the discussions */
+.layout-multiple-columns .scrollable > div > div.status__thread,
+.layout-multiple-columns .scrollable > div > div.status__thread:has(.status__thread) > div.status__thread:not(.status__thread--last-item),
+.layout-multiple-columns .scrollable > div > div:not([class]) > div.status__thread {
+ border-bottom: 1px solid var(--color-border);
+}
+
+.layout-multiple-columns .scrollable > div > div.status__thread > div.status__thread:not(.status__thread--last-item):not(:has(.status__thread--last-item)) {
+ border-bottom: 0;
+}
+
+/* If we don't have threads support yet, hide faux lines */
+.layout-multiple-columns .scrollable > div:not(:has(.status__thread)) .status.status-reply .status__avatar::before {
+ background-color: transparent;
+ width: 0;
+}
+
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread > div > div > .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread ~ .status__thread--first-item + .status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread.status__thread--last-item.status__thread--first-item .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread ~ .status__thread .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread.status__thread--first-item + .status__thread.status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread + .status__thread ~ .status__thread ~ .status__thread .status.status-reply .status__avatar::before {
+ background-color: var(--color-thread-line);
+ content: '';
+ height: 100%;
+ left: calc(calc(calc(var(--size-avatar) / 2) + 16px) - 1px);
+ position: absolute;
+ top: 24px;
+ width: 2px;
+}
+
+/* Hide thread lines from the last items for at least 10 levels */
+.layout-multiple-columns .scrollable > div > div.status__thread:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread:not(:has(.status__thread)).status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-multiple-columns .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+}
+
+.layout-multiple-columns .scrollable > div > .status__thread.status__thread--first-item .status.status-reply .status__avatar::before {
+ top: 60px;
+}
+
+/* Scrollbars */
+.layout-multiple-columns textarea::-webkit-scrollbar,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar,
+.layout-multiple-columns::-webkit-scrollbar,
+.layout-multiple-columns .scrollable::-webkit-scrollbar {
+ height: 6px;
+ width: 6px;
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-thumb,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb,
+.layout-multiple-columns::-webkit-scrollbar-thumb,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb {
+ background-color: var(--color-border);
+ border: 0px solid var(--color-border);
+ border-radius: 50px;
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-thumb:hover,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb:hover,
+.layout-multiple-columns::-webkit-scrollbar-thumb:hover,
+.layout-multiple-columns .scrollable:-webkit-scrollbar-thumb:hover {
+ background-color: var(--color-light-purple);
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-thumb:active,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb:active,
+.layout-multiple-columns::-webkit-scrollbar-thumb:active,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:active {
+ background-color: var(--color-black-coral);
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-track,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-track,
+.layout-multiple-columns::-webkit-scrollbar-track,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-track {
+ background-color: var(--color-bg);
+ border: 0px solid var(--color-border);
+ border-radius: 0;
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-track:hover,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-track:hover,
+.layout-multiple-columns::-webkit-scrollbar-track:hover,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-track:hover {
+ background-color: var(--color-bg);
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-track:active,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:active,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-track:active,
+.layout-multiple-columns::-webkit-scrollbar-track:active,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-track:active {
+ background-color: var(--color-bg);
+}
+
+.layout-multiple-columns textarea::-webkit-scrollbar-corner,
+.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-corner,
+.layout-multiple-columns .reply-indicator::-webkit-scrollbar-corner,
+.layout-multiple-columns::-webkit-scrollbar-corner,
+.layout-multiple-columns .scrollable::-webkit-scrollbar-corner {
+ background-color: transparent;
+}
+
+/*
+ * Heart animation micro-interactions start
+ * ----------------------------------------
+ */
+
+@keyframes heart-animate {
+ 100% {
+ background-position: -2800px;
+ }
+}
+
+/* Left sidebar column links */
+.layout-multiple-columns .column-link .fa-star::before {
+ content: var(--icon-heart-column-link);
+}
+
+@media (min-width: 889px) {
+ .layout-multiple-columns .column-link .fa-star::before {
+ position: relative;
+ top: 2px;
+ }
+}
+
+.layout-multiple-columns .column-link.active .fa-star::before {
+ content: var(--icon-heart-column-link-active);
+}
+
+.layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before {
+ content: var(--icon-heart-notification);
+}
+
+.layout-multiple-columns .notification__filter-bar .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button .fa-star::before,
+.layout-multiple-columns .status__action-bar .icon-button .fa-star::before {
+ content: var(--icon-heart);
+ position: relative;
+ top: 1px;
+}
+
+.layout-multiple-columns .notification__filter-bar .active .fa-star::before {
+ content: var(--icon-heart-active);
+}
+
+.layout-multiple-columns .detailed-status__action-bar .active:not(.activated) .fa-star::before,
+.layout-multiple-columns .status__action-bar .active:not(.activated) .fa-star::before {
+ content: var(--icon-heart-active-red);
+}
+
+.layout-multiple-columns .notification__filter-bar .fa-star::before {
+ position: relative;
+ top: 2px;
+}
+
+.icon-button.star-icon.active,
+.notification__favourite-icon-wrapper .star-icon {
+ color: var(--color-red);
+}
+
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before,
+.layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before,
+.layout-multiple-columns .status button.icon-button:hover .fa-star::before {
+ content: var(--icon-heart-hover);
+}
+
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon {
+ min-height: 23px;
+ min-width: 42.22px;
+ position: relative;
+}
+
+/* Disable default Mastodon animation: spring-rotate-in 1s linear; */
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon .fa-star {
+ /* stylelint-disable-next-line */
+ animation: none !important;
+}
+
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate:hover .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: '' !important;
+}
+
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before {
+ animation: heart-animate 0.8s steps(28) forwards;
+ /* stylelint-disable-next-line */
+ background-image: url(data:image/png;base64,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);
+ background-position: 0px;
+ background-repeat: no-repeat;
+ /* stylelint-disable-next-line */
+ content: '' !important;
+ height: 100px;
+ left: -38px;
+ pointer-events: none;
+ position: absolute;
+ top: -38px;
+ transform: scale(.6);
+ width: 100px;
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before {
+ left: -24px;
+}
+
+@media screen and (max-width: 889px) {
+ /* stylelint-disable-next-line */
+ .layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before {
+ left: -28px;
+ }
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate .fa-star::before {
+ left: -38px;
+}
+
+/* stylelint-disable-next-line */
+.layout-multiple-columns.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .fa-star::before {
+ left: -29px;
+}
+
+/*
+ * --------------------------------------
+ * Heart animation micro-interactions end
+ */
+
+/*
+ * Star animation micro-interactions start (depends on the heart icon above)
+ * If you prefer hearts, remove everything below this comment until
+ * "Star animation micro-interactions end"
+ * -------------------------------------------------------------------------
+ */
+
+/* If a hover device */
+@media (hover: hover) {
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star,
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star ~ span,
+ .layout-multiple-columns button.icon-button:not(.active):hover i.fa-star::before {
+ color: var(--color-yellow);
+ }
+
+ .layout-multiple-columns button.icon-button.active:hover i.fa-star ~ span {
+ color: var(--color-dim);
+ }
+}
+
+/* stylelint-disable no-duplicate-selectors */
+/* Left sidebar column links */
+.layout-multiple-columns .column-link .fa-star::before {
+ content: var(--icon-star-column-link);
+}
+
+.layout-multiple-columns .column-link.active .fa-star::before {
+ content: var(--icon-star-column-link-active);
+}
+
+.layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before {
+ content: var(--icon-star-notification);
+}
+
+/* Replace notification tab bar icon with star */
+.layout-multiple-columns .notification__filter-bar .active .fa-star::before {
+ content: var(--icon-star-active);
+}
+
+/* Numbers on hover */
+.layout-multiple-columns button.icon-button:hover i.fa-star ~ span {
+ color: var(--color-dim);
+}
+
+/* Numbers when the star is active/activated */
+.layout-multiple-columns button.icon-button.activate i.fa-star ~ span,
+.layout-multiple-columns button.icon-button.active i.fa-star ~ span {
+ color: var(--color-yellow);
+}
+
+/* The actual star icon */
+.layout-multiple-columns .notification__filter-bar .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button .fa-star::before,
+.layout-multiple-columns .status__action-bar .icon-button .fa-star::before {
+ content: "\f006";
+ font-size: 20px;
+ left: 0;
+ position: relative;
+ top: 0;
+}
+
+/* Active star icon */
+.layout-multiple-columns .notification__filter-bar button.icon-button.active .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.active .fa-star::before,
+.layout-multiple-columns .status__action-bar button.icon-button.active .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: "\f005" !important;
+ display: block;
+}
+
+/* Active star when activated */
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before {
+ animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1;
+ /* stylelint-disable-next-line */
+ background-color: unset !important;
+ /* stylelint-disable-next-line */
+ background-image: none !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-yellow);
+ /* stylelint-disable-next-line */
+ content: "\f005" !important;
+ height: unset;
+ /* stylelint-disable-next-line */
+ left: unset !important;
+ position: relative;
+ top: 0;
+ transform: none;
+ width: unset;
+}
+
+/* Star sparkles, when activated */
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate::after,
+.layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::after {
+ animation: sparkles-width .65s 1, sparkles-size .65s 1;
+ /* stylelint-disable-next-line */
+ background-color: unset !important;
+ content: '';
+ /* stylelint-disable-next-line */
+ height: 50px !important;
+ /* stylelint-disable-next-line */
+ left: 50% !important;
+ margin-left: -24px;
+ margin-top: -20px;
+ opacity: unset;
+ position: absolute;
+ top: calc(50% + 1px);
+ transform: none;
+ /* stylelint-disable-next-line */
+ width: 50px !important;
+ z-index: unset;
+}
+
+/* Ensure everything shows up on mobile */
+.layout-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate::after,
+.layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ display: block !important;
+}
+
+/* Star circle/ring */
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.activate.star-icon::before,
+.layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon::before {
+ animation: ring-border-width .35s 1, ring-size .35s 1;
+ border: 0px solid var(--color-yellow);
+ border-radius: 10em;
+ content: '';
+ height: 0em;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transform-origin: 50px 50px;
+ width: 0em;
+}
+
+.layout-multiple-columns .icon-button.star-icon.active,
+.layout-multiple-columns .notification__favourite-icon-wrapper .star-icon {
+ color: var(--color-yellow);
+}
+
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .fa-star::before,
+.layout-multiple-columns .status__action-bar button.icon-button.deactivate.star-icon:hover .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-butto.deactivate .fa-star::before,
+.layout-multiple-columns .detailed-status button.icon-button.deactivate .fa-star::before,
+.layout-multiple-columns .status button.icon-button.deactivate .fa-star::before {
+ color: var(--color-dim);
+ /* stylelint-disable-next-line */
+ content: '\f006' !important;
+}
+
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
+.layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
+.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before,
+.layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before,
+.layout-multiple-columns .status button.icon-button:hover .fa-star::before {
+ color: var(--color-yellow);
+ /* stylelint-disable-next-line */
+ content: "\f006" !important;
+ position: relative;
+ top: 0;
+}
+
+/* Prevent the star from being highlighted when the button is focused, especially while logged out */
+.layout-multiple-columns .detailed-status__action-bar .icon-button:focus .fa-star::before,
+.layout-multiple-columns .detailed-status button.icon-button:focus .fa-star::before,
+.layout-multiple-columns .status button.icon-button:hover .fa-star::before {
+ color: var(--color-dim);
+}
+
+/* Mobile devices */
+@media (hover: none) {
+ .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
+ .layout-multiple-columns .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
+ .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-star::before,
+ .layout-multiple-columns .detailed-status button.icon-button:hover .fa-star::before,
+ .layout-multiple-columns .status button.icon-button:hover .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: '\f005' !important;
+ }
+}
+
+/* Sparkle offset on numbered item */
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.icon-button--with-counter.star-icon.activate::after,
+.layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 14px) !important;
+
+ /* stylelint-disable-next-line */
+ top: calc(50% + -1px) !important;
+}
+
+/* Circle offset on numbered item */
+.layout-multiple-columns .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before,
+.layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 14px) !important;
+}
+
+/* Fix the sparkle and circle position on small screens on the Explore */
+@media (max-width: 888px) {
+ /* Sparkle offset on numbered item */
+ .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 11px) !important;
+ }
+
+ /* Circle offset on numbered item */
+ .layout-multiple-columns .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before,
+ .layout-multiple-columns .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 11px) !important;
+ }
+}
+
+@keyframes popping {
+ 0% {
+ transform: scale(0, 0);
+ }
+
+ 40% {
+ transform: scale(0, 0);
+ }
+
+ 75% {
+ transform: scale(1.3, 1.3);
+ }
+
+ 100% {
+ transform: scale(1, 1);
+ }
+}
+
+@keyframes ring-border-width {
+ 0% {
+ border-width: 0;
+ }
+
+ 50% {
+ border-width: 0.22em;
+ }
+
+ 100% {
+ border-width: 0;
+ }
+}
+
+@keyframes ring-size {
+ 0% {
+ height: 0;
+ width: 0;
+ }
+
+ 100% {
+ height: 2em;
+ width: 2em;
+ }
+}
+
+@keyframes sparkles-width {
+ 0% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 1% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 2% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 3% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 4% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.5' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 5% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 6% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.1' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 7% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 8% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.7' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 9% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 10% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 11% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='15.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 12% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='16.9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 13% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 14% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 15% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='18' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 16% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 17% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 18% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 19% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 20% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 21% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 22% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 23% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 24% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 25% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 26% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 27% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 28% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 29% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 30% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 31% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 32% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 33% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 34% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 35% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 36% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 37% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 38% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 39% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 40% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 41% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 42% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 43% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 44% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 45% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 46% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 47% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 48% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 49% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 50% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 51% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 52% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 53% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 54% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 55% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 56% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 57% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 58% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 59% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 60% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 61% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 62% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 63% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 64% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 65% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 66% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 67% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 68% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 69% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 70% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 71% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 72% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 73% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 74% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 75% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 76% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 77% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 78% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 79% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 80% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 81% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 82% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 83% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 84% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 86% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 87% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 88% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 89% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 90% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 91% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 92% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 93% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 94% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 95% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 96% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 97% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 98% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 99% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 100% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+}
+
+@keyframes sparkles-size {
+ 0% {
+ transform: scale(0.1, 0.1);
+ }
+
+ 5% {
+ transform: scale(0.1, 0.1);
+ }
+
+ 85% {
+ transform: scale(1, 1);
+ }
+}
+
+/* stylelint-enable no-duplicate-selectors */
+/*
+ * Star animation micro-interactions end
+ * -------------------------------------
+ */
diff --git a/app/javascript/styles/elephant/layout-single-column.scss b/app/javascript/styles/elephant/layout-single-column.scss
new file mode 100644
index 000000000..4f67f28b9
--- /dev/null
+++ b/app/javascript/styles/elephant/layout-single-column.scss
@@ -0,0 +1,4191 @@
+/* Mastodon Bird UI by @rolle@mementomori.social
+ 1.6.4 */
+
+/* CSS variables */
+:root {
+ /* Brand colors */
+ --color-brand-twitter: #1d9bf0;
+ --color-brand-twitter-bg: #15202b;
+ --color-brand-twitter-dim: #8b98a5;
+ --color-brand-twitter-mud: #273340;
+ --color-brand-twitter-dark: #232543;
+ --color-brand-twitter-threaded-line: #425364;
+ --color-brand-mastodon: #595aff;
+ --color-brand-mastodon-links: #8c8dff;
+ --color-brand-mastodon-bg: #1e2028;
+ --color-brand-mastodon-dim: #717c9b;
+ --color-brand-mastodon-mud: #272c40;
+ --color-brand-mastodon-dark: #232543;
+ --color-brand-mastodon-threaded-line: #434264;
+ --color-brand-mastodon-text-light: #8493a7;
+
+ /* Colors */
+ /* Note: Remember to search for the DIM hex
+ and replace it inside the SVG icons if you decide to change it */
+ --color-bg: var(--color-brand-mastodon-bg);
+ --color-bg-75: #1e2028bf;
+ --color-fg: #fff;
+ --color-border: #38384d;
+ --color-dim: var(--color-brand-mastodon-dim);
+ --color-accent: var(--color-brand-mastodon-links);
+ --color-accent-dark: var(--color-brand-mastodon);
+ --color-green: #00ba7c;
+ --color-red: #f91880;
+ --color-red-75: #f91880bf;
+ --color-yellow: #ffac33;
+ --color-light-shade: #ffffff05;
+ --color-focusable-toot: #ffffff09;
+ --color-light-text: #f7f9f9;
+ --color-mud: var(--color-brand-mastodon-mud);
+ --color-black-coral: #5a5371;
+ --color-profile-button-hover: #f1eff41a;
+ --color-column-link-hover: #f7f7f91a;
+ --color-modal-overlay: #5b708366;
+ --color-dark: var(--color-brand-mastodon-dark);
+ --color-thread-line: var(--color-brand-mastodon-threaded-line);
+ --color-gainsboro: #dcd9e8;
+ --color-light-purple: #9baec8;
+ --color-lighter-purple: #a5b8d3;
+ --color-dark-electric-blue: #576078;
+ --color-button-text: #f7f9f9;
+ --color-ghost-button-text: var(--color-button-text);
+ --color-verified: #79bd9a;
+ --color-destructive: #df405a;
+ --color-light-fuchsia-pink: #ff8cfd;
+ --color-hashtag: var(--color-accent);
+ --color-mention: var(--color-accent);
+ --color-link: var(--color-accent);
+
+ /* In the original UI this color is lighten($ui-base-color, 12%) */
+ --color-outer-space: #42485a;
+
+ /* Font related */
+ --font-stack: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, Inter, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+ --font-size: 15px;
+ --font-size-smaller: 13px;
+ --font-size-12: 12px;
+ --font-size-mid: 14px;
+ --font-size-bigger: 17px;
+ --font-size-heading: 20px;
+ --font-weight-bold: 700;
+ --line-height: 22px;
+ --line-height-mid: 20px;
+
+ /* Grids and gaps */
+ --gap-default: 12px;
+
+ /* Element sizes */
+ --size-avatar: 48px;
+ --size-avatar-small: 32px;
+ --size-icon-notification: 30px;
+ --width-main-panel: 600px;
+ --width-side-panel: 260px;
+ --border-radius: 16px;
+ --border-radius-badges: 4px;
+ --badges-distance-from-edge: 12px;
+
+ /* Misc */
+ --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
+ --active-header-radial-gradient: radial-gradient(ellipse, rgba(99, 100, 255, .23) 0, rgba(99, 100, 255, 0) 60%);
+ --compose-form-linear-gradient: linear-gradient(180deg, rgba(30, 32, 40, 1) 0%, rgba(30, 32, 40, 1) 53%, rgba(30, 32, 40, 0.8141631652661064) 76%, rgba(30, 32, 40, 0.7077205882352942) 87%, rgba(30, 32, 40, 0.458420868347339) 97%, rgba(30, 32, 40, 0) 100%);
+
+ /* Logo */
+ --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%3E%3C/svg%3E');
+
+ /* Icons */
+ --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23717c9b" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
+ --icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E');
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23f7f9f9" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%23f7f9f9" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E');
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-active-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-notification: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="0" viewBox="0 0 24 24" fill="%23ffac33" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%23ffac33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-active: '\f005';
+ --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f9f9' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23f7f9f9'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23f7f9f9" stroke="%23232543" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%23f7f9f9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-status-hover-red: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%23f7f9f9" xmlns="http://www.w3.org/2000/svg" color="%23f7f9f9"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%23f7f9f9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23f7f9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
+ --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%23f7f9f9" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f7f9f9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23717c9b" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+ --icon-star-hover: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23ffac33" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+ --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23535C76' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E");
+}
+
+/* High Contrast theme */
+body.theme-elephant-contrast.layout-single-column {
+ --color-dim: #b8b3c0;
+
+ /* Icons */
+ --icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23b8b3c0" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23b8b3c0" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23b8b3c0" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23b8b3c0' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8b3c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23b8b3c0' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23b8b3c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-star: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%23b8b3c0" stroke-width="5.5" viewBox="0 0 68 68"%3E%3Cpath d="M31.4 3.8c-.7.4-2.5 5-4.1 10.2l-2.9 9.5-9.9.5c-5.5.3-10.6.9-11.3 1.3-.6.5-1.2 1.9-1.2 3.3 0 2 1.5 3.4 8 7.5 4.4 2.8 8 5.5 8 6s-1.3 4.5-3 9.1c-3.6 9.7-3.7 11.4-.9 12.8 2.7 1.5 3.5 1.1 12.4-5.6l7.5-5.6 8.2 6.1c8.4 6.3 11.2 7.1 13.2 3.9.8-1.4.3-3.9-2.2-11-1.8-5.1-3.2-9.6-3.2-9.9 0-.4 3.6-3 8-5.8 6.5-4.1 8-5.5 8-7.5 0-1.4-.6-2.8-1.2-3.3-.7-.4-5.8-1-11.3-1.3l-9.9-.5-2.9-9.5C37.8 4.6 36.9 3 34 3c-.8 0-2 .4-2.6.8z"/%3E%3C/svg%3E%0A');
+}
+
+/* Light theme */
+body.theme-elephant-light.layout-single-column {
+ --color-bg: #fff;
+ --color-fg: #000;
+ --color-border: #e6e1ed;
+ --color-dim: #9388a6;
+ --color-green: #17bf63;
+ --color-red: #e0245e;
+ --color-red-75: #e0245ebf;
+ --color-light-shade: #00000005;
+ --color-focusable-toot: rgba(0, 0, 0, 0.035);
+ --color-light-text: #1f1b23;
+ --color-mud: #e5e1ed;
+ --color-black-coral: #9188a6;
+ --color-profile-button-hover: #1e1b231a;
+ --color-column-link-hover: #1e1b231a;
+ --color-modal-overlay: #6a5b8366;
+ --color-dark: #f7f9f9;
+ --color-thread-line: #e1e8ed;
+ --color-gainsboro: #8899a6;
+ --color-light-purple: #9588a6;
+ --color-dark-electric-blue: #9088a6;
+ --color-bg-75: #ffffffbf;
+ --color-accent: var(--color-accent-dark);
+ --color-accent-dark-50: #595aff80;
+ --color-ghost-button-text: var(--color-accent-dark);
+
+ /* Misc */
+ --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%);
+
+ /* Icons for light theme */
+ --icon-boost: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-status-prepend: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-o6sn0f r-4qtqp9 r-yyyyoo r-yucp9h r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath fill="%2300ba7c" d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ --icon-boost-notification-filter-bar: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-filter-bar-active: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='18' height='18' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-boost-notification-wrapper: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='24' height='24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%2300ba7c' d='M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4l-5 4v-3z'/%3E%3C/svg%3E");
+ --icon-reply-nofitication-filter-bar-active: url('data:image/svg+xml, %3Csvg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%231f1b23" d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366a8.13 8.13 0 0 1 8.129 8.13c0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067A8.005 8.005 0 0 1 1.751 10zm8.005-6a6.005 6.005 0 1 0 .133 12.01l.351-.01h1.761v2.3l5.087-2.81A6.127 6.127 0 0 0 14.122 4H9.756z"/%3E%3Cellipse fill="%231f1b23" fill-rule="evenodd" stroke-width="1.28569" cx="11.835" cy="10.2" rx="9.117" ry="8.123"/%3E%3C/svg%3E%0A');
+ --icon-reply: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-reply-conversation: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23717c9b' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23F91880' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-detailed-status-action-bar-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark-column-link: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-column-link-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231f1b23" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-reply-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-list: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EList%3C/title%3E%3Cpath fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M160 144h288M160 256h288M160 368h288"/%3E%3Ccircle cx="80" cy="144" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="256" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3Ccircle cx="80" cy="368" r="16" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/%3E%3C/svg%3E');
+ --icon-share: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717c9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-share-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23595aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'%3E%3C/path%3E%3Cpolyline points='16 6 12 2 8 6'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
+ --icon-heart: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23717c9b' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-hover: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' width='20' height='20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23F91880' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-notification: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%23F91880'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-heart-column-link: url("data:image/svg+xml, %0A%3Csvg viewBox='0 0 24 24' color='inherit' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%231f1b23' d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604a26.953 26.953 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.592 1.54 1.145 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571z'/%3E%3C/svg%3E");
+ --icon-heart-column-link-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' fill='%231f1b23'%3E%3Cg%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-star-column-link: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-star-column-link-active: url('data:image/svg+xml, %3Csvg width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M8.587 8.236l2.598-5.232a.911.911 0 011.63 0l2.598 5.232 5.808.844a.902.902 0 01.503 1.542l-4.202 4.07.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75-4.202-4.07a.902.902 0 01.503-1.54l5.808-.845z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-direct-messages: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-direct-messages-active: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%231f1b23" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"%3E%3Cpath d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"%3E%3C/path%3E%3Cpolyline points="22, 6 12, 13 2, 6"%3E%3C/polyline%3E%3C/svg%3E');
+ --icon-users-column-link: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-users-column-link-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%23000000"%3E%3Cpath d="M1 20v-1a7 7 0 017-7v0a7 7 0 017 7v1" stroke="%231f1b23" stroke-width="2" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M13 14v0a5 5 0 015-5v0a5 5 0 015 5v.5" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round"%3E%3C/path%3E%3Cpath d="M8 12a4 4 0 100-8 4 4 0 000 8zM18 9a3 3 0 100-6 3 3 0 000 6z" stroke="%231f1b23" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-status-hover: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23595aff' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bookmark: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23717c9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"%3E%3Cpath d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bookmark-active: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F91880' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ --icon-bell: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-active: url('data:image/svg+xml, %3Csvg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-bell-header-tabs-active: url('data:image/svg+xml, %3Csvg width="18px" height="18px" stroke-width="1.5" viewBox="0 0 24 24" fill="%231f1b23" xmlns="http://www.w3.org/2000/svg" color="%231f1b23"%3E%3Cpath d="M18 8.4c0-1.697-.632-3.325-1.757-4.525C15.117 2.675 13.59 2 12 2c-1.591 0-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4 6 15.867 3 18 3 18h18s-3-2.133-3-9.6zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="%231f1b23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
+ --icon-home-notification: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%23717c9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-home-notification-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-home: url('data:image/svg+xml, %0A%3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3Cpath d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="%231f1b23" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/%3E%3C/svg%3E');
+ --icon-globe: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" viewBox="0 0 512 512"%3E%3Cpath d="M96.85 286.62a8 8 0 00-12.53 8.25C102.07 373.28 172.3 432 256 432a175.31 175.31 0 0052.41-8 8 8 0 00.79-15 1120 1120 0 01-109.48-55.61 1126.24 1126.24 0 01-102.87-66.77zM492.72 339.51c-4.19-5.58-9.11-11.44-14.7-17.53a15.83 15.83 0 00-26.56 5.13c0 .16-.11.31-.17.47a15.75 15.75 0 003.15 16.06c22.74 25 26.42 38.51 25.48 41.36-2 2.23-17.05 6.89-58.15-3.53q-8.83-2.24-19.32-5.46-6.76-2.08-13.79-4.49a176.76 176.76 0 0019.54-27.25c.17-.29.35-.58.52-.88A175.39 175.39 0 00432 256a178.87 178.87 0 00-1-19c-9.57-88.17-84.4-157-175-157a175.37 175.37 0 00-106.4 35.89 177.4 177.4 0 00-45.83 51.84c-.16.29-.34.58-.51.87a175.48 175.48 0 00-13.83 30.52q-5.59-4.87-10.79-9.67c-5.39-5-10.17-9.63-14.42-14-29.57-30.26-33.09-45.61-32.16-48.45 2-2.23 15.54-5.87 48.62 1.31A15.82 15.82 0 0096.22 123l.36-.44a15.74 15.74 0 00-8.67-25.43A237.38 237.38 0 0064.13 93c-30.72-3.53-50.83 2.52-59.78 18-3.24 5.58-6.35 15.09-2.72 28.6C7 159.66 26.14 184 53.23 209.5c8.63 8.13 18.06 16.37 28.12 24.64 7.32 6 15 12.06 22.9 18.08q7.91 6 16.15 12T137.1 276c25.41 17.61 52.26 34.52 78.59 49.69q14.34 8.26 28.64 16t28.37 14.81c21.9 11 43.35 20.92 63.86 29.43q13.19 5.48 25.81 10.16c11.89 4.42 23.37 8.31 34.31 11.59l1.1.33c25.73 7.66 47.42 11.69 64.48 12H464c21.64 0 36.3-6.38 43.58-19 9.09-15.62 4.08-36.32-14.86-61.5z"/%3E%3C/svg%3E');
+ --icon-home-column-link-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" class="ionicon" fill="%231f1b23" width="24" height="24" viewBox="0 0 512 512"%3E%3Ctitle%3EHome%3C/title%3E%3Cpath d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/%3E%3Cpath d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"/%3E%3C/svg%3E');
+ --icon-hashtag: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-hashtag-active: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231f1b23" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"%3E%3Cline x1="4" y1="9" x2="20" y2="9"%3E%3C/line%3E%3Cline x1="4" y1="15" x2="20" y2="15"%3E%3C/line%3E%3Cline x1="10" y1="3" x2="8" y2="21"%3E%3C/line%3E%3Cline x1="16" y1="3" x2="14" y2="21"%3E%3C/line%3E%3C/svg%3E');
+ --icon-search: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239FA4BB' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-8.5 6.5a8.5 8.5 0 1 1 15.176 5.262l4.781 4.781-1.414 1.414-4.781-4.781A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E");
+}
+
+/* Vars on iPad, landscape */
+@media (min-width: 1175px) and (max-width: 1260px) {
+ :root {
+ --width-main-panel: 500px;
+ --width-side-panel: 265px;
+ }
+}
+
+/* Vars in mobile */
+@media (max-width: 500px) {
+ :root {
+ --font-size: 16px;
+ --line-height: 1.4;
+ --font-size-heading: 17px;
+ --badges-distance-from-edge: 10px;
+ }
+
+ /* Hide scrollbar on mobile, since we can't pick the handle anyway */
+ .layout-single-column::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+/* Search popout offset */
+.layout-single-column .search__popout,
+.layout-single-column .search-popout {
+ left: calc(30px / 2);
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ max-width: calc(100% - 30px) !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: calc(100% - 30px) !important;
+}
+
+body.embed,
+body.layout-single-column {
+ background-color: var(--color-bg);
+ color: var(--color-fg);
+ font-family: var(--font-stack);
+}
+
+.layout-single-column .ui {
+ display: flex;
+ width: 100%;
+}
+
+/* Fix weird horizontal overflow */
+@media (min-width: 1175px) and (max-width: 1330px) {
+ .layout-single-column .ui {
+ width: unset;
+ }
+}
+
+/* Text color */
+.layout-single-column .account__header__tabs__name h1,
+.layout-single-column .account__header__bio .account__header__content,
+.layout-single-column .reply-indicator__content,
+.layout-single-column .status__content {
+ color: var(--color-fg);
+}
+
+/* Link color variants */
+.layout-single-column .status-link.hashtag {
+ color: var(--color-hashtag);
+}
+
+.layout-single-column .status-link.mention:not(.hashtag) {
+ color: var(--color-mention);
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column .status-link.mention:not(.hashtag):not(.mention) {
+ color: var(--color-link);
+}
+
+/* Logo */
+.layout-single-column .ui__header__logo,
+.layout-single-column .column-link.column-link--logo {
+ background-image: var(--logo);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 32px auto;
+ height: 50px;
+ padding: 0;
+ width: 50px;
+}
+
+.layout-single-column .ui__header__logo img,
+.layout-single-column .ui__header__logo svg {
+ display: none;
+}
+
+/* Things that should have the default font-size */
+.layout-single-column .notification__message,
+.layout-single-column .account__header__tabs__name h1 small,
+.layout-single-column .button,
+.layout-single-column .status__content__read-more-button,
+.layout-single-column .status__prepend,
+.layout-single-column .status__info,
+.layout-single-column .status__relative-time,
+.layout-single-column .status__info .status__display-name,
+.layout-single-column .account__section-headline a,
+.layout-single-column .account__section-headline button,
+.layout-single-column .notification__filter-bar a,
+.layout-single-column .notification__filter-bar button {
+ font-size: var(--font-size);
+ line-height: var(--line-height);
+}
+
+/* Things that should have the mid font-size */
+.layout-single-column .account__header__extra__links,
+.layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea,
+.layout-single-column .account__header__content,
+.layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
+.layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
+ font-size: var(--font-size-mid);
+ line-height: var(--line-height-mid);
+}
+
+/* Exceptions */
+.layout-single-column .account__header__content {
+ line-height: 18px;
+}
+
+/* Things that will have even smaller font size */
+.layout-single-column .account__header__account-note label {
+ font-size: var(--font-size-12);
+}
+
+/* Line heights */
+.layout-single-column .reply-indicator__content,
+.layout-single-column .status__content {
+ line-height: var(--line-height);
+}
+
+/* Modal overlay */
+.layout-single-column .modal-root__overlay {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ background-color: var(--color-modal-overlay) !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-light-text) !important;
+}
+
+.layout-single-column .modal-root__modal .display-name strong,
+.layout-single-column .modal-root__modal .status__content {
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ color: var(--color-light-text) !important;
+}
+
+/* Hide footer buttons in modals */
+.layout-single-column .media-modal__overlay .picture-in-picture__footer {
+ display: none;
+}
+
+/* Report modal */
+.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text {
+ display: grid;
+ gap: 6px;
+}
+
+.layout-single-column .media-modal__navigation .fa-times::before {
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
+/* List adder input */
+.layout-single-column .list-editor input.setting-text,
+.layout-single-column .list-adder input.setting-text {
+ background-color: transparent;
+ border-color: var(--color-black-coral);
+ height: 38px;
+}
+
+.layout-single-column .list-editor .column-inline-form button,
+.layout-single-column .list-adder .column-inline-form button,
+.layout-single-column .list-editor .column-inline-form button::before {
+ min-height: 38px;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 100% !important;
+}
+
+.layout-single-column .list-editor__search {
+ padding: 15px;
+}
+
+.layout-single-column .embed-modal .embed-modal__container .embed-modal__html {
+ color: var(--color-light-text);
+}
+
+.layout-single-column .embed-modal .embed-modal__container .embed-modal__html,
+.layout-single-column .list-editor__search .search__input {
+ background-color: transparent;
+ border-color: var(--color-black-coral);
+ height: 38px;
+}
+
+.layout-single-column .list-editor .drawer__inner.backdrop {
+ box-shadow: 2px 4px 15px rgba(0, 0, 0, .2);
+}
+
+.layout-single-column .list-editor__search .search__icon .fa {
+ margin: 15px;
+}
+
+.layout-single-column .list-editor .list__display-name,
+.layout-single-column .list-adder .list__display-name {
+ display: flex;
+ gap: var(--gap-default);
+}
+
+.layout-single-column .list__display-name .fa-list-ul::before {
+ top: -2px;
+}
+
+/* Bigger preview cards */
+.layout-single-column .status-card,
+.layout-single-column .status-card.compact {
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ display: block;
+ transition: all 200ms;
+}
+
+/* Hide empty YouTube description */
+.layout-single-column .status-card__description:empty {
+ display: none;
+}
+
+.layout-single-column .status-card:focus,
+.layout-single-column .status-card:hover {
+ background-color: rgba(255 255 255 / .03);
+}
+
+.layout-single-column .fa-file-text::before {
+ content: "";
+}
+
+.layout-single-column .status-card .status-card__image-image,
+.layout-single-column .status-card .status-card__image-image.compact {
+ border-radius: 0;
+}
+
+.layout-single-column .status-card .status-card__content,
+.layout-single-column .status-card.compact .status-card__content {
+ padding: 15px;
+}
+
+.layout-single-column .status-card .status-card__title,
+.layout-single-column .status-card.compact .status-card__title {
+ color: var(--color-fg);
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 1.3;
+ margin-bottom: 10px;
+ white-space: inherit;
+}
+
+.layout-single-column .status-card .status-card__host,
+.layout-single-column .status-card.compact .status-card__host {
+ color: var(--color-dim);
+ font-size: var(--font-size-mid);
+ margin-bottom: 5px;
+ margin-top: 0;
+}
+
+/* Announcements */
+.layout-single-column .announcements__pagination .fa,
+.layout-single-column .announcements__pagination {
+ color: var(--color-dim);
+}
+
+.layout-single-column .announcements__pagination .icon-button:hover i {
+ color: var(--color-light-purple);
+}
+
+/* Dark panels like modals and boxes */
+.layout-single-column .about__meta,
+.layout-single-column .about__section__title,
+.layout-single-column .announcements,
+.layout-single-column .report-dialog-modal,
+.layout-single-column .report-modal__target,
+.layout-single-column .compose-form .autosuggest-textarea__suggestions,
+.layout-single-column .privacy-dropdown__dropdown,
+.layout-single-column .drawer__backdrop,
+.layout-single-column .list-editor__account,
+.layout-single-column .list-editor,
+.layout-single-column .list-editor__lists,
+.layout-single-column .list-adder__account,
+.layout-single-column .list-adder,
+.layout-single-column .list-adder__lists,
+.layout-single-column .dropdown-menu__arrow::before,
+.layout-single-column .dropdown-menu,
+.layout-single-column .dropdown-menu__item a,
+.layout-single-column .dropdown-menu__item button,
+.layout-single-column .emoji-mart-category-label span,
+.layout-single-column .emoji-mart-bar:first-child,
+.layout-single-column .emoji-picker-dropdown__menu,
+.layout-single-column .privacy-dropdown.active .privacy-dropdown__value,
+.layout-single-column .emoji-mart-search input,
+.layout-single-column .emoji-mart-scroll,
+.layout-single-column .emoji-mart-search,
+.layout-single-column .follow_requests-unlocked_explanation,
+.layout-single-column .dismissable-banner,
+.layout-single-column .block-modal__action-bar,
+.layout-single-column .boost-modal__action-bar,
+.layout-single-column .confirmation-modal__action-bar,
+.layout-single-column .mute-modal__action-bar,
+.layout-single-column .setting-text__wrapper,
+.layout-single-column .setting-text,
+.layout-single-column .report-modal__comment,
+.layout-single-column .report-modal__container,
+.layout-single-column .actions-modal,
+.layout-single-column .block-modal,
+.layout-single-column .boost-modal,
+.layout-single-column .compare-history-modal,
+.layout-single-column .confirmation-modal,
+.layout-single-column .mute-modal,
+.layout-single-column .report-modal,
+.layout-single-column .column-header__collapsible-inner {
+ background-color: var(--color-dark);
+ border-color: var(--color-dark);
+ color: var(--color-light-text);
+}
+
+/* Has dark 1px border */
+.layout-single-column .dismissable-banner {
+ border: 1px solid var(--color-dark);
+}
+
+/* More subtle box-shadow for dropdown-menu */
+.layout-single-column .search-popout,
+.layout-single-column .search__popout,
+.layout-single-column .dropdown-menu {
+ box-shadow: 2px 4px 16px rgb(0 0 0 / .01);
+}
+
+/* Autosuggest box shadow reset */
+.layout-single-column .search-popout,
+.layout-single-column .search__popout,
+.layout-single-column .dropdown-menu,
+.layout-single-column .emoji-picker-dropdown__menu,
+.layout-single-column .compose-form .compose-form__warning,
+.layout-single-column .privacy-dropdown.active .privacy-dropdown__value,
+.layout-single-column .privacy-dropdown__dropdown,
+.layout-single-column .language-dropdown__dropdown,
+.layout-single-column .compose-form .autosuggest-textarea__suggestions {
+ box-shadow: none;
+}
+
+/* Composer form warnings */
+.layout-single-column .compose-form .compose-form__warning {
+ background-color: var(--color-light-purple);
+ color: var(--color-bg);
+}
+
+/* Content warning placeholder */
+.layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder,
+.layout-single-column .compose-form .spoiler-input__input::placeholder {
+ color: var(--color-dim);
+}
+
+/* Border colors */
+.layout-single-column .account__header__bar,
+.layout-single-column .about__meta__divider,
+.layout-single-column .poll__footer,
+.layout-single-column .report-dialog-modal .poll__option.dialog-option,
+.layout-single-column .account,
+.layout-single-column .report-dialog-modal__container,
+.layout-single-column .dropdown-menu__item.edited-timestamp__history__item,
+.layout-single-column .dropdown-menu__container__header,
+.layout-single-column .compare-history-modal .report-modal__target,
+.layout-single-column .account__section-headline,
+.layout-single-column .detailed-status__action-bar,
+.layout-single-column .column-back-button,
+.layout-single-column .column-header,
+.layout-single-column .audio-player,
+.layout-single-column .video-player,
+.layout-single-column .media-gallery,
+.layout-single-column .compose-form .spoiler-input__input,
+.layout-single-column .compose-form__autosuggest-wrapper,
+.layout-single-column .compose-form__poll-wrapper,
+.layout-single-column .compose-form__poll-wrapper select,
+.layout-single-column .poll__option input[type="text"],
+.layout-single-column .report-dialog-modal__textarea,
+.layout-single-column .search__input,
+.layout-single-column .setting-text,
+.layout-single-column .dropdown-menu__separator,
+.layout-single-column .status,
+.layout-single-column .emoji-mart-search input,
+.layout-single-column .conversation,
+.layout-single-column .setting-text__wrapper {
+ border-color: var(--color-border);
+}
+
+/* Change panel order */
+.layout-single-column .columns-area__panels__pane {
+ order: 3;
+}
+
+.layout-single-column .columns-area__panels__main {
+ order: 2;
+}
+
+.layout-single-column .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational {
+ order: 1;
+}
+
+.layout-single-column .columns-area__panels__pane,
+.layout-single-column .columns-area__panels__pane__inner,
+.layout-single-column .compose-panel {
+ min-width: var(--width-side-panel);
+ width: var(--width-side-panel);
+}
+
+.layout-single-column .columns-area__panels__pane--compositional {
+ flex-grow: 1;
+ height: 100vh;
+ max-width: 350px;
+ overflow: visible;
+ position: sticky;
+ top: 0;
+}
+
+.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
+ position: static;
+}
+
+.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner,
+.compose-panel {
+ /* stylelint-disable-next-line */
+ width: 100% !important;
+}
+
+.layout-single-column .search {
+ margin-inline: 10px;
+}
+
+/* stylelint-disable-next-line */
+@media (min-width: 1175px) {
+ .layout-single-column .columns-area__panels__main {
+ max-width: calc(var(--width-main-panel) + calc(var(--gap-default) * 4));
+ padding-left: calc(var(--gap-default) * 2);
+ padding-right: calc(var(--gap-default) * 2);
+ }
+
+ .layout-single-column .navigation-panel {
+ margin-right: -20px;
+ /* stylelint-disable-next-line */
+ padding-left: 0 !important;
+ padding-right: 20px;
+ }
+}
+
+.layout-single-column .emoji-mart-anchor-bar,
+.layout-single-column .column-link.column-link--logo svg {
+ display: none;
+}
+
+/* Accented items like links */
+.layout-single-column .about__section__title,
+.layout-single-column .account__header__bio .account__header__fields a,
+.layout-single-column .column-back-button,
+.layout-single-column .emoji-mart-anchor.emoji-mart-anchor-selected,
+.layout-single-column .text-icon-button.active,
+.layout-single-column .empty-column-indicator a,
+.layout-single-column .follow_requests-unlocked_explanation a,
+.layout-single-column .column-header__back-button,
+.layout-single-column .link-button,
+.layout-single-column .reply-indicator__content a.unhandled-link,
+.layout-single-column .status__content a.unhandled-link,
+.layout-single-column .column-header > .column-header__back-button,
+.layout-single-column .reply-indicator__content a,
+body.embed .status__content a,
+.layout-single-column .status__content a,
+.layout-single-column .column-link--transparent.active,
+.layout-single-column .status__content__read-more-button {
+ color: var(--color-accent);
+}
+
+/* Toggles */
+.layout-single-column .react-toggle .react-toggle-track {
+ background-color: var(--color-bg);
+}
+
+/* Accented background colors */
+.layout-single-column .react-toggle--checked .react-toggle-track,
+.layout-single-column .language-dropdown__dropdown__results__item.active,
+.layout-single-column .icon-with-badge__badge,
+.layout-single-column .button {
+ background-color: var(--color-accent-dark);
+}
+
+.layout-single-column .block-modal__cancel-button,
+.layout-single-column .confirmation-modal__cancel-button,
+.layout-single-column .confirmation-modal__secondary-button,
+.layout-single-column .mute-modal__cancel-button {
+ background-color: transparent;
+ color: var(--color-dim);
+ font-size: var(--font-size-mid);
+}
+
+.layout-single-column .block-modal__cancel-button:focus,
+.layout-single-column .confirmation-modal__cancel-button:focus,
+.layout-single-column .confirmation-modal__secondary-button:focus,
+.layout-single-column .mute-modal__cancel-button:focus,
+.layout-single-column .block-modal__cancel-button:hover,
+.layout-single-column .confirmation-modal__cancel-button:hover,
+.layout-single-column .confirmation-modal__secondary-button:hover,
+.layout-single-column .mute-modal__cancel-button:hover {
+ background-color: transparent;
+ color: var(--color-dark-electric-blue);
+}
+
+.column-link--transparent .icon-with-badge__badge,
+.layout-single-column .icon-with-badge__badge {
+ background-color: var(--color-accent-dark);
+ border-color: var(--color-bg);
+}
+
+/* Accented strokes */
+.layout-single-column .trends__item__sparkline path:last-child {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ stroke: var(--color-accent) !important;
+}
+
+/* Mud background colors */
+.layout-single-column .reply-indicator {
+ background-color: var(--color-mud);
+ color: var(--color-light-text);
+}
+
+/* Dropdown hovers */
+.layout-single-column .language-dropdown__dropdown__results__item:hover,
+.layout-single-column .language-dropdown__dropdown__results__item:focus {
+ background-color: var(--color-accent-dark-50);
+ color: var(--color-light-text);
+}
+
+/* Accented border colors */
+.layout-single-column .notification.unread::before,
+.layout-single-column .status__wrapper.unread::before {
+ border-color: var(--color-accent);
+ display: none;
+}
+
+/* Unread message */
+.layout-single-column .conversation--unread,
+.layout-single-column .notification.unread:hover,
+.layout-single-column .notification.unread,
+.layout-single-column .status__wrapper.unread {
+ background-color: var(--color-dark);
+}
+
+.layout-single-column .notification:hover .notification__message {
+ background-color: transparent;
+}
+
+/* Things like notification status update text that should be dim */
+/* stylelint-disable-next-line selector-not-notation */
+.layout-single-column .notification .status-link.mention:not(.hashtag):not(.mention),
+.layout-single-column .notification .status-link.hashtag,
+.layout-single-column .notification .status-link.mention:not(.hashtag),
+.layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder,
+.layout-single-column .compose-form .icon-button,
+.layout-single-column .compose-form .spoiler-input__input::placeholder,
+.layout-single-column .compose-form__poll-wrapper .button.button-secondary,
+.layout-single-column .language-dropdown__dropdown__results__item__common-name,
+.layout-single-column .poll__link,
+.layout-single-column .muted .poll,
+.layout-single-column .status .status__relative-time,
+.layout-single-column .status .status__visibility-icon,
+.layout-single-column .block-modal__action-bar > div,
+.layout-single-column .boost-modal__action-bar > div,
+.layout-single-column .confirmation-modal__action-bar > div,
+.layout-single-column .mute-modal__action-bar > div,
+.layout-single-column .search-popout > h4,
+.layout-single-column .search__popout > h4,
+.layout-single-column .status-check-box__status .detailed-status__display-name,
+.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text,
+.layout-single-column .status-card .status-card__description,
+.layout-single-column .status-card.compact .status-card__description,
+.layout-single-column .report-dialog-modal .dialog-option .poll__input,
+.layout-single-column .dropdown-menu__container__header,
+.layout-single-column .sign-in-banner p,
+.layout-single-column .navigation-bar > a,
+.layout-single-column .character-counter,
+.layout-single-column .text-icon-button,
+.layout-single-column .empty-column-indicator,
+.layout-single-column .follow_requests-unlocked_explanation,
+.layout-single-column .poll__footer,
+.layout-single-column .server-banner h4,
+.layout-single-column .column-header__button,
+.layout-single-column .search__icon .fa-times-circle,
+.layout-single-column .timeline-hint,
+.layout-single-column .status__display-name.muted,
+.layout-single-column .setting-text-label,
+.layout-single-column .account__header__bio .account__header__fields dt,
+.layout-single-column .account__header__bio .account__header__fields dd,
+.layout-single-column .link-footer p,
+.layout-single-column .account__header__extra__links a,
+.layout-single-column .trends__item__current,
+.layout-single-column .emoji-mart-anchor,
+.layout-single-column .emoji-mart,
+.layout-single-column .emoji-mart-anchors,
+.layout-single-column .reply-indicator .display-name *,
+.layout-single-column .status__display-name,
+.layout-single-column .status__prepend .status__display-name strong,
+.layout-single-column .status__prepend,
+.layout-single-column .compose-form .compose-form__modifiers,
+.layout-single-column .compose-form .autosuggest-textarea__textarea,
+.layout-single-column .compose-form .spoiler-input__input,
+.layout-single-column .autosuggest-textarea__suggestions,
+.layout-single-column .compose-form .autosuggest-account .display-name__account,
+.layout-single-column .compose-panel .compose-form__autosuggest-wrapper,
+.layout-single-column .compose-form .compose-form__buttons-wrapper,
+.layout-single-column .account__section-headline a,
+.layout-single-column .account__section-headline button,
+.layout-single-column .notification__filter-bar a,
+.layout-single-column .notification__filter-bar button,
+.layout-single-column .attachment-list.compact .fa,
+.layout-single-column .attachment-list__list a,
+.layout-single-column .notification__message .fa-user-plus,
+.layout-single-column .notification__message .fa-home,
+.layout-single-column .notification__message .fa-retweet,
+.layout-single-column .link-footer p a,
+.layout-single-column .trends__item__name,
+.layout-single-column .muted .status__content,
+.layout-single-column .muted .status__content a,
+.layout-single-column .muted .status__content p,
+.layout-single-column .muted .status__display-name strong,
+.layout-single-column .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
+ color: var(--color-dim);
+}
+
+/* Dim backgrounds */
+.layout-single-column .poll__chart {
+ background-color: var(--color-dim);
+}
+
+/* Lighter border colors */
+.layout-single-column .report-dialog-modal .dialog-option .poll__input,
+.layout-single-column .poll__input {
+ border-color: var(--color-brand-mastodon-text-light);
+}
+
+/* Light grey things */
+.layout-single-column .navigation-bar,
+.layout-single-column .navigation-bar strong {
+ color: var(--color-gainsboro);
+}
+
+/* CW button */
+.layout-single-column .reply-indicator__content .status__content__spoiler-link,
+.layout-single-column .status__content__spoiler-link {
+ background-color: var(--color-dark);
+ color: var(--color-light-purple);
+ font-weight: 500;
+
+ /* Need to override forced styles */
+ /* stylelint-disable-next-line */
+ margin-left: calc(var(--gap-default) / 2) !important;
+ vertical-align: baseline;
+}
+
+.layout-single-column .reply-indicator__content .status__content__spoiler-link:focus,
+.layout-single-column .reply-indicator__content .status__content__spoiler-link:hover,
+.layout-single-column .status__content .status__content__spoiler-link:focus,
+.layout-single-column .status__content .status__content__spoiler-link:hover {
+ background-color: var(--color-dark);
+ color: var(--color-lighter-purple);
+}
+
+/* CW button in notifications */
+.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link,
+.layout-single-column .notification .status__content__spoiler-link {
+ background-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:focus,
+.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:hover,
+.layout-single-column .notification .status__content .status__content__spoiler-link:focus,
+.layout-single-column .notification .status__content .status__content__spoiler-link:hover {
+ background-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+/* Light purple things */
+.account__header__tabs__name h1 small,
+.layout-single-column .account .account__display-name,
+.layout-single-column .column-settings__section,
+.layout-single-column .setting-toggle__label {
+ color: var(--color-light-purple);
+}
+
+/* White things */
+.layout-single-column .compose-form__poll-wrapper select,
+.layout-single-column .actions-modal ul li:not(:empty) a,
+.layout-single-column .report-dialog-modal .status__content,
+.layout-single-column .report-dialog-modal .status__content p,
+.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong,
+.layout-single-column .report-dialog-modal__lead,
+.layout-single-column .detailed-status__display-name strong,
+.layout-single-column .dismissable-banner__message,
+.layout-single-column .privacy-dropdown__option.active,
+.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.layout-single-column .privacy-dropdown__option:focus .privacy-dropdown__option__content,
+.layout-single-column .privacy-dropdown__option,
+.layout-single-column .privacy-dropdown__option__content strong,
+.layout-single-column .status__info .display-name strong.display-name__html,
+.layout-single-column .reply-indicator .display-name strong.display-name__html,
+.layout-single-column .notification__message,
+.layout-single-column .getting-started__trends h4 a,
+.layout-single-column .trends__item__name a,
+.layout-single-column .emoji-mart-search input,
+.layout-single-column .language-dropdown__dropdown__results__item,
+.layout-single-column .reply-indicator__content,
+.layout-single-column .compose-form .compose-form__modifiers:focus,
+.layout-single-column .compose-form .autosuggest-textarea__textarea,
+.layout-single-column .compose-form .spoiler-input__input:focus,
+.layout-single-column .compose-panel .compose-form__autosuggest-wrapper:focus,
+.layout-single-column .compose-form .compose-form__buttons-wrapper:focus,
+.layout-single-column .autosuggest-textarea .autosuggest-textarea__textarea:focus,
+.layout-single-column .account__section-headline a.active,
+.layout-single-column .account__section-headline button.active,
+.layout-single-column .notification__filter-bar a.active,
+.layout-single-column .notification__filter-bar button.active {
+ color: var(--color-light-text);
+}
+
+.layout-single-column .muted .status__info *,
+.layout-single-column .muted .status__info .display-name * {
+ color: var(--color-light-text);
+}
+
+/* Account names */
+.layout-single-column .status__info .display-name .display-name__account,
+.layout-single-column .display-name__account {
+ color: var(--color-dim);
+}
+
+/* Main panel column */
+.layout-single-column .columns-area__panels__main > div {
+ border-left: 1px solid var(--color-border);
+ border-right: 1px solid var(--color-border);
+}
+
+/* Status header */
+.layout-single-column .status .status__info {
+ align-items: flex-start;
+ gap: var(--gap-default);
+ height: calc(var(--gap-default) * 2);
+ justify-content: flex-start;
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+
+/* Status action bar */
+.layout-single-column .status__action-bar {
+ margin-top: 12px;
+}
+
+/* Display name */
+.layout-single-column .status__info .status__display-name {
+ align-items: flex-start;
+ display: inline-flex;
+ gap: var(--gap-default);
+ order: 1;
+}
+
+.layout-single-column .status__info .display-name {
+ display: flex;
+ gap: calc(var(--gap-default) / 2);
+}
+
+/* The separator dot */
+.layout-single-column .status__info::before {
+ color: var(--color-dim);
+ content: "·";
+ display: inline-block;
+ font-size: var(--font-size);
+ font-weight: 400;
+ height: 20px;
+ margin-left: -6px;
+ margin-right: -10px;
+ order: 2;
+ position: relative;
+}
+
+.layout-single-column .status__info .status__relative-time {
+ height: unset;
+ order: 3;
+}
+
+/* Visibility icon */
+.layout-single-column .status .status__visibility-icon {
+ font-size: var(--font-size-mid);
+}
+
+/* Panels and things that should be transparent */
+.layout-single-column .status__wrapper-direct,
+.layout-single-column .focusable:focus .detailed-status,
+.layout-single-column .focusable:focus .detailed-status__action-bar,
+.layout-single-column .compose-form__poll-wrapper select,
+.layout-single-column .poll__option input[type="text"],
+.layout-single-column .language-dropdown__dropdown,
+body.embed .activity-stream .entry,
+.layout-single-column .report-dialog-modal__textarea,
+.layout-single-column .drawer__inner,
+.layout-single-column .column-inline-form,
+.layout-single-column .scrollable .account-card,
+.layout-single-column .scrollable .account-card__title__avatar .account__avatar,
+.layout-single-column .scrollable .account-card__title__avatar img,
+.layout-single-column .explore__search-header,
+.layout-single-column .empty-column-indicator,
+.layout-single-column .follow_requests-unlocked_explanation,
+.layout-single-column .column-link,
+.layout-single-column .columns-area__panels__pane--navigational .navigation-panel,
+.layout-single-column .tabs-bar__wrapper .column-back-button,
+.layout-single-column .account__header,
+.layout-single-column .column-header__back-button,
+.layout-single-column .compose-form .compose-form__modifiers,
+.layout-single-column .compose-form .autosuggest-textarea__textarea,
+.layout-single-column .compose-form .spoiler-input__input,
+.layout-single-column .compose-panel .compose-form__autosuggest-wrapper,
+.layout-single-column .compose-form .compose-form__buttons-wrapper,
+.layout-single-column .column-header__button,
+.layout-single-column .account__section-headline button,
+.layout-single-column .notification__filter-bar button,
+.layout-single-column .account__section-headline,
+.layout-single-column .notification__filter-bar,
+.layout-single-column .tabs-bar__wrapper,
+.layout-single-column .column-header,
+body.embed .detailed-status,
+.layout-single-column .detailed-status,
+.layout-single-column .detailed-status__action-bar,
+.layout-single-column .column > .scrollable {
+ background-color: transparent;
+}
+
+/* Avatar */
+.account__avatar[style="width: 46px; height: 46px;"],
+.layout-single-column .status__avatar {
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ max-height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ max-width: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ min-height: var(--size-avatar) !important;
+ /* stylelint-disable-next-line */
+ min-width: var(--size-avatar) !important;
+
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ width: var(--size-avatar) !important;
+}
+
+/* Avatars */
+.layout-single-column .account-card__title__avatar .account__avatar,
+.layout-single-column .account-card__title__avatar img,
+.layout-single-column .account__avatar > img,
+.layout-single-column .column > .scrollable .status__avatar img {
+ border: 0;
+ border-radius: 50%;
+ box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset;
+}
+
+/* Things that should not have border */
+.layout-single-column .column-inline-form,
+.layout-single-column .column > .scrollable,
+.layout-single-column .error-column,
+.layout-single-column .getting-started,
+.layout-single-column .regeneration-indicator,
+.layout-single-column .column-back-button,
+.layout-single-column .column-header {
+ border: 0;
+}
+
+/* Nice active effect in the column header */
+.layout-single-column .column-header__wrapper.active {
+ box-shadow: var(--active-header-box-shadow);
+}
+
+.layout-single-column .column-header__wrapper.active::before {
+ /* stylelint-disable-next-line */
+ background: var(--active-header-radial-gradient);
+}
+
+.layout-single-column .compose-form__autosuggest-wrapper,
+.layout-single-column .compose-form__buttons-wrapper {
+ border: 0;
+}
+
+.layout-single-column article,
+.layout-single-column .status__prepend,
+.layout-single-column .notification__message,
+.layout-single-column .status {
+ transition: all 200ms;
+}
+
+/* Toot hover effect */
+.layout-single-column article:focus,
+.layout-single-column article:hover {
+ background-color: var(--color-light-shade);
+}
+
+/* Focusable toot and other hilighted items */
+.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected,
+.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active,
+.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus,
+.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover,
+.layout-single-column .focusable:focus {
+ /* stylelint-disable-next-line */
+ background: var(--color-focusable-toot);
+}
+
+/* URL preview cards */
+.layout-single-column a.status-card,
+.layout-single-column a.status-card.compact:hover,
+.layout-single-column a.status-card.compact:focus,
+.layout-single-column a.status-card.compact {
+ background-color: transparent;
+ border-color: var(--color-border);
+}
+
+/* URL preview card summary text */
+.layout-single-column a.status-card .status-card__host,
+.layout-single-column a.status-card.compact .status-card__host,
+.layout-single-column a.status-card .status-card__description,
+.layout-single-column a.status-card.compact .status-card__description {
+ color: var(--color-dim);
+}
+
+/* Search panel that opens when focusing Search or paste URL field */
+.layout-single-column .explore__search-header .search__popout,
+.layout-single-column .compose-form__poll-wrapper option,
+.layout-single-column .search__popout,
+.layout-single-column .search-popout {
+ background-color: var(--color-dark);
+ border-color: var(--color-dark);
+ color: var(--color-dim);
+}
+
+.layout-single-column .search__popout em,
+.layout-single-column .search-popout em {
+ color: var(--color-light-text);
+}
+
+/* URL preview card box */
+/* stylelint-disable-next-line */
+.layout-single-column a.status-card .status-card__content,
+.layout-single-column a.status-card.compact .status-card__content {
+ display: grid;
+ gap: calc(var(--gap-default) / 2);
+ padding: var(--gap-default);
+}
+
+/* URL preview card fonts */
+.layout-single-column a.status-card .status-card__host,
+.layout-single-column a.status-card.compact .status-card__host,
+.layout-single-column a.status-card .status-card__title,
+.layout-single-column a.status-card.compact .status-card__title {
+ font-size: var(--font-size);
+ margin: 0;
+}
+
+/* Status update tinted to right */
+.layout-single-column .status__action-bar,
+.layout-single-column .attachment-list,
+.layout-single-column .status__content__read-more-button,
+.layout-single-column .status .status__content,
+.layout-single-column .notification.notification-admin-sign-up .display-name__account {
+ font-size: var(--font-size);
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+ padding-top: 0;
+}
+
+/* Translate link and other padding resets */
+.layout-single-column .conversation .attachment-list,
+.layout-single-column .translate ~ .status__content__read-more-button {
+ padding-left: 0;
+}
+
+/* Rtl version */
+[dir="rtl"] .layout-single-column .status__action-bar,
+[dir="rtl"] .layout-single-column .attachment-list,
+[dir="rtl"] .layout-single-column .status__content__read-more-button,
+[dir="rtl"] .layout-single-column .status .status__content {
+ padding-left: 0;
+ padding-right: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Reset padding from attachment-list on reply indicator */
+.layout-single-column .reply-indicator .attachment-list {
+ padding-left: 0;
+}
+
+.layout-single-column .status__action-bar button,
+.layout-single-column .detailed-status__action-bar button {
+ border-radius: 50%;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button[disabled],
+.layout-single-column .status__action-bar .icon-button[disabled] {
+ opacity: .5;
+ pointer-events: none;
+}
+
+/* Media inside status update tinted to right */
+.layout-single-column .status .audio-player,
+.layout-single-column .status .video-player,
+.layout-single-column .status .media-gallery {
+ margin-left: auto;
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ width: calc(100% - calc(var(--size-avatar) + var(--gap-default))) !important;
+}
+
+.layout-single-column .status .status-card {
+ margin-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Detailed status update */
+.layout-single-column .detailed-status .status__content {
+ font-size: var(--font-size-bigger);
+ line-height: 1.4;
+}
+
+body.embed .detailed-status__meta,
+.layout-single-column .detailed-status__meta {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+body.embed .detailed-status__meta {
+ line-height: 1.5;
+}
+
+body.embed .detailed-status__reblogs,
+body.embed .detailed-status__favorites,
+.layout-single-column .detailed-status__favorites,
+.layout-single-column .detailed-status__reblogs {
+ display: inline-flex;
+ font-size: var(--font-size);
+ gap: 4px;
+}
+
+body.embed .detailed-status__meta .animated-number,
+.layout-single-column .detailed-status__meta .animated-number {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+body.embed .detailed-status__reblogs,
+.layout-single-column .detailed-status__reblogs {
+ font-size: var(--font-size);
+}
+
+body.embed .detailed-status__reblogs,
+body.embed .detailed-status__favorites {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+body.embed .detailed-status__reblogs::after,
+.layout-single-column .detailed-status__reblogs::after {
+ color: var(--color-dim);
+ content: 'Boosts';
+ font-weight: 500;
+}
+
+body.embed .detailed-status__favorites::after,
+.layout-single-column .detailed-status__favorites::after {
+ color: var(--color-dim);
+ content: 'Favourites';
+ font-weight: 500;
+}
+
+body.embed .detailed-status__meta .detailed-status__link .fa-star,
+body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
+.layout-single-column .detailed-status__meta .detailed-status__link .fa-star,
+.layout-single-column .detailed-status__meta .detailed-status__link .fa-retweet {
+ display: none;
+}
+
+/* Icon buttons */
+.layout-single-column .icon-button {
+ color: var(--color-dim);
+}
+
+/* Hide/Show media button */
+.layout-single-column .spoiler-button.spoiler-button--minified > button {
+ background-color: var(--color-bg);
+ border-radius: var(--border-radius-badges);
+ color: var(--color-ghost-button-text);
+ opacity: .5;
+}
+
+/* Alt badge */
+.layout-single-column .media-gallery__item__badges > span {
+ border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-single-column .spoiler-button--minified {
+ inset-inline-start: var(--badges-distance-from-edge);
+ top: var(--badges-distance-from-edge);
+}
+
+.layout-single-column .media-gallery__gifv__label {
+ bottom: var(--badges-distance-from-edge);
+ inset-inline-start: var(--badges-distance-from-edge);
+}
+
+.layout-single-column .icon-button:hover {
+ color: var(--color-accent);
+}
+
+/* Other general buttons */
+.layout-single-column .column-header__button.active:active,
+.column-header__button.active:focus,
+.layout-single-column .column-header__button.active:hover {
+ background-color: var(--color-focusable-toot);
+ color: var(--color-fg);
+}
+
+/* Bars on panels */
+.layout-single-column .ui__header,
+.layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper,
+.layout-single-column .tabs-bar__wrapper {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ border-color: var(--color-border);
+ padding: 0;
+}
+
+@media (min-width: 1175px) {
+ .layout-single-column .ui__header,
+ .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-single-column .tabs-bar__wrapper {
+ margin-right: -2px;
+ }
+}
+
+/* Hidden things */
+/* stylelint-disable-next-line */
+.layout-single-column .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) {
+ display: none;
+}
+
+/* Column headers */
+.layout-single-column .column-header {
+ font-size: var(--font-size-heading);
+ font-weight: var(--font-weight-bold);
+}
+
+/* Column sub-headers */
+.layout-single-column .column-subheading {
+ background-color: transparent;
+ color: var(--color-fg);
+ font-size: var(--font-size-bigger);
+ font-weight: var(--font-weight-bold);
+ text-transform: unset;
+}
+
+/* "Your lists" view */
+.layout-single-column .column-subheading ~ article {
+ padding-left: var(--gap-default);
+ padding-right: var(--gap-default);
+}
+
+/* Notifications */
+.layout-single-column .notification__message {
+ display: grid;
+ gap: var(--gap-default);
+ grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
+ height: calc(var(--gap-default) * 2);
+}
+
+.layout-single-column .notification__message i {
+ font-size: var(--size-icon-notification);
+}
+
+/* Make sure notification user is clickable */
+.layout-single-column .notification__display-name {
+ position: relative;
+ z-index: 99;
+}
+
+/* Hack to display notification message title on one line */
+.layout-single-column .notification__message > span {
+ display: block;
+ margin-top: calc(var(--size-avatar-small) + 6px);
+ overflow: visible;
+}
+
+.layout-single-column .notification__message > span > span {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.layout-single-column .notification__message > div {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.layout-single-column .muted .status__avatar {
+ opacity: 1;
+}
+
+.layout-single-column .notification .account__avatar-overlay-base {
+ display: none;
+}
+
+.layout-single-column .notification .account__avatar,
+.layout-single-column .notification .account__avatar-overlay-overlay .account__avatar,
+.layout-single-column .notification .account__avatar-overlay-overlay {
+ /* Need to override inline styles */
+ /* stylelint-disable-next-line */
+ height: var(--size-avatar-small) !important;
+ /* stylelint-disable-next-line */
+ min-height: var(--size-avatar-small) !important;
+ /* stylelint-disable-next-line */
+ min-width: var(--size-avatar-small) !important;
+ position: absolute;
+ /* stylelint-disable-next-line */
+ width: var(--size-avatar-small) !important;
+}
+
+.layout-single-column .notification .status__info .status__display-name {
+ overflow: visible;
+}
+
+/* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */
+.layout-single-column .notification.notification-reblog .status__info .status__display-name,
+.layout-single-column .notification.notification-follow .status__info .status__display-name,
+.layout-single-column .notification.notification-favourite .status__info .status__display-name {
+ pointer-events: none;
+}
+
+/* Hack to show follow notification more minimal way */
+.layout-single-column .notification.notification-admin-report .notification__report,
+.layout-single-column .notification.notification-admin-sign-up .account__wrapper,
+.layout-single-column .notification.notification-update .account__wrapper,
+.layout-single-column .notification.notification-follow .account__wrapper {
+ position: relative;
+}
+
+.layout-single-column .notification.notification-admin-report .account__avatar-overlay-overlay {
+ top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default) + 4px));
+}
+
+/* Hack to show follow notification more minimal way */
+.layout-single-column .notification.notification-poll .display-name,
+.layout-single-column .notification.notification-update .display-name__html,
+.layout-single-column .notification.notification-update .display-name__account,
+.layout-single-column .notification.notification-admin-sign-up .display-name__html,
+.layout-single-column .notification.notification-admin-sign-up .display-name,
+.layout-single-column .notification.notification-follow .display-name__html {
+ visibility: hidden;
+}
+
+.layout-single-column .notification.notification-update .account__avatar-wrapper,
+.layout-single-column .notification.notification-admin-sign-up .account__avatar-wrapper,
+.layout-single-column .notification.notification-follow .account__avatar-wrapper,
+.layout-single-column .notification .account__avatar-overlay {
+ left: calc(var(--size-avatar-small) + var(--gap-default) + 18px);
+ margin-top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default)));
+ position: absolute;
+ top: 4px;
+}
+
+.layout-single-column .notification.notification-admin-report .account__avatar-overlay {
+ margin-top: 0;
+ top: 0;
+}
+
+.layout-single-column .notification.notification-status .notification__message > span {
+ display: none;
+}
+
+.layout-single-column .notification.notification-follow .verified-badge,
+.layout-single-column .notification.notification-follow .display-name,
+.layout-single-column .notification.notification-admin-sign-up .display-name + span,
+.layout-single-column .notification.notification-follow .display-name + span,
+.layout-single-column .notification.notification-favourite .status__wrapper-direct .status__prepend,
+.layout-single-column .notification.notification-reblog .display-name,
+.layout-single-column .notification.notification-favourite .display-name {
+ display: none;
+}
+
+/* Minimal boost notification fix */
+.layout-single-column .notification.notification-reblog .notification__message > span {
+ margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2));
+}
+
+/* Minimal follow notification fix */
+.layout-single-column .notification.notification-follow .notification__message > span {
+ margin-top: calc(calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px);
+}
+
+.layout-single-column .notification.notification.notification-admin-sign-up .account__relationship,
+.layout-single-column .notification.notification-follow .account__relationship {
+ transform: translateY(-8px);
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column .notification.notification-follow .account__avatar-wrapper {
+ top: 6px;
+}
+
+/* Minimal fav notification fix */
+.layout-single-column .notification.notification-favourite .notification__message > span {
+ margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2));
+}
+
+/* If a status content is empty and there's only attachment, remove gap */
+.layout-single-column .notification .status__content:has(.status__content__text:empty) + .attachment-list {
+ margin-top: 0;
+}
+
+/* Less space before attachments if no status content */
+.layout-single-column .status .status__content:has(.status__content__text:empty) + .audio-player,
+.layout-single-column .status .status__content:has(.status__content__text:empty) + .video-player,
+.layout-single-column .status .status__content:has(.status__content__text:empty) + .media-gallery,
+.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .audio-player,
+.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .video-player,
+.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery {
+ margin-top: calc(var(--gap-default) / 2);
+}
+
+.layout-single-column .notification.notification.notification-admin-sign-up .notification__message + .account,
+.layout-single-column .notification.notification-follow .notification__message + .account {
+ padding-bottom: 0;
+}
+
+.layout-single-column .status__prepend {
+ padding-left: calc(var(--size-avatar) - 4px);
+}
+
+.layout-single-column .notification.notification-update .account__display-name,
+.layout-single-column .notification.notification-follow .account__display-name {
+ display: inline-flex;
+ gap: var(--gap-default);
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+/* Admin reports and other admin notifications */
+.layout-single-column .notification-admin-report .notification__report {
+ border-color: var(--color-border);
+ display: flex;
+ font-size: var(--font-size);
+ gap: 16px;
+ margin-top: 22px;
+ padding: 16px;
+ padding-left: calc(var(--size-avatar) + var(--gap-default));
+}
+
+.layout-single-column .notification-admin-report .notification__report__details {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+.layout-single-column .notification-admin-report .notification__report__details strong {
+ font-weight: 400;
+}
+
+/* Revert hack for notification admin message that has no avatar visible */
+.layout-single-column .notification-admin-report .notification__message > span {
+ display: block;
+ margin-top: calc(var(--size-avatar-small) + 4px);
+ overflow: visible;
+}
+
+/* Hide things in notifications */
+.layout-single-column .notification .status__relative-time,
+.layout-single-column .notification .status__info::before {
+ display: none;
+}
+
+/* Right side panel */
+.layout-single-column .navigation-panel {
+ box-sizing: border-box;
+ margin-top: 0;
+ overflow-y: auto;
+ padding: 10px;
+}
+
+.layout-single-column .navigation-panel hr {
+ /* Hide but reserve space */
+ visibility: hidden;
+}
+
+.columns-area__panels__pane--navigational .navigation-panel {
+ border: 0;
+ height: 100%;
+}
+
+.layout-single-column .navigation-panel__logo hr {
+ margin: 0;
+}
+
+/* Attempt to hide scrollbars for .navigation-panel for Firefox */
+.dropdown-menu__container__list--scrollable,
+.layout-single-column .navigation-panel {
+ scrollbar-width: none;
+}
+
+/* Hide scrollbars for .navigation-panel for Chrome and Safari */
+.dropdown-menu__container__list--scrollable::-webkit-scrollbar,
+.layout-single-column .navigation-panel::-webkit-scrollbar {
+ display: none;
+ width: 4px;
+}
+
+.layout-single-column .column-link {
+ align-items: center;
+ color: var(--color-light-text);
+ display: inline-flex;
+ font-size: var(--font-size-heading);
+ gap: var(--gap-default);
+ overflow: visible;
+ padding-bottom: calc(var(--gap-default) + 4px);
+ padding-left: var(--gap-default);
+ padding-right: calc(var(--gap-default) * 1.5);
+ padding-top: calc(var(--gap-default) + 4px);
+ transition: all 100ms;
+}
+
+[dir="rtl"] .layout-single-column .column-link {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+.layout-single-column .column-link > i {
+ min-width: 1.3em;
+}
+
+.layout-single-column .column-link > span {
+ position: relative;
+}
+
+.layout-single-column .column-link > span::before {
+ background-color: var(--color-column-link-hover);
+ border-radius: 32px;
+ bottom: calc(2px - var(--gap-default) * 1.5);
+ content: "";
+ inset-inline-end: calc(0px - (var(--gap-default) * 2));
+ inset-inline-start: calc(-1.28571429em - (var(--gap-default) * 2));
+ opacity: 0;
+ position: absolute;
+ top: calc(-4px - var(--gap-default));
+ transition: opacity 200ms;
+}
+
+.layout-single-column .column-link:focus-visible > span::before,
+.layout-single-column .column-link:hover > span::before {
+ opacity: 1;
+}
+
+.layout-single-column .account__section-headline a {
+ transition: all 200ms;
+}
+
+.layout-single-column .notification__filter-bar button:hover,
+.layout-single-column .account__section-headline a:hover {
+ background-color: var(--color-column-link-hover);
+}
+
+/* Mobile devices */
+@media (hover: none) {
+ .layout-single-column .notification__filter-bar button.active:hover,
+ .layout-single-column .account__section-headline a.active:hover {
+ background-color: transparent;
+ }
+}
+
+/* Notification filter bar */
+.layout-single-column .notification__filter-bar {
+ border-bottom: 1px solid var(--color-border);
+ border-left: 0;
+ border-right: 0;
+}
+
+.layout-single-column .column-link__icon {
+ margin: 0;
+}
+
+/* Notification badge on side panel */
+.layout-single-column .icon-with-badge__badge {
+ border-radius: 50%;
+ font-size: 11px;
+ left: 12px;
+ top: -6px;
+}
+
+.layout-single-column .column-link--transparent.active {
+ color: var(--color-light-text);
+ font-weight: var(--font-weight-bold);
+}
+
+/* Top panel */
+.layout-single-column .account__section-headline a.active::after,
+.layout-single-column .account__section-headline button.active::after,
+.layout-single-column .notification__filter-bar a.active::after,
+.layout-single-column .notification__filter-bar button.active::after {
+ background-color: var(--color-accent);
+ border: 0;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ height: 4px;
+ min-width: 56px;
+}
+
+.layout-single-column .account__section-headline a.active::before,
+.layout-single-column .account__section-headline button.active::before,
+.layout-single-column .notification__filter-bar a.active::before,
+.layout-single-column .notification__filter-bar button.active::before {
+ display: none;
+}
+
+.layout-single-column .notification.notification-reblog .status__action-bar,
+.layout-single-column .notification.notification-favourite .status__action-bar {
+ display: none;
+}
+
+.layout-single-column .search .search__icon .fa-search::before {
+ content: '';
+}
+
+.layout-single-column .status__prepend .fa-retweet::before {
+ content: var(--icon-boost-status-prepend);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .notification .notification__message .fa {
+ font-size: 27px;
+ margin-right: 4px;
+ max-width: 30px;
+}
+
+.layout-single-column .notification .fa:not(.fa-link)::before {
+ font-size: 22px;
+ height: 27px;
+}
+
+.layout-single-column .notification .fa.fa-user-plus:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+ font-size: 20px;
+}
+
+.layout-single-column .account__relationship .fa.fa-user-plus:not(.fa-link)::before,
+.layout-single-column .notification .account__relationship .fa.fa-user-plus:not(.fa-link)::before {
+ color: var(--color-dim);
+}
+
+.layout-single-column .notification .fa.fa-flag::before,
+.layout-single-column .notification .fa.fa-tasks:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+}
+
+.layout-single-column .notification .fa.fa-home:not(.fa-link)::before {
+ color: var(--color-accent-dark);
+ font-size: 24px;
+}
+
+/* Follow/unfollow button */
+.layout-single-column .account__relationship .icon-button,
+.layout-single-column .notification .account__relationship .icon-button {
+ background-color: transparent;
+}
+
+.layout-single-column .notification .account__relationship .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-dim);
+ font-size: 20px;
+}
+
+.layout-single-column .list-adder__lists .fa-times::before,
+.layout-single-column .account__wrapper .account__relationship .icon-button.active .fa::before,
+.layout-single-column .explore__search-results .account__relationship .icon-button.active .fa::before,
+.layout-single-column .notification .account__relationship .icon-button.active .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-green);
+ opacity: .75;
+}
+
+.layout-single-column .list-adder__lists .fa-times:hover::before,
+.layout-single-column .explore__search-results .icon-button.active:hover .fa::before,
+.layout-single-column .notification .account__relationship .icon-button.active:hover .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-red);
+ opacity: 1;
+}
+
+.layout-single-column .explore__search-results .icon-button:focus .fa::before,
+.layout-single-column .notification .account__relationship .icon-button:focus .fa::before,
+.layout-single-column .explore__search-results .icon-button.active:focus .fa::before,
+.layout-single-column .notification .account__relationship .icon-button.active:focus .fa::before,
+.layout-single-column .explore__search-results .icon-button:hover .fa::before,
+.layout-single-column .notification .account__relationship .icon-button:hover .fa::before {
+ /* stylelint-disable-next-line */
+ color: var(--color-green);
+ opacity: 1;
+}
+
+.layout-single-column .notification .account__relationship {
+ border-radius: 50%;
+ height: 24px;
+ transform: translateY(-4px);
+ width: 24px;
+}
+
+.layout-single-column .notification .account__relationship:hover {
+ background-color: rgba(96, 105, 132, .15);
+}
+
+/* Emoji-mart search input */
+.layout-single-column .emoji-mart-search-icon svg {
+ fill: var(--color-border);
+ opacity: 1;
+}
+
+.layout-single-column .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg {
+ fill: var(--color-accent);
+}
+
+.layout-single-column .emoji-mart-search > input {
+ font-size: var(--font-size-smaller);
+}
+
+.layout-single-column .compose-form__autosuggest-wrapper textarea::placeholder,
+.layout-single-column .report-dialog-modal__textarea::placeholder,
+.layout-single-column .emoji-mart-search > input::placeholder {
+ color: var(--color-dim);
+ opacity: 1;
+}
+
+.layout-single-column .report-dialog-modal__textarea,
+.layout-single-column .report-dialog-modal__textarea:focus,
+.layout-single-column .emoji-mart-search > input:focus {
+ color: var(--color-light-text);
+}
+
+.layout-single-column .emoji-mart-search-icon:disabled {
+ opacity: 1;
+}
+
+/* Search */
+.layout-single-column .search .search__icon .fa-search {
+ background-color: var(--color-mud);
+ background-image: var(--icon-search);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 20px;
+ display: inline-block;
+ height: 24px;
+ top: 10px;
+ width: 24px;
+}
+
+.layout-single-column input.setting-text,
+.layout-single-column .search__input {
+ background-color: var(--color-mud);
+ border-color: var(--color-mud);
+ border-radius: 32px;
+ color: var(--color-dim);
+ font-size: var(--font-size);
+ height: 42px;
+ padding: 0 20px;
+}
+
+/* Input texts */
+.layout-single-column .poll__option input[type="text"],
+.layout-single-column input.setting-text:focus,
+.layout-single-column .search__input:focus {
+ color: var(--color-light-text);
+}
+
+/* Poll input */
+.layout-single-column .poll__option input[type="text"] {
+ background-color: transparent;
+ border-color: var(--color-border);
+}
+
+.layout-single-column .poll__option input[type="text"]:focus {
+ border-color: var(--color-accent);
+}
+
+/* Placeholders */
+.layout-single-column .poll__option input[type="text"]::placeholder,
+.layout-single-column .search__input::placeholder,
+.layout-single-column input::placeholder,
+.layout-single-column input.setting-text::placeholder {
+ color: var(--color-dim);
+ opacity: 1;
+}
+
+/* Profile */
+.layout-single-column .getting-started__trends h4,
+.layout-single-column .account__header__bar {
+ border-color: var(--color-border);
+}
+
+.layout-single-column .account__header__bio .account__header__fields {
+ background-color: transparent;
+ color: var(--color-dim);
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--gap-default);
+ padding: 0;
+}
+
+/* Hide label */
+.layout-single-column .account__header__bio .account__header__fields dt {
+ display: none;
+}
+
+/* Joined label */
+.layout-single-column .account__header__bio .account__header__fields dt:not([title]) {
+ display: inline-flex;
+ font-weight: 400;
+ gap: calc(var(--gap-default) / 2);
+ text-transform: unset;
+}
+
+.layout-single-column h4,
+.layout-single-column .search__popout h4,
+.layout-single-column .search-popout h4,
+.layout-single-column .server-banner h4 {
+ text-transform: unset;
+}
+
+.layout-single-column .account__header__bio .account__header__fields dt:not([title])::before {
+ content: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+ height: 18.5px;
+ width: 18.5px;
+}
+
+.layout-single-column .account__header__bio .account__header__fields dd,
+.layout-single-column .account__header__bio .account__header__fields dt {
+ color: var(--color-dim);
+ font-size: var(--font-size);
+}
+
+.layout-single-column .account__header__bio .account__header__fields dl {
+ background-color: transparent;
+ border: 0;
+ color: var(--color-dim);
+ display: inline-flex;
+ font-size: var(--font-size);
+ font-weight: 400;
+ gap: calc(var(--gap-default) / 2);
+ padding: 0;
+}
+
+.layout-single-column .getting-started__trends h4 {
+ border: 0;
+ font-size: var(--font-size-heading);
+ font-weight: var(--font-weight-bold);
+ line-height: 24px;
+ margin-bottom: var(--gap-default);
+ text-transform: unset;
+}
+
+.layout-single-column .getting-started__trends {
+ margin-top: calc(var(--gap-default) * 2);
+}
+
+.layout-single-column .trends__item__name a {
+ font-size: var(--font-size);
+}
+
+.layout-single-column .trends__item__name {
+ display: grid;
+ gap: 4px;
+}
+
+.layout-single-column .account__header__image {
+ height: 200px;
+}
+
+.layout-single-column .account__header__bar .avatar .account__avatar {
+ background-color: transparent;
+ border: 0;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: 133.5px !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 133.5px !important;
+}
+
+.layout-single-column .account__header__tabs {
+ overflow: visible;
+}
+
+.layout-single-column .account__header__tabs .account-role {
+ display: none;
+ width: 133.5px;
+}
+
+/* Follow/unfollow button */
+body.embed .button.logo-button,
+.layout-single-column .notification__report__actions .button,
+.layout-single-column .column-inline-form button,
+.layout-single-column .explore__suggestions .account-card__actions__button button,
+.layout-single-column .account__header__tabs__buttons .button {
+ background-color: transparent;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ color: var(--color-light-text);
+ font-size: var(--font-size);
+ padding-left: 16px;
+ padding-right: 16px;
+ transition: all 200ms;
+}
+
+/* Dark button borders and other things that have borders all around */
+body.embed .button.logo-button,
+.layout-single-column .notification__report__actions .button,
+.layout-single-column .column-inline-form button,
+.layout-single-column .explore__suggestions .account-card__actions__button button,
+.layout-single-column .account__header__tabs__buttons .button,
+.layout-single-column .account__header__tabs__buttons .icon-button {
+ border: 1px solid var(--color-outer-space);
+}
+
+.layout-single-column .account__header__tabs__buttons .icon-button {
+ color: var(--color-light-text);
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column .account__header__tabs__buttons .icon-button {
+ align-items: center;
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+ display: inline-flex;
+ justify-content: center;
+}
+
+body.embed .button.logo-button:hover,
+.layout-single-column .column-inline-form button:hover,
+.layout-single-column .explore__suggestions .account-card__actions__button button:hover,
+.layout-single-column .account__header__tabs__buttons .icon-button.active {
+ color: var(--color-light-text);
+}
+
+.layout-single-column .account__header__tabs__buttons .icon-button .fa::before {
+ font-size: 17px;
+}
+
+.layout-single-column .account__header__tabs__buttons .icon-button .fa-bell-o::before,
+.layout-single-column .account__header__tabs__buttons .icon-button .fa-bell::before {
+ content: var(--icon-bell-header-tabs);
+}
+
+.layout-single-column .account__header__tabs__buttons .icon-button.active .fa-bell-o::before,
+.layout-single-column .account__header__tabs__buttons .icon-button.active .fa-bell::before {
+ content: var(--icon-bell-header-tabs-active);
+}
+
+.layout-single-column .account__header__tabs__buttons .icon-button .fa-ellipsis-v::before {
+ position: relative;
+ top: -2px;
+}
+
+.layout-single-column .explore__suggestions .account-card__actions__button button:hover,
+.layout-single-column .account__header__tabs__buttons .button:focus,
+.layout-single-column .account__header__tabs__buttons .button:hover {
+ background-color: var(--color-profile-button-hover);
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:focus,
+.layout-single-column .status__action-bar .icon-button:focus,
+.layout-single-column .detailed-status__action-bar .icon-button:hover,
+.layout-single-column .status__action-bar .icon-button:hover {
+ background-color: transparent;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:hover::after,
+.layout-single-column .status__action-bar .icon-button:hover::after {
+ opacity: 1;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button::after,
+.layout-single-column .status__action-bar .icon-button::after {
+ background-color: rgba(96, 105, 132, .15);
+ border-radius: 50%;
+ content: '';
+ height: 36px;
+ left: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ top: -8px;
+ transform: translateX(8px) translateY(1px);
+ width: 36px;
+ z-index: -1;
+}
+
+.layout-single-column .conversation .icon-button::after {
+ transform: translateX(-8px) translateY(1px);
+}
+
+.layout-single-column .conversation__content {
+ overflow: visible;
+}
+
+.layout-single-column .detailed-status__button {
+ position: relative;
+}
+
+.layout-single-column .detailed-status__button .icon-button.star-icon::after {
+ transform: translateX(3px);
+}
+
+.layout-single-column .status__action-bar .icon-button.icon-button--with-counter::after {
+ transform: translateX(-6px) translateY(-1px);
+}
+
+/* Misc UI fixes */
+.layout-single-column .search__icon .fa.active {
+ opacity: 1;
+}
+
+/* Explore -> For you shade in bio */
+.layout-single-column .scrollable .account-card__bio::after {
+ /* stylelint-disable-next-line */
+ background: linear-gradient(270deg, var(--color-bg), transparent);
+}
+
+/* Empty column */
+.layout-single-column .empty-column-indicator {
+ min-height: 120px;
+}
+
+.layout-single-column .status__prepend + .status {
+ padding-top: 10px;
+}
+
+.layout-single-column .search__icon .fa-times-circle {
+ top: 14px;
+}
+
+.layout-single-column .setting-text__toolbar {
+ align-items: center;
+}
+
+.layout-single-column .timeline-hint strong {
+ display: block;
+ margin-bottom: var(--gap-default);
+}
+
+.layout-single-column .timeline-hint br {
+ display: none;
+}
+
+/* General fixes */
+.layout-single-column .account__header__bar .avatar {
+ /* stylelint-disable-next-line */
+ margin-left: 0 !important;
+}
+
+/* Fix for button line-height */
+.layout-single-column .button.logo-button {
+ line-height: 22px;
+}
+
+/* Visual indicator about direct messages
+ @source https://github.com/mastodon/mastodon/issues/22158#issuecomment-1353661031 */
+
+.layout-single-column .detailed-status-direct {
+ position: relative;
+}
+
+.layout-single-column .status__wrapper-direct::after,
+.layout-single-column .detailed-status-direct::after {
+ border-left: 20px solid transparent;
+ border-top: 20px solid var(--color-accent);
+ /* Add a ribbon to the corner */
+ content: '';
+ height: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 0;
+}
+
+.layout-single-column .notification .status__wrapper-direct::after {
+ top: -40px;
+}
+
+/* Private message conversations */
+.layout-single-column .conversation .status__action-bar {
+ padding-left: 0;
+}
+
+/* Default buttons */
+.layout-single-column .compose-form__buttons button,
+.layout-single-column .button {
+ border-bottom-left-radius: 9999px;
+ border-bottom-right-radius: 9999px;
+ border-top-left-radius: 9999px;
+ border-top-right-radius: 9999px;
+}
+
+/* Compose hover and focus fix */
+.layout-single-column .report-dialog-modal__actions .button:hover,
+.layout-single-column .server-banner .button,
+.layout-single-column .sign-in-banner .button,
+.layout-single-column .ui__header__links .button,
+.layout-single-column .compose-form__publish-button-wrapper button {
+ background-color: var(--color-accent-dark);
+ border-color: var(--color-accent-dark);
+ color: var(--color-button-text);
+ transition: all 200ms;
+}
+
+/* Compose form */
+.layout-single-column .compose-panel .compose-form {
+ background-color: transparent;
+ margin-bottom: 0;
+ position: relative;
+ z-index: 4;
+}
+
+/* Footer items */
+.link-footer {
+ position: relative;
+ z-index: 5;
+}
+
+.layout-single-column .compose-panel .compose-form,
+.layout-single-column .compose-panel,
+.layout-single-column .compose-form__autosuggest-wrapper {
+ overflow: visible;
+}
+
+/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
+@media (min-width: 889px) {
+ .layout-single-column .compose-form .autosuggest-textarea__textarea {
+ /* stylelint-disable-next-line */
+ max-height: 20vh !important; /* stylelint-disable-next-line */
+ overflow-y: auto !important;
+ resize: none;
+ }
+}
+
+@media (min-width: 889px) and (max-height: 1000px) {
+ .layout-single-column .compose-form .autosuggest-textarea__textarea {
+ /* stylelint-disable-next-line */
+ max-height: 10vh !important;
+ resize: none;
+ }
+}
+
+.layout-single-column .server-banner .button:hover,
+.layout-single-column .server-banner .button:focus,
+.layout-single-column .sign-in-banner .button:hover,
+.layout-single-column .sign-in-banner .button:hover:focus,
+.layout-single-column .ui__header__links .button:hover,
+.layout-single-column .ui__header__links .button:focus,
+.layout-single-column .compose-form__publish-button-wrapper button:hover,
+.layout-single-column .compose-form__publish-button-wrapper button:focus {
+ background-color: var(--color-brand-mastodon-links);
+ border-color: var(--color-brand-mastodon-links);
+ color: var(--color-button-text);
+}
+
+/* Tertiary button */
+.layout-single-column .button.button-tertiary {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ /* stylelint-disable-next-line */
+ border: 1px solid var(--color-accent-dark) !important;
+ color: var(--color-ghost-button-text);
+ padding: 6px 17px;
+}
+
+.layout-single-column .button.button-tertiary:active,
+.layout-single-column .button.button-tertiary:focus,
+.layout-single-column .button.button-tertiary:hover {
+ border: 1px solid var(--color-accent-dark);
+}
+
+/* Secondary button */
+.layout-single-column .button.button-secondary {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ border: 1px solid var(--color-dim);
+ color: var(--color-dim);
+}
+
+.layout-single-column .button.button-secondary:hover {
+ /* stylelint-disable-next-line */
+ background-color: var(--color-light-text) !important;
+ border-color: var(--color-light-text);
+ color: var(--color-bg);
+}
+
+.layout-single-column .button.button-tertiary:focus,
+.layout-single-column .button.button-tertiary:hover {
+ /* stylelint-disable-next-line */
+ background-color: var(--color-brand-mastodon-links) !important;
+ /* stylelint-disable-next-line */
+ border-color: var(--color-brand-mastodon-links) !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-bg) !important;
+
+ /* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */
+ padding: 6px 17px;
+}
+
+/* Smaller icon for back button */
+.layout-single-column .column-back-button i,
+.layout-single-column .column-header__back-button i {
+ font-size: 12px;
+}
+
+.layout-single-column .icon-button__counter {
+ font-size: var(--font-size-smaller);
+}
+
+.layout-single-column .notification__favourite-icon-wrapper .fa.fa-retweet {
+ color: var(--color-green);
+}
+
+/* Smaller icons for status action bar */
+.layout-single-column .status__action-bar .fa {
+ font-size: 14.6px;
+ min-width: 18px;
+}
+
+.layout-single-column .status__action-bar .icon-button--with-counter {
+ align-items: center;
+ display: inline-flex;
+ gap: 6px;
+}
+
+.layout-single-column .status__action-bar .icon-button {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: unset !important;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: unset !important;
+}
+
+@media screen and (min-width: 890px) {
+ /* Hide the space between Lists and the actual lists */
+ .layout-single-column .list-panel > hr,
+ .layout-single-column .list-panel + hr {
+ display: none;
+ }
+
+ /* Hide lists if there's not enough space on desktop vertically */
+ .layout-single-column .list-panel {
+ display: none;
+ opacity: 0;
+ transition: all 200ms;
+ }
+
+ .layout-single-column .list-panel:focus,
+ .layout-single-column .list-panel:hover,
+ .layout-single-column .column-link[href="/lists"]:focus ~ .list-panel,
+ .layout-single-column .column-link[href="/lists"]:hover ~ .list-panel {
+ display: block;
+ opacity: 1;
+ }
+
+ /* Order of the side nav items */
+ .layout-single-column .navigation-panel__logo {
+ order: 1;
+ }
+
+ .layout-single-column .column-link[href="/home"] {
+ order: 2;
+ }
+
+ .layout-single-column .column-link[href="/notifications"] {
+ order: 3;
+ }
+
+ .layout-single-column .column-link[href="/explore"] {
+ order: 4;
+ }
+
+ .layout-single-column .column-link[href="/public/local"] {
+ order: 5;
+ }
+
+ .layout-single-column .column-link[href="/public"] {
+ order: 6;
+ }
+
+ .layout-single-column .column-link[href="/conversations"] {
+ order: 7;
+ }
+
+ .layout-single-column .column-link[href='/follow_requests'] {
+ order: 8;
+ }
+
+ .layout-single-column .column-link[href="/bookmarks"] {
+ order: 9;
+ }
+
+ .layout-single-column .column-link[href="/favourites"] {
+ order: 10;
+ }
+
+ .layout-single-column .column-link[href="/lists"] {
+ order: 12;
+ }
+
+ /* stylelint-disable-next-line no-duplicate-selectors */
+ .layout-single-column .list-panel {
+ order: 13;
+ }
+
+ .layout-single-column .column-link[href="/settings/preferences"] {
+ order: 11;
+ }
+
+ .layout-single-column .navigation-panel__sign-in-banner,
+ .layout-single-column .navigation-panel__legal {
+ order: 14;
+ }
+
+ .layout-single-column .flex-spacer {
+ order: 15;
+ }
+
+ .layout-single-column .getting-started__trends {
+ order: 16;
+ }
+
+ .layout-single-column .status__action-bar .icon-button {
+ position: relative;
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 50px !important;
+ }
+
+ .layout-single-column .conversation .status__action-bar .icon-button {
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: auto !important;
+ }
+
+ /* Fix list links if they are too short */
+ .layout-single-column .list-panel .column-link {
+ display: flex;
+ }
+}
+
+/* Replace bookmark icon */
+.layout-single-column .detailed-status .fa-bookmark::before,
+.layout-single-column .status .fa-bookmark::before {
+ content: var(--icon-bookmark);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .column-link .fa-bookmark::before {
+ content: var(--icon-bookmark-column-link);
+}
+
+.layout-single-column .column-link.active .fa-bookmark::before {
+ content: var(--icon-bookmark-column-link-active);
+}
+
+/* Replace bookmark icon */
+.layout-single-column .status .icon-button:hover:focus .fa-bookmark::before,
+.layout-single-column .status .icon-button:focus .fa-bookmark::before,
+.layout-single-column .status .icon-button.active .fa-bookmark::before {
+ content: var(--icon-bookmark-active);
+}
+
+.layout-single-column .status button.icon-button:hover .fa-bookmark::before {
+ content: var(--icon-bookmark-status-hover);
+}
+
+/* Notifications icon */
+.layout-single-column .column-link .fa-bell::before {
+ content: var(--icon-bell);
+}
+
+.layout-single-column .column-link.active .fa-bell::before {
+ content: var(--icon-bell-active);
+}
+
+/* Home icon */
+.layout-single-column .notification__filter-bar .fa-home::before {
+ content: var(--icon-home-notification);
+}
+
+.layout-single-column .notification__filter-bar .active .fa-home::before {
+ content: var(--icon-home-notification-active);
+}
+
+.layout-single-column .column-link .fa-home::before {
+ content: var(--icon-home);
+ position: relative;
+ top: 1px;
+}
+
+/* Federated icon */
+.layout-single-column .column-link .fa-globe::before {
+ content: var(--icon-globe);
+}
+
+.layout-single-column .column-link.active .fa-home::before {
+ content: var(--icon-home-column-link-active);
+}
+
+/* Explore icon */
+.layout-single-column .column-link .fa-hashtag::before {
+ content: var(--icon-hashtag);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .column-link.active .fa-hashtag::before {
+ content: var(--icon-hashtag-active);
+ position: relative;
+ top: 1px;
+}
+
+/* Local icon */
+.layout-single-column .column-link .fa-users::before {
+ content: var(--icon-users-column-link);
+ position: relative;
+ top: 2px;
+}
+
+.layout-single-column .column-link.active .fa-users::before {
+ content: var(--icon-users-column-link-active);
+}
+
+/* Direct messages icon */
+.layout-single-column .column-link .fa-at::before {
+ content: var(--icon-direct-messages);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .column-link.active .fa-at {
+ transform: scale(1.15);
+}
+
+.layout-single-column .column-link.active .fa-at::before {
+ content: var(--icon-direct-messages-active);
+ position: relative;
+ top: 2px;
+}
+
+/* Replace share icon */
+.layout-single-column .detailed-status .fa-share-alt::before,
+.layout-single-column .status .fa-share-alt::before {
+ content: var(--icon-share);
+}
+
+.layout-single-column .status button.icon-button:hover .fa-share-alt::before {
+ content: var(--icon-share-hover);
+}
+
+/* Replace retweet icon */
+.layout-single-column .notification__filter-bar .fa-retweet::before {
+ content: var(--icon-boost-notification-filter-bar);
+ position: relative;
+ top: 2px;
+}
+
+.layout-single-column .notification__filter-bar .active .fa-retweet::before {
+ content: var(--icon-boost-notification-filter-bar-active);
+ position: relative;
+ top: 2px;
+}
+
+.layout-single-column .notification__filter-bar .fa-tasks::before,
+.layout-single-column .notification__filter-bar .fa-user-plus::before {
+ font-size: 18px;
+}
+
+.layout-single-column .notification__filter-bar .active .fa-mailre-ply::before,
+.layout-single-column .notification__filter-bar .active .fa-reply-all::before,
+.layout-single-column .notification__filter-bar .active .fa-reply::before {
+ content: var(--icon-reply-nofitication-filter-bar-active);
+}
+
+.layout-single-column .detailed-status button.icon-button i.fa-retweet,
+.layout-single-column .status button.icon-button i.fa-retweet {
+ background-image: var(--icon-boost-status);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+/* Replace notification retweet icon */
+.layout-single-column .notification__favourite-icon-wrapper .fa-retweet::before {
+ content: var(--icon-boost-notification-wrapper);
+ position: relative;
+ top: 2px;
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column button.icon-button i.fa-retweet {
+ background-image: var(--icon-boost);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.layout-single-column button.icon-button:hover i.fa-retweet,
+.layout-single-column button.icon-button.active i.fa-retweet {
+ background-image: var(--icon-boost-active);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+/* Un-boost and un-bookmark styles */
+/* Mobile devices */
+.layout-single-column button.icon-button:not(.active):focus i.fa-retweet,
+.layout-single-column button.icon-button:not(.active):hover i.fa-retweet {
+ animation: none;
+ background-image: var(--icon-boost);
+}
+
+.layout-single-column .status button.icon-button:not(.active):focus .fa-bookmark::before,
+.layout-single-column .status button.icon-button:not(.active):hover .fa-bookmark::before {
+ content: var(--icon-bookmark);
+}
+
+
+/* Un-boost and un-bookmark numbers on explore page */
+.layout-single-column button.icon-button:not(.active):focus i.fa-retweet ~ span,
+.layout-single-column button.icon-button:not(.active):hover i.fa-retweet ~ span {
+ color: var(--color-dim);
+}
+
+
+/* If a hover device */
+@media (hover: hover) {
+ .layout-single-column button.icon-button:not(.active):hover i.fa-retweet,
+ .layout-single-column button.icon-button:not(.active):hover i.fa-retweet ~ span {
+ color: var(--color-green);
+ }
+
+ .layout-single-column .status button.icon-button:not(.active):hover i.fa-bookmark::before {
+ /* stylelint-disable-next-line */
+ content: var(--icon-bookmark-status-hover-red);
+ }
+
+ .layout-single-column button.icon-button:not(.active):hover i.fa-retweet {
+ /* stylelint-disable-next-line */
+ background-image: var(--icon-boost-active) !important;
+ }
+}
+
+.layout-single-column button.icon-button:hover i.fa-retweet ~ span,
+.layout-single-column button.icon-button.active i.fa-retweet ~ span {
+ color: var(--color-green);
+}
+
+.layout-single-column button.icon-button:hover i.fa-star ~ span,
+.layout-single-column button.icon-button.active i.fa-star ~ span {
+ color: var(--color-red);
+}
+
+/* Replace reply icon */
+.layout-single-column .notification__filter-bar .fa-mail-reply::before,
+.layout-single-column .notification__filter-bar .fa-reply::before,
+.layout-single-column .notification__filter-bar .fa-reply-all::before {
+ position: relative;
+ top: 4px;
+}
+
+.layout-single-column .conversation .fa-reply::before,
+.layout-single-column .notification__filter-bar .fa-mail-reply::before,
+.layout-single-column .notification__filter-bar .fa-reply::before,
+.layout-single-column .notification__filter-bar .fa-reply-all::before,
+.layout-single-column .detailed-status .fa-mail-reply::before,
+.layout-single-column .detailed-status .fa-reply::before,
+.layout-single-column .detailed-status .fa-reply-all::before,
+.layout-single-column .status .fa-mail-reply::before,
+.layout-single-column .status .fa-reply::before,
+.layout-single-column .status .fa-reply-all::before {
+ content: var(--icon-reply);
+ position: relative;
+ top: 2px;
+}
+
+.layout-single-column .detailed-status__action-bar .fa-mail-reply::before,
+.layout-single-column .detailed-status__action-bar .fa-reply::before,
+.layout-single-column .detailed-status__action-bar .fa-reply-all::before {
+ content: var(--icon-reply-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-mail-reply::before,
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-reply::before,
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-reply-all::before {
+ content: var(--icon-reply-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .conversation .icon-button:hover .fa-reply::before {
+ content: var(--icon-reply-conversation);
+}
+
+.layout-single-column .detailed-status__action-bar .fa-share::before,
+.layout-single-column .detailed-status__action-bar .fa-share-alt::before {
+ content: var(--icon-share-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-share::before,
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-share-alt::before {
+ content: var(--icon-share-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .detailed-status__action-bar .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar-hover);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button.active .fa-bookmark::before {
+ content: var(--icon-bookmark-detailed-status-action-bar-active);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .status button.icon-button:hover .fa-mail-reply::before,
+.layout-single-column .status button.icon-button:hover .fa-reply::before,
+.layout-single-column .status button.icon-button:hover .fa-reply-all::before {
+ content: var(--icon-reply-status-hover);
+}
+
+/* More icons */
+.layout-single-column .fa-list-ul::before {
+ content: var(--icon-list);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .relationship-tag {
+ background-color: var(--color-mud);
+ color: var(--color-light-text);
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 12px;
+ opacity: 1;
+}
+
+/* iPad etc. */
+@media (max-width: 1174px) {
+ .layout-single-column .detailed-status__action-bar .icon-button::after,
+ .layout-single-column .status__action-bar .icon-button::after,
+ .layout-single-column .detailed-status__action-bar-dropdown .icon-button::after {
+ display: none;
+ }
+
+ .layout-single-column .ui__header,
+ .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-single-column .tabs-bar__wrapper {
+ backdrop-filter: unset;
+ background-color: transparent;
+ padding: 0;
+ }
+
+ .layout-single-column .columns-area__panels__main {
+ width: calc(100% - var(--width-side-panel));
+ }
+}
+
+/* In-between breakpoint */
+@media (min-width: 889px) and (max-width: 1174px) {
+ .layout-single-column .columns-area__panels__main > div {
+ border-right: 0;
+ }
+
+ .layout-single-column .ui__header,
+ .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper,
+ .layout-single-column .tabs-bar__wrapper {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ border-color: var(--color-border);
+ }
+
+ .layout-single-column .columns-area__panels {
+ width: calc(100% - 1px);
+ }
+
+ .layout-single-column .columns-area__panels__main > .tabs-bar__wrapper {
+ border-right: 0;
+ }
+}
+
+/* Mobile */
+@media screen and (max-width: 889px) {
+ /* Better blur overlay for ui-header */
+ .layout-single-column .ui::after {
+ backdrop-filter: blur(12px);
+ background-color: var(--color-bg-75);
+ content: '';
+ /* Height is .ui__header + .tabs-bar__wrapper */
+ height: calc(48px + 56px);
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ }
+
+ /* Fix navigation-bar getting underneath layer */
+ .layout-single-column .navigation-bar {
+ z-index: 2;
+ }
+
+ .layout-single-column .tabs-bar__wrapper {
+ margin-right: 0;
+ position: sticky;
+ top: 55px;
+ z-index: 2;
+ }
+
+ .layout-single-column .columns-area__panels__main {
+ order: 1;
+ position: unset;
+ width: 100%;
+ }
+
+ .layout-single-column .columns-area__panels {
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ .layout-single-column .columns-area__panels__main::-webkit-scrollbar {
+ display: none;
+ }
+
+ .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+ background-color: var(--color-bg);
+ border-top: 1px solid var(--color-border);
+ bottom: 0;
+ height: 3.5rem;
+ left: 0;
+ max-height: 16vh;
+ width: 100vw;
+ }
+
+ .layout-single-column .columns-area__panels__pane--navigational .navigation-panel {
+ flex-direction: row;
+ gap: 0;
+ height: 100%;
+ overflow-x: auto;
+ padding: 0;
+ }
+
+ .layout-single-column .columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
+ display: none;
+ }
+
+ .layout-single-column .column-link {
+ justify-content: center;
+ margin-right: unset;
+ padding-bottom: 0;
+ padding-left: var(--gap-default);
+ padding-right: var(--gap-default);
+ padding-top: 0;
+ width: 38px;
+ }
+
+ .layout-single-column .item-list .column-link {
+ padding-bottom: 4px;
+ padding-top: 4px;
+ width: unset;
+ }
+
+ .layout-single-column .column-link:hover,
+ .layout-single-column .column-link:focus {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-home {
+ font-size: 27px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-ellipsis-h {
+ position: relative;
+ top: -4px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-users,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
+ font-size: 20px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon {
+ font-size: 24px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-fw {
+ font-size: 22px;
+ }
+
+ .columns-area__panels__pane--navigational .column-link__icon.fa-star,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bookmark,
+ .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
+ font-size: 18px;
+ position: relative;
+ top: 1px;
+ }
+
+ .layout-single-column .columns-area__panels__main > div,
+ .layout-single-column .columns-area__panels__main > div.columns-area.columns-area--mobile {
+ border: 0;
+ }
+
+ .layout-single-column .ui__header {
+ align-items: center;
+ border-bottom: 0;
+ box-sizing: border-box;
+ display: flex;
+ height: 56px;
+ justify-content: space-between;
+ position: sticky;
+ top: 0;
+ width: 100%;
+ z-index: 2;
+ }
+
+ .layout-single-column .account__header__bar .avatar .account__avatar {
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ height: 106px !important;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ width: 106px !important;
+ }
+
+ .layout-single-column .account__header__image {
+ height: 157px;
+ }
+
+ .layout-single-column .column > .scrollable {
+ padding-bottom: 55px;
+ }
+
+ .layout-single-column .actions-modal ul li:not(:empty) a {
+ color: var(--color-light-text);
+ }
+
+ /* "Your lists" view */
+ .layout-single-column .column-subheading ~ article {
+ padding-bottom: calc(var(--gap-default) / 2);
+ padding-top: calc(var(--gap-default) / 2);
+ }
+
+ .layout-single-column .compose-form {
+ padding-bottom: calc(3.5rem + calc(var(--gap-default) * 2));
+ }
+
+ /* Column items order */
+ .layout-single-column .navigation-panel .column-link,
+ .layout-single-column .navigation-panel .list-panel,
+ .layout-single-column .navigation-panel hr,
+ .layout-single-column .navigation-panel .navigation-panel__logo {
+ order: 99;
+ }
+
+ /* Make the column link 1/4 of width of the screen */
+ .layout-single-column .navigation-panel .navigation-panel__legal,
+ .layout-single-column .navigation-panel .column-link {
+ flex: 0 0 calc(100vw / 4);
+ padding: 0;
+ }
+
+ .layout-single-column .navigation-panel .navigation-panel__legal {
+ order: 999;
+ text-align: center;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(1) {
+ order: 2;
+ }
+
+ /* Home */
+ .layout-single-column .navigation-panel .column-link:nth-child(2) {
+ order: 1;
+ }
+
+ /* Notifications */
+ .layout-single-column .navigation-panel .column-link:nth-child(3) {
+ order: 4;
+ }
+
+ /* Explore */
+ .layout-single-column .navigation-panel .column-link:nth-child(4) {
+ order: 2;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(5) {
+ order: 5;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(6) {
+ order: 6;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(7) {
+ order: 7;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(8) {
+ order: 8;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(9) {
+ order: 9;
+ }
+
+ /* Lists */
+ .layout-single-column .navigation-panel .column-link:nth-child(10) {
+ order: 4;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(11) {
+ order: 11;
+ }
+
+ .layout-single-column .navigation-panel .column-link:nth-child(12) {
+ order: 12;
+ }
+}
+
+/* Retweet animation */
+/* stylelint-disable-next-line selector-not-notation */
+.layout-single-column.no-reduce-motion .icon-button.active:not([aria-label="Unboost"]):not([aria-label="Peru tehostus"]) .fa-retweet {
+ /* stylelint-disable-next-line */
+ animation: spring-rotate-in 1s linear;
+}
+
+.layout-single-column.no-reduce-motion .icon-button:focus .fa-retweet {
+ /* stylelint-disable-next-line */
+ animation: spring-rotate-in 1s linear;
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button {
+ position: relative;
+}
+
+.layout-single-column .detailed-status__action-bar-dropdown .icon-button::after,
+.layout-single-column .detailed-status__button .icon-button::after {
+ transform: translateX(-6px);
+}
+
+/* Add border radius to media */
+.layout-single-column .media-gallery,
+.layout-single-column .audio-player,
+.layout-single-column .video-player,
+.layout-single-column .media-gallery__gifv,
+.layout-single-column .media-gallery__preview {
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+.layout-single-column .media-gallery__item-thumbnail:has(> img:not([alt]))::after,
+.layout-single-column .video-player:has(> video:not([title]))::after,
+.layout-single-column .media-gallery__gifv:has(> video:not([title]))::after {
+ align-self: flex-end;
+ background-color: var(--color-bg-75);
+ border-radius: var(--border-radius-badges);
+ bottom: var(--badges-distance-from-edge);
+ color: var(--color-light-text);
+ content: 'No alt';
+ display: flex;
+ font-size: 9px;
+ font-weight: 500;
+ height: 14px;
+ justify-self: flex-end;
+ left: auto;
+ line-height: 14px;
+ opacity: 1;
+ padding: 2px 5px;
+ position: absolute;
+ right: var(--badges-distance-from-edge);
+ text-transform: uppercase;
+ top: auto;
+ width: unset;
+ z-index: 3;
+}
+
+.layout-single-column .media-gallery__item-thumbnail:has(> img:not([alt])):focus::after,
+.layout-single-column .video-player:has(> video:not([title])):focus::after,
+.layout-single-column .media-gallery__gifv:has(> video:not([title])):focus::after,
+.layout-single-column .media-gallery__item-thumbnail:has(> img:not([alt])):hover::after,
+.layout-single-column .video-player:has(> video:not([title])):hover::after,
+.layout-single-column .media-gallery__gifv:has(> video:not([title])):hover::after {
+ background-color: var(--color-red);
+}
+
+/* Exception for your own profile media gallery */
+.layout-single-column .account-gallery__container .media-gallery__gifv {
+ border-radius: 0;
+}
+
+/* More distinct focus color for accessibility, instead of just white */
+.layout-single-column input:focus-visible {
+ outline-color: var(--color-accent);
+ outline-style: solid;
+}
+
+/* Embeds outside Mastodon */
+body.embed .entry .detailed-status {
+ backface-visibility: hidden;
+ background-color: #00000059;
+
+ /* It's inlined so we have to use !important */
+ /* stylelint-disable-next-line */
+ border-radius: 10px !important;
+ overflow: hidden;
+}
+
+/* Verified */
+.layout-single-column .account__header__fields .verified a,
+.layout-single-column .account__header__bio .account__header__fields .verified a,
+.layout-single-column .account__header__bio .account__header__fields .verified dd,
+.layout-single-column .account__header__bio .account__header__fields .verified dt {
+ color: var(--color-verified);
+}
+
+/* Destructive colors (For you -suggestions, users when focused to the follow button */
+.layout-single-column .button.logo-button.button--destructive:active,
+.layout-single-column .button.logo-button.button--destructive:focus {
+ background-color: var(--color-destructive);
+ border-color: var(--color-destructive);
+}
+
+/* Fix character counter color when it's over the limit */
+.layout-single-column .character-counter.character-counter--over {
+ color: var(--color-destructive);
+}
+
+/* Follow hashtag icon */
+.layout-single-column .column-header__button .column-header__icon.fa-user-plus::before {
+ content: var(--icon-follow-hashtag);
+ position: relative;
+ top: 2px;
+}
+
+/* Unfollow hashtag icon */
+.layout-single-column .column-header__button .column-header__icon.fa-user-times::before {
+ content: var(--icon-unfollow-hashtag);
+ position: relative;
+ top: 2px;
+}
+
+/* Show more in server banner */
+.layout-single-column .server-banner__meta__column {
+ max-width: 60%;
+ width: unset;
+}
+
+/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors, selector-max-specificity, selector-max-pseudo-class, selector-not-notation */
+/* Threaded replies, see https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/4 */
+.layout-single-column .scrollable > div > div .status.status-reply {
+ border-color: transparent;
+ position: relative;
+}
+
+/* If we don't have threads support yet, just use borders */
+.layout-single-column .scrollable > div:not(:has(.status__thread)) .status.status-reply {
+ border-color: var(--color-border);
+}
+
+/* Always have border-bottom in threads on main level to separate the discussions */
+.layout-single-column .scrollable > div > div.status__thread,
+.layout-single-column .scrollable > div > div.status__thread:has(.status__thread) > div.status__thread:not(.status__thread--last-item),
+.layout-single-column .scrollable > div > div:not([class]) > div.status__thread {
+ border-bottom: 1px solid var(--color-border);
+}
+
+.layout-single-column .scrollable > div > div.status__thread > div.status__thread:not(.status__thread--last-item):not(:has(.status__thread--last-item)) {
+ border-bottom: 0;
+}
+
+/* If we don't have threads support yet, hide faux lines */
+.layout-single-column .scrollable > div:not(:has(.status__thread)) .status.status-reply .status__avatar::before {
+ background-color: transparent;
+ width: 0;
+}
+
+.layout-single-column .scrollable > div > .status__thread > .status__thread > div > div > .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread ~ .status__thread--first-item + .status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread.status__thread--last-item.status__thread--first-item .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread ~ .status__thread .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread.status__thread--first-item + .status__thread.status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread + .status__thread ~ .status__thread ~ .status__thread .status.status-reply .status__avatar::before {
+ background-color: var(--color-thread-line);
+ content: '';
+ height: 100%;
+ left: calc(calc(calc(var(--size-avatar) / 2) + 16px) - 1px);
+ position: absolute;
+ top: 24px;
+ width: 2px;
+}
+
+/* Hide thread lines from the last items for at least 10 levels */
+.layout-single-column .scrollable > div > div.status__thread:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread:not(:has(.status__thread)).status__thread--last-item .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before,
+.layout-single-column .scrollable > div > .status__thread > .status__thread:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:has(.status__thread--last-item) > .status__thread--last-item:not(:has(.status__thread)) .status.status-reply .status__avatar::before {
+ /* stylelint-disable-next-line */
+ background-color: transparent !important;
+}
+
+.layout-single-column .scrollable > div > .status__thread.status__thread--first-item .status.status-reply .status__avatar::before {
+ top: 60px;
+}
+
+/* Scrollbars */
+.layout-single-column textarea::-webkit-scrollbar,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar,
+.layout-single-column .reply-indicator::-webkit-scrollbar,
+.layout-single-column::-webkit-scrollbar {
+ height: 6px;
+ width: 6px;
+}
+
+.layout-single-column textarea::-webkit-scrollbar-thumb,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
+.layout-single-column .reply-indicator::-webkit-scrollbar-thumb,
+.layout-single-column::-webkit-scrollbar-thumb {
+ background-color: var(--color-border);
+ border: 0px solid var(--color-border);
+ border-radius: 50px;
+}
+
+.layout-single-column textarea::-webkit-scrollbar-thumb:hover,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover,
+.layout-single-column .reply-indicator::-webkit-scrollbar-thumb:hover,
+.layout-single-column::-webkit-scrollbar-thumb:hover {
+ background-color: var(--color-light-purple);
+}
+
+.layout-single-column textarea::-webkit-scrollbar-thumb:active,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active,
+.layout-single-column .reply-indicator::-webkit-scrollbar-thumb:active,
+.layout-single-column::-webkit-scrollbar-thumb:active {
+ background-color: var(--color-black-coral);
+}
+
+.layout-single-column textarea::-webkit-scrollbar-track,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track,
+.layout-single-column .reply-indicator::-webkit-scrollbar-track,
+.layout-single-column::-webkit-scrollbar-track {
+ background-color: var(--color-bg);
+ border: 0px solid var(--color-border);
+ border-radius: 0;
+}
+
+.layout-single-column textarea::-webkit-scrollbar-track:hover,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover,
+.layout-single-column .reply-indicator::-webkit-scrollbar-track:hover,
+.layout-single-column::-webkit-scrollbar-track:hover {
+ background-color: var(--color-bg);
+}
+
+.layout-single-column textarea::-webkit-scrollbar-track:active,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:active,
+.layout-single-column .reply-indicator::-webkit-scrollbar-track:active,
+.layout-single-column::-webkit-scrollbar-track:active {
+ background-color: var(--color-bg);
+}
+
+.layout-single-column textarea::-webkit-scrollbar-corner,
+.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-corner,
+.layout-single-column .reply-indicator::-webkit-scrollbar-corner,
+.layout-single-column::-webkit-scrollbar-corner {
+ background-color: transparent;
+}
+
+/*
+ * Heart animation micro-interactions start
+ * ----------------------------------------
+ */
+
+@keyframes heart-animate {
+ 100% {
+ background-position: -2800px;
+ }
+}
+
+/* Left sidebar column links */
+.layout-single-column .column-link .fa-star::before {
+ content: var(--icon-heart-column-link);
+}
+
+@media (min-width: 889px) {
+ .layout-single-column .column-link .fa-star::before {
+ position: relative;
+ top: 2px;
+ }
+}
+
+.layout-single-column .column-link.active .fa-star::before {
+ content: var(--icon-heart-column-link-active);
+}
+
+.layout-single-column .notification__favourite-icon-wrapper .fa-star::before {
+ content: var(--icon-heart-notification);
+}
+
+.layout-single-column .notification__filter-bar .fa-star::before,
+.layout-single-column .detailed-status__action-bar .icon-button .fa-star::before,
+.layout-single-column .status__action-bar .icon-button .fa-star::before {
+ content: var(--icon-heart);
+ position: relative;
+ top: 1px;
+}
+
+.layout-single-column .notification__filter-bar .active .fa-star::before {
+ content: var(--icon-heart-active);
+}
+
+.layout-single-column .detailed-status__action-bar .active:not(.activated) .fa-star::before,
+.layout-single-column .status__action-bar .active:not(.activated) .fa-star::before {
+ content: var(--icon-heart-active-red);
+}
+
+.layout-single-column .notification__filter-bar .fa-star::before {
+ position: relative;
+ top: 2px;
+}
+
+.icon-button.star-icon.active,
+.notification__favourite-icon-wrapper .star-icon {
+ color: var(--color-red);
+}
+
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before,
+.layout-single-column .detailed-status button.icon-button:hover .fa-star::before,
+.layout-single-column .status button.icon-button:hover .fa-star::before {
+ content: var(--icon-heart-hover);
+}
+
+.layout-single-column.no-reduce-motion .icon-button.star-icon {
+ min-height: 23px;
+ min-width: 42.22px;
+ position: relative;
+}
+
+/* Disable default Mastodon animation: spring-rotate-in 1s linear; */
+.layout-single-column.no-reduce-motion .icon-button.star-icon .fa-star {
+ /* stylelint-disable-next-line */
+ animation: none !important;
+}
+
+.layout-single-column.no-reduce-motion .icon-button.star-icon.activate:hover .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: '' !important;
+}
+
+.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before {
+ animation: heart-animate 0.8s steps(28) forwards;
+ /* stylelint-disable-next-line */
+ background-image: url(data:image/png;base64,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);
+ background-position: 0px;
+ background-repeat: no-repeat;
+ /* stylelint-disable-next-line */
+ content: '' !important;
+ height: 100px;
+ left: -38px;
+ pointer-events: none;
+ position: absolute;
+ top: -38px;
+ transform: scale(.6);
+ width: 100px;
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before {
+ left: -24px;
+}
+
+@media screen and (max-width: 889px) {
+ /* stylelint-disable-next-line */
+ .layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before {
+ left: -28px;
+ }
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate .fa-star::before {
+ left: -38px;
+}
+
+/* stylelint-disable-next-line */
+.layout-single-column.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .fa-star::before {
+ left: -29px;
+}
+
+/*
+ * --------------------------------------
+ * Heart animation micro-interactions end
+ */
+
+/*
+ * Star animation micro-interactions start (depends on the heart icon above)
+ * If you prefer hearts, remove everything below this comment until
+ * "Star animation micro-interactions end"
+ * -------------------------------------------------------------------------
+ */
+
+/* If a hover device */
+@media (hover: hover) {
+ .layout-single-column button.icon-button:not(.active):hover i.fa-star,
+ .layout-single-column button.icon-button:not(.active):hover i.fa-star ~ span,
+ .layout-single-column button.icon-button:not(.active):hover i.fa-star::before {
+ color: var(--color-yellow);
+ }
+
+ .layout-single-column button.icon-button.active:hover i.fa-star ~ span {
+ color: var(--color-dim);
+ }
+}
+
+/* stylelint-disable no-duplicate-selectors */
+/* Left sidebar column links */
+.layout-single-column .column-link .fa-star::before {
+ content: var(--icon-star-column-link);
+}
+
+.layout-single-column .column-link.active .fa-star::before {
+ content: var(--icon-star-column-link-active);
+}
+
+.layout-single-column .notification__favourite-icon-wrapper .fa-star::before {
+ content: var(--icon-star-notification);
+}
+
+/* Replace notification tab bar icon with star */
+.layout-single-column .notification__filter-bar .active .fa-star::before {
+ content: var(--icon-star-active);
+}
+
+/* Numbers on hover */
+.layout-single-column button.icon-button:hover i.fa-star ~ span {
+ color: var(--color-dim);
+}
+
+/* Numbers when the star is active/activated */
+.layout-single-column button.icon-button.activate i.fa-star ~ span,
+.layout-single-column button.icon-button.active i.fa-star ~ span {
+ color: var(--color-yellow);
+}
+
+/* The actual star icon */
+.layout-single-column .notification__filter-bar .fa-star::before,
+.layout-single-column .detailed-status__action-bar .icon-button .fa-star::before,
+.layout-single-column .status__action-bar .icon-button .fa-star::before {
+ content: "\f006";
+ font-size: 20px;
+ left: 0;
+ position: relative;
+ top: 0;
+}
+
+/* Active star icon */
+.layout-single-column .notification__filter-bar button.icon-button.active .fa-star::before,
+.layout-single-column .detailed-status__action-bar button.icon-button.active .fa-star::before,
+.layout-single-column .status__action-bar button.icon-button.active .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: "\f005" !important;
+ display: block;
+}
+
+/* Active star when activated */
+.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before {
+ animation: sparkles-width .65s 1, sparkles-size .65s 1, popping .5s 1;
+ /* stylelint-disable-next-line */
+ background-color: unset !important;
+ /* stylelint-disable-next-line */
+ background-image: none !important;
+ /* stylelint-disable-next-line */
+ color: var(--color-yellow);
+ /* stylelint-disable-next-line */
+ content: "\f005" !important;
+ height: unset;
+ /* stylelint-disable-next-line */
+ left: unset !important;
+ position: relative;
+ top: 0;
+ transform: none;
+ width: unset;
+}
+
+/* Star sparkles, when activated */
+.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after,
+.layout-single-column .status__action-bar button.icon-button.activate.star-icon::after {
+ animation: sparkles-width .65s 1, sparkles-size .65s 1;
+ /* stylelint-disable-next-line */
+ background-color: unset !important;
+ content: '';
+ /* stylelint-disable-next-line */
+ height: 50px !important;
+ /* stylelint-disable-next-line */
+ left: 50% !important;
+ margin-left: -24px;
+ margin-top: -20px;
+ opacity: unset;
+ position: absolute;
+ top: calc(50% + 1px);
+ transform: none;
+ /* stylelint-disable-next-line */
+ width: 50px !important;
+ z-index: unset;
+}
+
+/* Ensure everything shows up on mobile */
+.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .fa-star::before,
+.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate::after,
+.layout-single-column .status__action-bar button.icon-button.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ display: block !important;
+}
+
+/* Star circle/ring */
+.layout-single-column .detailed-status__action-bar button.icon-button.activate.star-icon::before,
+.layout-single-column .status__action-bar button.icon-button.activate.star-icon::before {
+ animation: ring-border-width .35s 1, ring-size .35s 1;
+ border: 0px solid var(--color-yellow);
+ border-radius: 10em;
+ content: '';
+ height: 0em;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transform-origin: 50px 50px;
+ width: 0em;
+}
+
+.layout-single-column .icon-button.star-icon.active,
+.layout-single-column .notification__favourite-icon-wrapper .star-icon {
+ color: var(--color-yellow);
+}
+
+.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .fa-star::before,
+.layout-single-column .status__action-bar button.icon-button.deactivate.star-icon:hover .fa-star::before,
+.layout-single-column .detailed-status__action-bar .icon-butto.deactivate .fa-star::before,
+.layout-single-column .detailed-status button.icon-button.deactivate .fa-star::before,
+.layout-single-column .status button.icon-button.deactivate .fa-star::before {
+ color: var(--color-dim);
+ /* stylelint-disable-next-line */
+ content: '\f006' !important;
+}
+
+.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
+.layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
+.layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before,
+.layout-single-column .detailed-status button.icon-button:hover .fa-star::before,
+.layout-single-column .status button.icon-button:hover .fa-star::before {
+ color: var(--color-yellow);
+ /* stylelint-disable-next-line */
+ content: "\f006" !important;
+ position: relative;
+ top: 0;
+}
+
+/* Prevent the star from being highlighted when the button is focused, especially while logged out */
+.layout-single-column .detailed-status__action-bar .icon-button:focus .fa-star::before,
+.layout-single-column .detailed-status button.icon-button:focus .fa-star::before,
+.layout-single-column .status button.icon-button:hover .fa-star::before {
+ color: var(--color-dim);
+}
+
+/* Mobile devices */
+@media (hover: none) {
+ .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.activate:hover .fa-star::before,
+ .layout-single-column .status__action-bar button.icon-button.activate.star-icon:hover .fa-star::before,
+ .layout-single-column .detailed-status__action-bar .icon-button:hover .fa-star::before,
+ .layout-single-column .detailed-status button.icon-button:hover .fa-star::before,
+ .layout-single-column .status button.icon-button:hover .fa-star::before {
+ /* stylelint-disable-next-line */
+ content: '\f005' !important;
+ }
+}
+
+/* Sparkle offset on numbered item */
+.layout-single-column .detailed-status__action-bar button.icon-button.star-icon.icon-button--with-counter.star-icon.activate::after,
+.layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 14px) !important;
+
+ /* stylelint-disable-next-line */
+ top: calc(50% + -1px) !important;
+}
+
+/* Circle offset on numbered item */
+.layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before,
+.layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 14px) !important;
+}
+
+/* Fix the sparkle and circle position on small screens on the Explore */
+@media (max-width: 888px) {
+ /* Sparkle offset on numbered item */
+ .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.star-icon.activate.star-icon::after {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 11px) !important;
+ }
+
+ /* Circle offset on numbered item */
+ .layout-single-column .detailed-status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before,
+ .layout-single-column .status__action-bar button.icon-button.icon-button--with-counter.activate.star-icon::before {
+ /* stylelint-disable-next-line */
+ left: calc(50% - 11px) !important;
+ }
+}
+
+@keyframes popping {
+ 0% {
+ transform: scale(0, 0);
+ }
+
+ 40% {
+ transform: scale(0, 0);
+ }
+
+ 75% {
+ transform: scale(1.3, 1.3);
+ }
+
+ 100% {
+ transform: scale(1, 1);
+ }
+}
+
+@keyframes ring-border-width {
+ 0% {
+ border-width: 0;
+ }
+
+ 50% {
+ border-width: 0.22em;
+ }
+
+ 100% {
+ border-width: 0;
+ }
+}
+
+@keyframes ring-size {
+ 0% {
+ height: 0;
+ width: 0;
+ }
+
+ 100% {
+ height: 2em;
+ width: 2em;
+ }
+}
+
+@keyframes sparkles-width {
+ 0% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 1% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 2% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 3% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 4% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.5' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 5% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 6% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.1' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 7% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 8% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.7' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 9% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 10% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 11% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='15.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 12% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='16.9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 13% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 14% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='17.3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 15% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='18' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 16% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 17% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 18% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 19% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 20% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='14' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 21% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 22% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 23% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 24% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 25% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='13' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 26% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 27% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 28% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 29% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 30% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='12' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 31% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 32% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 33% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 34% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 35% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='11' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 36% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 37% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 38% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 39% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 40% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='10' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 41% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 42% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 43% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 44% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 45% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='9' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 46% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 47% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 48% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 49% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 50% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 51% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 52% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 53% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 54% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 55% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='7' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 56% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 57% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 58% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 59% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 60% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 61% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 62% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 63% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 64% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='5.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 65% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 66% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 67% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 68% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 69% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 70% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 71% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 72% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 73% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 74% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='3' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 75% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 76% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 77% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 78% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 79% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 80% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 81% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 82% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 83% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 84% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='1' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 86% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.8' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 87% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.6' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 88% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.4' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 89% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0.2' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 90% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 91% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 92% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 93% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 94% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 95% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 96% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 97% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 98% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 99% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+
+ 100% {
+ content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' class='stardust'%3E%3Ccircle cx='20' cy='20' r='14' stroke='%23fa733e' stroke-dasharray='1 15' stroke-dashoffset='23' stroke-width='0' fill='transparent' /%3E%3C/svg%3E");
+ }
+}
+
+@keyframes sparkles-size {
+ 0% {
+ transform: scale(0.1, 0.1);
+ }
+
+ 5% {
+ transform: scale(0.1, 0.1);
+ }
+
+ 85% {
+ transform: scale(1, 1);
+ }
+}
+
+/* stylelint-enable no-duplicate-selectors */
+/*
+ * Star animation micro-interactions end
+ * -------------------------------------
+ */
diff --git a/app/javascript/styles/gh/elephant-mods.scss b/app/javascript/styles/gh/elephant-mods.scss
new file mode 100644
index 000000000..6e04d6022
--- /dev/null
+++ b/app/javascript/styles/gh/elephant-mods.scss
@@ -0,0 +1,85 @@
+.theme-elephant,
+.theme-elephant-contrast,
+.theme-elephant-light {
+ /**background-color: var(--color-bg); ** TODO: Use a :not() to override legacy pages **
+
+ ** Style login/sign-up **
+ .new_user {
+ .btn {
+ border-radius: 9999px;
+ text-transform: unset;
+ transition: all .2s;
+ }
+
+ .label_input__append {
+ &::after {
+ background-image: unset;
+ }
+ }
+
+ input {
+ &.string,
+ &.text {
+ background-color: var(--color-mud);
+ border-color: var(--color-mud);
+ color: var(--color-dim);
+ font-size: var(--font-size);
+ }
+
+ &.string {
+ border-radius: 32px;
+ height: 42px;
+ padding: 0 20px;
+ }
+
+ &.text {
+ border-radius: var(--border-radius);
+ }
+ }
+ }**/
+
+ /** Add shadows around dropdowns/popouts **/
+ .dropdown-animation,
+ .picture-in-picture {
+ /**.video-modal__container .video-player,
+ .modal-root__container .gifv {**/
+ box-shadow: 0 0 20px rgba(0,0,0,0.35);
+ }
+
+ /** Fix PIP quirks **/
+ .picture-in-picture {
+ .video-player.inline {
+ border-radius: unset;
+ outline: unset;
+ }
+
+ border-radius: var(--border-radius);
+ }
+
+ /** Offset modified logo for desktop layout **/
+ .navigation-panel__logo > .column-link--logo {
+ margin-left: 3px;
+ width: 150px;
+ }
+
+ /** Offset modified logo for mobile layout **/
+ .ui__header__logo {
+ margin-left: 15px;
+ width: 120px;
+ }
+
+ /** Replace logo **/
+ .navigation-panel__logo > .column-link--logo,
+ .ui__header__logo {
+ background-size: contain;
+ background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='261' height='66' viewBox='0 0 261 66' fill='none' version='1.1' id='svg11' sodipodi:docname='logo-symbol-wordmark_old.svg' inkscape:version='1.2.1 (9c6d41e410, 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs15'/%3E%3Csodipodi:namedview id='namedview13' pagecolor='%23505050' bordercolor='%23eeeeee' borderopacity='1' inkscape:showpageshadow='0' inkscape:pageopacity='0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23505050' showgrid='false' inkscape:zoom='4.954023' inkscape:cx='130.60093' inkscape:cy='33.00348' inkscape:window-width='1920' inkscape:window-height='1019' inkscape:window-x='0' inkscape:window-y='30' inkscape:window-maximized='1' inkscape:current-layer='svg11'/%3E%3Csymbol id='logo-symbol-wordmark'%3E%3Cpath d=' M 26.678 24.516 C 27.103 24.106 27.5 23.667 27.866 23.203 L 7.426 23.203 L 7.426 23.203 C 7.78 23.653 8.164 24.078 8.573 24.477 L 7.426 26.645 L 9.327 27.88 L 11.227 29.114 L 12.726 27.203 C 13.505 27.522 14.32 27.767 15.165 27.931 L 15.38 30.326 L 17.646 30.326 L 19.912 30.326 L 20.127 27.931 C 20.955 27.771 21.755 27.532 22.519 27.222 L 24.004 29.114 L 25.904 27.88 L 27.805 26.645 L 26.678 24.516 Z ' fill='rgb(97,95,248)' id='path2'/%3E%3Cpath d=' M 8.613 5.81 C 8.189 6.22 7.792 6.659 7.426 7.123 L 27.866 7.123 L 27.866 7.123 C 27.512 6.673 27.128 6.248 26.719 5.849 L 27.866 3.681 L 25.965 2.446 L 24.064 1.212 L 22.565 3.123 C 21.787 2.804 20.972 2.559 20.127 2.395 L 19.912 0 L 17.646 0 L 15.38 0 L 15.165 2.395 C 14.337 2.555 13.537 2.794 12.773 3.104 L 11.288 1.212 L 9.388 2.446 L 7.487 3.681 L 8.613 5.81 Z ' fill='rgb(97,95,248)' id='path4'/%3E%3Cpath d=' M 9.982 21.387 L 9.982 21.387 L 4.377 21.387 L 4.377 21.387 Q 2.153 21.387 1.077 20.498 L 1.077 20.498 L 1.077 20.498 Q 0 19.608 0 17.758 L 0 17.758 L 0 12.206 L 0 12.206 Q 0 10.355 1.077 9.466 L 1.077 9.466 L 1.077 9.466 Q 2.153 8.576 4.377 8.576 L 4.377 8.576 L 8.826 8.576 L 8.826 8.576 Q 9.164 8.576 9.315 8.727 L 9.315 8.727 L 9.315 8.727 Q 9.466 8.879 9.466 9.217 L 9.466 9.217 L 9.466 11.37 L 9.466 11.37 Q 9.466 11.708 9.315 11.859 L 9.315 11.859 L 9.315 11.859 Q 9.164 12.01 8.826 12.01 L 8.826 12.01 L 5.125 12.01 L 5.125 12.01 Q 4.573 12.01 4.306 12.233 L 4.306 12.233 L 4.306 12.233 Q 4.039 12.455 4.039 12.9 L 4.039 12.9 L 4.039 17.153 L 4.039 17.153 Q 4.039 17.597 4.244 17.811 L 4.244 17.811 L 4.244 17.811 Q 4.448 18.024 4.858 18.024 L 4.858 18.024 L 6.584 18.024 L 6.584 15.249 L 6.584 15.249 Q 6.584 14.911 6.735 14.759 L 6.735 14.759 L 6.735 14.759 Q 6.886 14.608 7.224 14.608 L 7.224 14.608 L 9.982 14.608 L 9.982 14.608 Q 10.32 14.608 10.471 14.759 L 10.471 14.759 L 10.471 14.759 Q 10.623 14.911 10.623 15.249 L 10.623 15.249 L 10.623 20.747 L 10.623 20.747 Q 10.623 21.085 10.471 21.236 L 10.471 21.236 L 10.471 21.236 Q 10.32 21.387 9.982 21.387 Z M 21.69 21.387 L 21.69 21.387 L 13.434 21.387 L 13.434 21.387 Q 13.096 21.387 12.945 21.236 L 12.945 21.236 L 12.945 21.236 Q 12.793 21.085 12.793 20.747 L 12.793 20.747 L 12.793 9.217 L 12.793 9.217 Q 12.793 8.879 12.945 8.727 L 12.945 8.727 L 12.945 8.727 Q 13.096 8.576 13.434 8.576 L 13.434 8.576 L 21.69 8.576 L 21.69 8.576 Q 22.028 8.576 22.18 8.727 L 22.18 8.727 L 22.18 8.727 Q 22.331 8.879 22.331 9.217 L 22.331 9.217 L 22.331 11.299 L 22.331 11.299 Q 22.331 11.637 22.18 11.788 L 22.18 11.788 L 22.18 11.788 Q 22.028 11.939 21.69 11.939 L 21.69 11.939 L 16.779 11.939 L 16.779 13.309 L 20.249 13.309 L 20.249 13.309 Q 20.587 13.309 20.738 13.46 L 20.738 13.46 L 20.738 13.46 Q 20.889 13.612 20.889 13.95 L 20.889 13.95 L 20.889 15.854 L 20.889 15.854 Q 20.889 16.192 20.738 16.343 L 20.738 16.343 L 20.738 16.343 Q 20.587 16.494 20.249 16.494 L 20.249 16.494 L 16.779 16.494 L 16.779 18.024 L 21.69 18.024 L 21.69 18.024 Q 22.028 18.024 22.18 18.176 L 22.18 18.176 L 22.18 18.176 Q 22.331 18.327 22.331 18.665 L 22.331 18.665 L 22.331 20.747 L 22.331 20.747 Q 22.331 21.085 22.18 21.236 L 22.18 21.236 L 22.18 21.236 Q 22.028 21.387 21.69 21.387 Z M 29.074 12.313 L 29.074 12.313 L 28.238 15.017 L 31.032 15.017 L 30.195 12.313 L 30.195 12.313 Q 30.124 12.153 30.044 12.081 L 30.044 12.081 L 30.044 12.081 Q 29.964 12.01 29.857 12.01 L 29.857 12.01 L 29.413 12.01 L 29.413 12.01 Q 29.306 12.01 29.226 12.081 L 29.226 12.081 L 29.226 12.081 Q 29.146 12.153 29.074 12.313 Z M 28.06 18.256 L 28.06 20.747 L 28.06 20.747 Q 28.06 21.085 27.909 21.236 L 27.909 21.236 L 27.909 21.236 Q 27.758 21.387 27.42 21.387 L 27.42 21.387 L 24.804 21.387 L 24.804 21.387 Q 24.466 21.387 24.315 21.236 L 24.315 21.236 L 24.315 21.236 Q 24.163 21.085 24.163 20.747 L 24.163 20.747 L 24.163 16.049 L 24.163 16.049 Q 24.163 15.516 24.333 14.822 L 24.333 14.822 L 24.333 14.822 Q 24.502 14.128 24.857 13.202 L 24.857 13.202 L 26.405 9.163 L 26.405 9.163 Q 26.512 8.861 26.735 8.718 L 26.735 8.718 L 26.735 8.718 Q 26.957 8.576 27.313 8.576 L 27.313 8.576 L 32.099 8.576 L 32.099 8.576 Q 32.437 8.576 32.66 8.718 L 32.66 8.718 L 32.66 8.718 Q 32.882 8.861 32.989 9.163 L 32.989 9.163 L 34.537 13.202 L 34.537 13.202 Q 34.893 14.128 35.062 14.822 L 35.062 14.822 L 35.062 14.822 Q 35.231 15.516 35.231 16.049 L 35.231 16.049 L 35.231 20.747 L 35.231 20.747 Q 35.231 21.085 35.08 21.236 L 35.08 21.236 L 35.08 21.236 Q 34.929 21.387 34.59 21.387 L 34.59 21.387 L 31.904 21.387 L 31.904 21.387 Q 31.548 21.387 31.379 21.236 L 31.379 21.236 L 31.379 21.236 Q 31.21 21.085 31.21 20.747 L 31.21 20.747 L 31.21 18.256 L 28.06 18.256 Z M 42.775 11.779 L 41.441 11.779 L 41.441 14.057 L 42.775 14.057 L 42.775 14.057 Q 43.238 14.057 43.398 13.816 L 43.398 13.816 L 43.398 13.816 Q 43.558 13.576 43.558 13.22 L 43.558 13.22 L 43.558 12.615 L 43.558 12.615 Q 43.558 12.259 43.398 12.019 L 43.398 12.019 L 43.398 12.019 Q 43.238 11.779 42.775 11.779 L 42.775 11.779 Z M 40.8 21.387 L 40.8 21.387 L 38.06 21.387 L 38.06 21.387 Q 37.722 21.387 37.571 21.236 L 37.571 21.236 L 37.571 21.236 Q 37.42 21.085 37.42 20.747 L 37.42 20.747 L 37.42 9.217 L 37.42 9.217 Q 37.42 8.879 37.571 8.727 L 37.571 8.727 L 37.571 8.727 Q 37.722 8.576 38.06 8.576 L 38.06 8.576 L 43.985 8.576 L 43.985 8.576 Q 45.978 8.576 46.734 9.404 L 46.734 9.404 L 46.734 9.404 Q 47.491 10.231 47.491 11.548 L 47.491 11.548 L 47.491 12.366 L 47.491 12.366 Q 47.491 13.113 47.268 13.638 L 47.268 13.638 L 47.268 13.638 Q 47.046 14.163 46.494 14.395 L 46.494 14.395 L 46.494 14.395 Q 47.455 14.501 48.051 15.177 L 48.051 15.177 L 48.051 15.177 Q 48.647 15.854 48.647 16.975 L 48.647 16.975 L 48.647 20.747 L 48.647 20.747 Q 48.647 21.085 48.496 21.236 L 48.496 21.236 L 48.496 21.236 Q 48.345 21.387 48.007 21.387 L 48.007 21.387 L 45.249 21.387 L 45.249 21.387 Q 44.911 21.387 44.759 21.236 L 44.759 21.236 L 44.759 21.236 Q 44.608 21.085 44.608 20.747 L 44.608 20.747 L 44.608 18.024 L 44.608 18.024 Q 44.608 17.633 44.457 17.446 L 44.457 17.446 L 44.457 17.446 Q 44.306 17.259 43.932 17.259 L 43.932 17.259 L 41.441 17.259 L 41.441 20.747 L 41.441 20.747 Q 41.441 21.085 41.29 21.236 L 41.29 21.236 L 41.29 21.236 Q 41.138 21.387 40.8 21.387 Z M 54.039 21.387 L 54.039 21.387 L 51.281 21.387 L 51.281 21.387 Q 50.943 21.387 50.791 21.236 L 50.791 21.236 L 50.791 21.236 Q 50.64 21.085 50.64 20.747 L 50.64 20.747 L 50.64 9.217 L 50.64 9.217 Q 50.64 8.879 50.791 8.727 L 50.791 8.727 L 50.791 8.727 Q 50.943 8.576 51.281 8.576 L 51.281 8.576 L 54.039 8.576 L 54.039 8.576 Q 54.377 8.576 54.528 8.727 L 54.528 8.727 L 54.528 8.727 Q 54.679 8.879 54.679 9.217 L 54.679 9.217 L 54.679 13.078 L 57.651 13.078 L 57.651 9.217 L 57.651 9.217 Q 57.651 8.879 57.802 8.727 L 57.802 8.727 L 57.802 8.727 Q 57.953 8.576 58.291 8.576 L 58.291 8.576 L 61.049 8.576 L 61.049 8.576 Q 61.387 8.576 61.539 8.727 L 61.539 8.727 L 61.539 8.727 Q 61.69 8.879 61.69 9.217 L 61.69 9.217 L 61.69 20.747 L 61.69 20.747 Q 61.69 21.085 61.539 21.236 L 61.539 21.236 L 61.539 21.236 Q 61.387 21.387 61.049 21.387 L 61.049 21.387 L 58.291 21.387 L 58.291 21.387 Q 57.953 21.387 57.802 21.236 L 57.802 21.236 L 57.802 21.236 Q 57.651 21.085 57.651 20.747 L 57.651 20.747 L 57.651 16.797 L 54.679 16.797 L 54.679 20.747 L 54.679 20.747 Q 54.679 21.085 54.528 21.236 L 54.528 21.236 L 54.528 21.236 Q 54.377 21.387 54.039 21.387 Z M 73.042 21.387 L 73.042 21.387 L 64.786 21.387 L 64.786 21.387 Q 64.448 21.387 64.297 21.236 L 64.297 21.236 L 64.297 21.236 Q 64.145 21.085 64.145 20.747 L 64.145 20.747 L 64.145 9.217 L 64.145 9.217 Q 64.145 8.879 64.297 8.727 L 64.297 8.727 L 64.297 8.727 Q 64.448 8.576 64.786 8.576 L 64.786 8.576 L 73.042 8.576 L 73.042 8.576 Q 73.38 8.576 73.531 8.727 L 73.531 8.727 L 73.531 8.727 Q 73.683 8.879 73.683 9.217 L 73.683 9.217 L 73.683 11.299 L 73.683 11.299 Q 73.683 11.637 73.531 11.788 L 73.531 11.788 L 73.531 11.788 Q 73.38 11.939 73.042 11.939 L 73.042 11.939 L 68.131 11.939 L 68.131 13.309 L 71.601 13.309 L 71.601 13.309 Q 71.939 13.309 72.09 13.46 L 72.09 13.46 L 72.09 13.46 Q 72.241 13.612 72.241 13.95 L 72.241 13.95 L 72.241 15.854 L 72.241 15.854 Q 72.241 16.192 72.09 16.343 L 72.09 16.343 L 72.09 16.343 Q 71.939 16.494 71.601 16.494 L 71.601 16.494 L 68.131 16.494 L 68.131 18.024 L 73.042 18.024 L 73.042 18.024 Q 73.38 18.024 73.531 18.176 L 73.531 18.176 L 73.531 18.176 Q 73.683 18.327 73.683 18.665 L 73.683 18.665 L 73.683 20.747 L 73.683 20.747 Q 73.683 21.085 73.531 21.236 L 73.531 21.236 L 73.531 21.236 Q 73.38 21.387 73.042 21.387 Z M 80.426 12.313 L 80.426 12.313 L 79.59 15.017 L 82.384 15.017 L 81.547 12.313 L 81.547 12.313 Q 81.476 12.153 81.396 12.081 L 81.396 12.081 L 81.396 12.081 Q 81.316 12.01 81.209 12.01 L 81.209 12.01 L 80.764 12.01 L 80.764 12.01 Q 80.658 12.01 80.578 12.081 L 80.578 12.081 L 80.578 12.081 Q 80.497 12.153 80.426 12.313 Z M 79.412 18.256 L 79.412 20.747 L 79.412 20.747 Q 79.412 21.085 79.261 21.236 L 79.261 21.236 L 79.261 21.236 Q 79.11 21.387 78.772 21.387 L 78.772 21.387 L 76.156 21.387 L 76.156 21.387 Q 75.818 21.387 75.667 21.236 L 75.667 21.236 L 75.667 21.236 Q 75.515 21.085 75.515 20.747 L 75.515 20.747 L 75.515 16.049 L 75.515 16.049 Q 75.515 15.516 75.684 14.822 L 75.684 14.822 L 75.684 14.822 Q 75.853 14.128 76.209 13.202 L 76.209 13.202 L 77.757 9.163 L 77.757 9.163 Q 77.864 8.861 78.086 8.718 L 78.086 8.718 L 78.086 8.718 Q 78.309 8.576 78.665 8.576 L 78.665 8.576 L 83.451 8.576 L 83.451 8.576 Q 83.789 8.576 84.012 8.718 L 84.012 8.718 L 84.012 8.718 Q 84.234 8.861 84.341 9.163 L 84.341 9.163 L 85.889 13.202 L 85.889 13.202 Q 86.245 14.128 86.414 14.822 L 86.414 14.822 L 86.414 14.822 Q 86.583 15.516 86.583 16.049 L 86.583 16.049 L 86.583 20.747 L 86.583 20.747 Q 86.583 21.085 86.432 21.236 L 86.432 21.236 L 86.432 21.236 Q 86.28 21.387 85.942 21.387 L 85.942 21.387 L 83.255 21.387 L 83.255 21.387 Q 82.9 21.387 82.731 21.236 L 82.731 21.236 L 82.731 21.236 Q 82.562 21.085 82.562 20.747 L 82.562 20.747 L 82.562 18.256 L 79.412 18.256 Z M 95.408 21.387 L 95.408 21.387 L 89.412 21.387 L 89.412 21.387 Q 89.074 21.387 88.923 21.236 L 88.923 21.236 L 88.923 21.236 Q 88.771 21.085 88.771 20.747 L 88.771 20.747 L 88.771 9.217 L 88.771 9.217 Q 88.771 8.879 88.923 8.727 L 88.923 8.727 L 88.923 8.727 Q 89.074 8.576 89.412 8.576 L 89.412 8.576 L 95.408 8.576 L 95.408 8.576 Q 97.633 8.576 98.709 9.466 L 98.709 9.466 L 98.709 9.466 Q 99.786 10.355 99.786 12.206 L 99.786 12.206 L 99.786 17.758 L 99.786 17.758 Q 99.786 19.608 98.709 20.498 L 98.709 20.498 L 98.709 20.498 Q 97.633 21.387 95.408 21.387 Z M 94.928 11.975 L 92.811 11.975 L 92.811 18.024 L 94.928 18.024 L 94.928 18.024 Q 95.355 18.024 95.56 17.811 L 95.56 17.811 L 95.56 17.811 Q 95.764 17.597 95.764 17.153 L 95.764 17.153 L 95.764 12.829 L 95.764 12.829 Q 95.764 12.384 95.56 12.179 L 95.56 12.179 L 95.56 12.179 Q 95.355 11.975 94.928 11.975 L 94.928 11.975 Z M 107.988 21.387 L 107.988 21.387 L 102.366 21.387 L 102.366 21.387 Q 102.028 21.387 101.876 21.236 L 101.876 21.236 L 101.876 21.236 Q 101.725 21.085 101.725 20.747 L 101.725 20.747 L 101.725 18.665 L 101.725 18.665 Q 101.725 18.327 101.876 18.176 L 101.876 18.176 L 101.876 18.176 Q 102.028 18.024 102.366 18.024 L 102.366 18.024 L 107.152 18.024 L 107.152 18.024 Q 107.383 18.024 107.499 17.873 L 107.499 17.873 L 107.499 17.873 Q 107.615 17.722 107.615 17.508 L 107.615 17.508 L 107.615 17.508 Q 107.615 17.206 107.499 17.064 L 107.499 17.064 L 107.499 17.064 Q 107.383 16.921 107.152 16.903 L 107.152 16.903 L 104.483 16.53 L 104.483 16.53 Q 103.237 16.352 102.481 15.711 L 102.481 15.711 L 102.481 15.711 Q 101.725 15.071 101.725 13.576 L 101.725 13.576 L 101.725 11.708 L 101.725 11.708 Q 101.725 10.195 102.704 9.386 L 102.704 9.386 L 102.704 9.386 Q 103.682 8.576 105.408 8.576 L 105.408 8.576 L 110.39 8.576 L 110.39 8.576 Q 110.729 8.576 110.88 8.727 L 110.88 8.727 L 110.88 8.727 Q 111.031 8.879 111.031 9.217 L 111.031 9.217 L 111.031 11.334 L 111.031 11.334 Q 111.031 11.672 110.88 11.823 L 110.88 11.823 L 110.88 11.823 Q 110.729 11.975 110.39 11.975 L 110.39 11.975 L 106.245 11.975 L 106.245 11.975 Q 106.013 11.975 105.889 12.126 L 105.889 12.126 L 105.889 12.126 Q 105.764 12.277 105.764 12.508 L 105.764 12.508 L 105.764 12.508 Q 105.764 12.74 105.889 12.9 L 105.889 12.9 L 105.889 12.9 Q 106.013 13.06 106.245 13.078 L 106.245 13.078 L 108.896 13.434 L 108.896 13.434 Q 110.141 13.612 110.906 14.252 L 110.906 14.252 L 110.906 14.252 Q 111.672 14.893 111.672 16.387 L 111.672 16.387 L 111.672 18.256 L 111.672 18.256 Q 111.672 19.768 110.684 20.578 L 110.684 20.578 L 110.684 20.578 Q 109.696 21.387 107.988 21.387 Z ' fill='rgb(255,255,255)' id='path6'/%3E%3C/symbol%3E%3Cuse xlink:href='%23logo-symbol-wordmark' style='' id='use9' transform='scale(2.1763503)'/%3E%3C/svg%3E");
+ }
+}
+
+.theme-elephant-light {
+ /** Invert logo for light theme **/
+ .navigation-panel__logo > .column-link--logo,
+ .ui__header__logo {
+ filter: hue-rotate(180deg) invert(0.9) saturate(6.5);
+ }
+}
diff --git a/app/lib/account_reach_finder.rb b/app/lib/account_reach_finder.rb
index 706ce8c1f..481e25439 100644
--- a/app/lib/account_reach_finder.rb
+++ b/app/lib/account_reach_finder.rb
@@ -6,7 +6,7 @@ class AccountReachFinder
end
def inboxes
- (followers_inboxes + reporters_inboxes + relay_inboxes).uniq
+ (followers_inboxes + reporters_inboxes + recently_mentioned_inboxes + relay_inboxes).uniq
end
private
@@ -19,6 +19,13 @@ class AccountReachFinder
Account.where(id: @account.targeted_reports.select(:account_id)).inboxes
end
+ def recently_mentioned_inboxes
+ cutoff_id = Mastodon::Snowflake.id_at(2.days.ago, with_random: false)
+ recent_statuses = @account.statuses.recent.where(id: cutoff_id...).limit(200)
+
+ Account.joins(:mentions).where(mentions: { status: recent_statuses }).inboxes.take(2000)
+ end
+
def relay_inboxes
Relay.enabled.pluck(:inbox_url)
end
diff --git a/app/lib/application_extension.rb b/app/lib/application_extension.rb
index d61ec0e6e..4de69c1ea 100644
--- a/app/lib/application_extension.rb
+++ b/app/lib/application_extension.rb
@@ -9,10 +9,6 @@ module ApplicationExtension
validates :redirect_uri, length: { maximum: 2_000 }
end
- def most_recently_used_access_token
- @most_recently_used_access_token ||= access_tokens.where.not(last_used_at: nil).order(last_used_at: :desc).first
- end
-
def confirmation_redirect_uri
redirect_uri.lines.first.strip
end
diff --git a/app/lib/link_details_extractor.rb b/app/lib/link_details_extractor.rb
index 2e0672abe..9d7748425 100644
--- a/app/lib/link_details_extractor.rb
+++ b/app/lib/link_details_extractor.rb
@@ -140,7 +140,7 @@ class LinkDetailsExtractor
end
def html
- player_url.present? ? content_tag(:iframe, nil, src: player_url, width: width, height: height, allowtransparency: 'true', scrolling: 'no', frameborder: '0') : nil
+ player_url.present? ? content_tag(:iframe, nil, src: player_url, width: width, height: height, allowfullscreen: 'true', allowtransparency: 'true', scrolling: 'no', frameborder: '0') : nil
end
def width
diff --git a/app/lib/request.rb b/app/lib/request.rb
index 0508169dc..660dc0fa7 100644
--- a/app/lib/request.rb
+++ b/app/lib/request.rb
@@ -4,14 +4,60 @@ require 'ipaddr'
require 'socket'
require 'resolv'
-# Monkey-patch the HTTP.rb timeout class to avoid using a timeout block
+# Use our own timeout class to avoid using HTTP.rb's timeout block
# around the Socket#open method, since we use our own timeout blocks inside
# that method
-class HTTP::Timeout::PerOperation
+#
+# Also changes how the read timeout behaves so that it is cumulative (closer
+# to HTTP::Timeout::Global, but still having distinct timeouts for other
+# operation types)
+class PerOperationWithDeadline < HTTP::Timeout::PerOperation
+ READ_DEADLINE = 30
+
+ def initialize(*args)
+ super
+
+ @read_deadline = options.fetch(:read_deadline, READ_DEADLINE)
+ end
+
def connect(socket_class, host, port, nodelay = false)
@socket = socket_class.open(host, port)
@socket.setsockopt(Socket::IPPROTO_TCP, Socket::TCP_NODELAY, 1) if nodelay
end
+
+ # Reset deadline when the connection is re-used for different requests
+ def reset_counter
+ @deadline = nil
+ end
+
+ # Read data from the socket
+ def readpartial(size, buffer = nil)
+ @deadline ||= Process.clock_gettime(Process::CLOCK_MONOTONIC) + @read_deadline
+
+ timeout = false
+ loop do
+ result = @socket.read_nonblock(size, buffer, exception: false)
+
+ return :eof if result.nil?
+
+ remaining_time = @deadline - Process.clock_gettime(Process::CLOCK_MONOTONIC)
+ raise HTTP::TimeoutError, "Read timed out after #{@read_timeout} seconds" if timeout
+ raise HTTP::TimeoutError, "Read timed out after a total of #{@read_deadline} seconds" if remaining_time <= 0
+ return result if result != :wait_readable
+
+ # marking the socket for timeout. Why is this not being raised immediately?
+ # it seems there is some race-condition on the network level between calling
+ # #read_nonblock and #wait_readable, in which #read_nonblock signalizes waiting
+ # for reads, and when waiting for x seconds, it returns nil suddenly without completing
+ # the x seconds. In a normal case this would be a timeout on wait/read, but it can
+ # also mean that the socket has been closed by the server. Therefore we "mark" the
+ # socket for timeout and try to read more bytes. If it returns :eof, it's all good, no
+ # timeout. Else, the first timeout was a proper timeout.
+ # This hack has to be done because io/wait#wait_readable doesn't provide a value for when
+ # the socket is closed by the server, and HTTP::Parser doesn't provide the limit for the chunks.
+ timeout = true unless @socket.to_io.wait_readable([remaining_time, @read_timeout].min)
+ end
+ end
end
class Request
@@ -20,7 +66,7 @@ class Request
# We enforce a 5s timeout on DNS resolving, 5s timeout on socket opening
# and 5s timeout on the TLS handshake, meaning the worst case should take
# about 15s in total
- TIMEOUT = { connect: 5, read: 10, write: 10 }.freeze
+ TIMEOUT = { connect_timeout: 5, read_timeout: 10, write_timeout: 10, read_deadline: 30 }.freeze
include RoutingHelper
@@ -32,6 +78,7 @@ class Request
@http_client = options.delete(:http_client)
@allow_local = options.delete(:allow_local)
@options = options.merge(socket_class: use_proxy? || @allow_local ? ProxySocket : Socket)
+ @options = @options.merge(timeout_class: PerOperationWithDeadline, timeout_options: TIMEOUT)
@options = @options.merge(proxy_url) if use_proxy?
@headers = {}
@@ -92,7 +139,7 @@ class Request
end
def http_client
- HTTP.use(:auto_inflate).timeout(TIMEOUT.dup).follow(max_hops: 3)
+ HTTP.use(:auto_inflate).follow(max_hops: 3)
end
end
@@ -238,11 +285,11 @@ class Request
end
until socks.empty?
- _, available_socks, = IO.select(nil, socks, nil, Request::TIMEOUT[:connect])
+ _, available_socks, = IO.select(nil, socks, nil, Request::TIMEOUT[:connect_timeout])
if available_socks.nil?
socks.each(&:close)
- raise HTTP::TimeoutError, "Connect timed out after #{Request::TIMEOUT[:connect]} seconds"
+ raise HTTP::TimeoutError, "Connect timed out after #{Request::TIMEOUT[:connect_timeout]} seconds"
end
available_socks.each do |sock|
diff --git a/app/lib/scope_parser.rb b/app/lib/scope_parser.rb
index d268688c8..45eb3c7b9 100644
--- a/app/lib/scope_parser.rb
+++ b/app/lib/scope_parser.rb
@@ -1,7 +1,7 @@
# frozen_string_literal: true
class ScopeParser < Parslet::Parser
- rule(:term) { match('[a-z]').repeat(1).as(:term) }
+ rule(:term) { match('[a-z_]').repeat(1).as(:term) }
rule(:colon) { str(':') }
rule(:access) { (str('write') | str('read')).as(:access) }
rule(:namespace) { str('admin').as(:namespace) }
diff --git a/app/lib/text_formatter.rb b/app/lib/text_formatter.rb
index 48e2fc233..e51266a08 100644
--- a/app/lib/text_formatter.rb
+++ b/app/lib/text_formatter.rb
@@ -48,6 +48,26 @@ class TextFormatter
html.html_safe # rubocop:disable Rails/OutputSafety
end
+ class << self
+ include ERB::Util
+
+ def shortened_link(url, rel_me: false)
+ url = Addressable::URI.parse(url).to_s
+ rel = rel_me ? (DEFAULT_REL + %w(me)) : DEFAULT_REL
+
+ prefix = url.match(URL_PREFIX_REGEX).to_s
+ display_url = url[prefix.length, 30]
+ suffix = url[prefix.length + 30..-1]
+ cutoff = url[prefix.length..-1].length > 30
+
+ <<~HTML.squish.html_safe # rubocop:disable Rails/OutputSafety
+ #{h(prefix)}#{h(display_url)}#{h(suffix)}
+ HTML
+ rescue Addressable::URI::InvalidURIError, IDN::Idna::IdnaError
+ h(url)
+ end
+ end
+
private
def rewrite
@@ -70,19 +90,7 @@ class TextFormatter
end
def link_to_url(entity)
- url = Addressable::URI.parse(entity[:url]).to_s
- rel = with_rel_me? ? (DEFAULT_REL + %w(me)) : DEFAULT_REL
-
- prefix = url.match(URL_PREFIX_REGEX).to_s
- display_url = url[prefix.length, 30]
- suffix = url[prefix.length + 30..-1]
- cutoff = url[prefix.length..-1].length > 30
-
- <<~HTML.squish
- #{h(prefix)}#{h(display_url)}#{h(suffix)}
- HTML
- rescue Addressable::URI::InvalidURIError, IDN::Idna::IdnaError
- h(entity[:url])
+ TextFormatter.shortened_link(entity[:url], rel_me: with_rel_me?)
end
def link_to_hashtag(entity)
diff --git a/app/lib/vacuum/access_tokens_vacuum.rb b/app/lib/vacuum/access_tokens_vacuum.rb
index 7b91f74a5..a224f6d63 100644
--- a/app/lib/vacuum/access_tokens_vacuum.rb
+++ b/app/lib/vacuum/access_tokens_vacuum.rb
@@ -9,10 +9,12 @@ class Vacuum::AccessTokensVacuum
private
def vacuum_revoked_access_tokens!
- Doorkeeper::AccessToken.where.not(revoked_at: nil).where('revoked_at < NOW()').delete_all
+ Doorkeeper::AccessToken.where.not(expires_in: nil).where('created_at + make_interval(secs => expires_in) < NOW()').in_batches.delete_all
+ Doorkeeper::AccessToken.where.not(revoked_at: nil).where('revoked_at < NOW()').in_batches.delete_all
end
def vacuum_revoked_access_grants!
- Doorkeeper::AccessGrant.where.not(revoked_at: nil).where('revoked_at < NOW()').delete_all
+ Doorkeeper::AccessGrant.where.not(expires_in: nil).where('created_at + make_interval(secs => expires_in) < NOW()').in_batches.delete_all
+ Doorkeeper::AccessGrant.where.not(revoked_at: nil).where('revoked_at < NOW()').in_batches.delete_all
end
end
diff --git a/app/models/account_conversation.rb b/app/models/account_conversation.rb
index 45e74bbeb..38ee247cf 100644
--- a/app/models/account_conversation.rb
+++ b/app/models/account_conversation.rb
@@ -16,34 +16,44 @@
class AccountConversation < ApplicationRecord
include Redisable
+ attr_writer :participant_accounts
+
+ before_validation :set_last_status
after_commit :push_to_streaming_api
belongs_to :account
belongs_to :conversation
belongs_to :last_status, class_name: 'Status'
- before_validation :set_last_status
-
def participant_account_ids=(arr)
self[:participant_account_ids] = arr.sort
+ @participant_accounts = nil
end
def participant_accounts
- if participant_account_ids.empty?
- [account]
- else
- participants = Account.where(id: participant_account_ids)
- participants.empty? ? [account] : participants
- end
+ @participant_accounts ||= Account.where(id: participant_account_ids).to_a
+ @participant_accounts.presence || [account]
end
class << self
def to_a_paginated_by_id(limit, options = {})
- if options[:min_id]
- paginate_by_min_id(limit, options[:min_id], options[:max_id]).reverse
- else
- paginate_by_max_id(limit, options[:max_id], options[:since_id]).to_a
+ array = begin
+ if options[:min_id]
+ paginate_by_min_id(limit, options[:min_id], options[:max_id]).reverse
+ else
+ paginate_by_max_id(limit, options[:max_id], options[:since_id]).to_a
+ end
end
+
+ # Preload participants
+ participant_ids = array.flat_map(&:participant_account_ids)
+ accounts_by_id = Account.where(id: participant_ids).index_by(&:id)
+
+ array.each do |conversation|
+ conversation.participant_accounts = conversation.participant_account_ids.filter_map { |id| accounts_by_id[id] }
+ end
+
+ array
end
def paginate_by_min_id(limit, min_id = nil, max_id = nil)
diff --git a/app/models/concerns/attachmentable.rb b/app/models/concerns/attachmentable.rb
index 01fae4236..662b2ef52 100644
--- a/app/models/concerns/attachmentable.rb
+++ b/app/models/concerns/attachmentable.rb
@@ -22,15 +22,14 @@ module Attachmentable
included do
def self.has_attached_file(name, options = {}) # rubocop:disable Naming/PredicateName
- options = { validate_media_type: false }.merge(options)
super(name, options)
- send(:"before_#{name}_post_process") do
+
+ send(:"before_#{name}_validate", prepend: true) do
attachment = send(name)
check_image_dimension(attachment)
set_file_content_type(attachment)
obfuscate_file_name(attachment)
set_file_extension(attachment)
- Paperclip::Validators::MediaTypeSpoofDetectionValidator.new(attributes: [name]).validate(self)
end
end
end
diff --git a/app/models/form/account_batch.rb b/app/models/form/account_batch.rb
index 6a05f8163..4665a5867 100644
--- a/app/models/form/account_batch.rb
+++ b/app/models/form/account_batch.rb
@@ -123,7 +123,18 @@ class Form::AccountBatch
account: current_account,
action: :suspend
)
+
Admin::SuspensionWorker.perform_async(account.id)
+
+ # Suspending a single account closes their associated reports, so
+ # mass-suspending would be consistent.
+ Report.where(target_account: account).unresolved.find_each do |report|
+ authorize(report, :update?)
+ log_action(:resolve, report)
+ report.resolve!(current_account)
+ rescue Mastodon::NotPermittedError
+ # This should not happen, but just in case, do not fail early
+ end
end
def approve_account(account)
diff --git a/app/models/identity.rb b/app/models/identity.rb
index 8cc65aef4..869f06372 100644
--- a/app/models/identity.rb
+++ b/app/models/identity.rb
@@ -12,7 +12,7 @@
#
class Identity < ApplicationRecord
- belongs_to :user, dependent: :destroy
+ belongs_to :user
validates :uid, presence: true, uniqueness: { scope: :provider }
validates :provider, presence: true
diff --git a/app/models/media_attachment.rb b/app/models/media_attachment.rb
index 8889be405..ce460bb60 100644
--- a/app/models/media_attachment.rb
+++ b/app/models/media_attachment.rb
@@ -39,7 +39,7 @@ class MediaAttachment < ApplicationRecord
MAX_DESCRIPTION_LENGTH = 1_500
IMAGE_LIMIT = 10.megabytes
- VIDEO_LIMIT = 80.megabytes
+ VIDEO_LIMIT = 100.megabytes
MAX_VIDEO_MATRIX_LIMIT = 2_304_000 # 1920x1200px
MAX_VIDEO_FRAME_RATE = 60
diff --git a/app/models/webhook.rb b/app/models/webhook.rb
index 4aafb1257..bc1c027d5 100644
--- a/app/models/webhook.rb
+++ b/app/models/webhook.rb
@@ -20,6 +20,8 @@ class Webhook < ApplicationRecord
report.created
).freeze
+ attr_writer :current_account
+
scope :enabled, -> { where(enabled: true) }
validates :url, presence: true, url: true
@@ -27,6 +29,7 @@ class Webhook < ApplicationRecord
validates :events, presence: true
validate :validate_events
+ validate :validate_permissions
before_validation :strip_events
before_validation :generate_secret
@@ -43,12 +46,29 @@ class Webhook < ApplicationRecord
update!(enabled: false)
end
+ def required_permissions
+ events.map { |event| Webhook.permission_for_event(event) }
+ end
+
+ def self.permission_for_event(event)
+ case event
+ when 'account.approved', 'account.created', 'account.updated'
+ :manage_users
+ when 'report.created'
+ :manage_reports
+ end
+ end
+
private
def validate_events
errors.add(:events, :invalid) if events.any? { |e| !EVENTS.include?(e) }
end
+ def validate_permissions
+ errors.add(:events, :invalid_permissions) if defined?(@current_account) && required_permissions.any? { |permission| !@current_account.user_role.can?(permission) }
+ end
+
def strip_events
self.events = events.map { |str| str.strip.presence }.compact if events.present?
end
diff --git a/app/policies/webhook_policy.rb b/app/policies/webhook_policy.rb
index a2199a333..577e891b6 100644
--- a/app/policies/webhook_policy.rb
+++ b/app/policies/webhook_policy.rb
@@ -14,7 +14,7 @@ class WebhookPolicy < ApplicationPolicy
end
def update?
- role.can?(:manage_webhooks)
+ role.can?(:manage_webhooks) && record.required_permissions.all? { |permission| role.can?(permission) }
end
def enable?
@@ -30,6 +30,6 @@ class WebhookPolicy < ApplicationPolicy
end
def destroy?
- role.can?(:manage_webhooks)
+ role.can?(:manage_webhooks) && record.required_permissions.all? { |permission| role.can?(permission) }
end
end
diff --git a/app/serializers/rest/preview_card_serializer.rb b/app/serializers/rest/preview_card_serializer.rb
index 66ff47d22..e6d204fec 100644
--- a/app/serializers/rest/preview_card_serializer.rb
+++ b/app/serializers/rest/preview_card_serializer.rb
@@ -11,4 +11,8 @@ class REST::PreviewCardSerializer < ActiveModel::Serializer
def image
object.image? ? full_asset_url(object.image.url(:original)) : nil
end
+
+ def html
+ Sanitize.fragment(object.html, Sanitize::Config::MASTODON_OEMBED)
+ end
end
diff --git a/app/services/activitypub/process_account_service.rb b/app/services/activitypub/process_account_service.rb
index 2da9096c7..087c23fa7 100644
--- a/app/services/activitypub/process_account_service.rb
+++ b/app/services/activitypub/process_account_service.rb
@@ -76,6 +76,9 @@ class ActivityPub::ProcessAccountService < BaseService
@account.suspended_at = domain_block.created_at if auto_suspend?
@account.suspension_origin = :local if auto_suspend?
@account.silenced_at = domain_block.created_at if auto_silence?
+
+ set_immediate_protocol_attributes!
+
@account.save
end
diff --git a/app/services/remove_status_service.rb b/app/services/remove_status_service.rb
index 45cfb75f4..c84f90726 100644
--- a/app/services/remove_status_service.rb
+++ b/app/services/remove_status_service.rb
@@ -12,6 +12,7 @@ class RemoveStatusService < BaseService
# @option [Boolean] :immediate
# @option [Boolean] :preserve
# @option [Boolean] :original_removed
+ # @option [Boolean] :skip_streaming
def call(status, **options)
@payload = Oj.dump(event: :delete, payload: status.id.to_s)
@status = status
@@ -52,6 +53,9 @@ class RemoveStatusService < BaseService
private
+ # The following FeedManager calls all do not result in redis publishes for
+ # streaming, as the `:update` option is false
+
def remove_from_self
FeedManager.instance.unpush_from_home(@account, @status)
end
@@ -75,6 +79,8 @@ class RemoveStatusService < BaseService
# followers. Here we send a delete to actively mentioned accounts
# that may not follow the account
+ return if skip_streaming?
+
@status.active_mentions.find_each do |mention|
redis.publish("timeline:#{mention.account_id}", @payload)
end
@@ -103,7 +109,7 @@ class RemoveStatusService < BaseService
# without us being able to do all the fancy stuff
@status.reblogs.rewhere(deleted_at: [nil, @status.deleted_at]).includes(:account).reorder(nil).find_each do |reblog|
- RemoveStatusService.new.call(reblog, original_removed: true)
+ RemoveStatusService.new.call(reblog, original_removed: true, skip_streaming: skip_streaming?)
end
end
@@ -114,6 +120,8 @@ class RemoveStatusService < BaseService
return unless @status.public_visibility?
+ return if skip_streaming?
+
@status.tags.map(&:name).each do |hashtag|
redis.publish("timeline:hashtag:#{hashtag.mb_chars.downcase}", @payload)
redis.publish("timeline:hashtag:#{hashtag.mb_chars.downcase}:local", @payload) if @status.local?
@@ -123,6 +131,8 @@ class RemoveStatusService < BaseService
def remove_from_public
return unless @status.public_visibility?
+ return if skip_streaming?
+
redis.publish('timeline:public', @payload)
redis.publish(@status.local? ? 'timeline:public:local' : 'timeline:public:remote', @payload)
end
@@ -130,6 +140,8 @@ class RemoveStatusService < BaseService
def remove_from_media
return unless @status.public_visibility?
+ return if skip_streaming?
+
redis.publish('timeline:public:media', @payload)
redis.publish(@status.local? ? 'timeline:public:local:media' : 'timeline:public:remote:media', @payload)
end
@@ -143,4 +155,8 @@ class RemoveStatusService < BaseService
def permanently?
@options[:immediate] || !(@options[:preserve] || @status.reported?)
end
+
+ def skip_streaming?
+ !!@options[:skip_streaming]
+ end
end
diff --git a/app/services/resolve_url_service.rb b/app/services/resolve_url_service.rb
index d8e795f3b..d6e528654 100644
--- a/app/services/resolve_url_service.rb
+++ b/app/services/resolve_url_service.rb
@@ -89,13 +89,28 @@ class ResolveURLService < BaseService
def process_local_url
recognized_params = Rails.application.routes.recognize_path(@url)
- return unless recognized_params[:action] == 'show'
+ case recognized_params[:controller]
+ when 'statuses'
+ return unless recognized_params[:action] == 'show'
- if recognized_params[:controller] == 'statuses'
status = Status.find_by(id: recognized_params[:id])
check_local_status(status)
- elsif recognized_params[:controller] == 'accounts'
+ when 'accounts'
+ return unless recognized_params[:action] == 'show'
+
Account.find_local(recognized_params[:username])
+ when 'home'
+ return unless recognized_params[:action] == 'index' && recognized_params[:username_with_domain].present?
+
+ if recognized_params[:any]&.match?(/\A[0-9]+\Z/)
+ status = Status.find_by(id: recognized_params[:any])
+ check_local_status(status)
+ elsif recognized_params[:any].blank?
+ username, domain = recognized_params[:username_with_domain].gsub(/\A@/, '').split('@')
+ return unless username.present? && domain.present?
+
+ Account.find_remote(username, domain)
+ end
end
end
diff --git a/app/validators/status_length_validator.rb b/app/validators/status_length_validator.rb
index e107912b7..a3cbe5123 100644
--- a/app/validators/status_length_validator.rb
+++ b/app/validators/status_length_validator.rb
@@ -1,7 +1,7 @@
# frozen_string_literal: true
class StatusLengthValidator < ActiveModel::Validator
- MAX_CHARS = 500
+ MAX_CHARS = 5000
URL_PLACEHOLDER_CHARS = 23
URL_PLACEHOLDER = 'x' * 23
diff --git a/app/validators/vote_validator.rb b/app/validators/vote_validator.rb
index b1692562d..4316c59ef 100644
--- a/app/validators/vote_validator.rb
+++ b/app/validators/vote_validator.rb
@@ -3,8 +3,8 @@
class VoteValidator < ActiveModel::Validator
def validate(vote)
vote.errors.add(:base, I18n.t('polls.errors.expired')) if vote.poll.expired?
-
vote.errors.add(:base, I18n.t('polls.errors.invalid_choice')) if invalid_choice?(vote)
+ vote.errors.add(:base, I18n.t('polls.errors.self_vote')) if self_vote?(vote)
if vote.poll.multiple? && vote.poll.votes.where(account: vote.account, choice: vote.choice).exists?
vote.errors.add(:base, I18n.t('polls.errors.already_voted'))
@@ -18,4 +18,8 @@ class VoteValidator < ActiveModel::Validator
def invalid_choice?(vote)
vote.choice.negative? || vote.choice >= vote.poll.options.size
end
+
+ def self_vote?(vote)
+ vote.account_id == vote.poll.account_id
+ end
end
diff --git a/app/views/admin/trends/links/preview_card_providers/index.html.haml b/app/views/admin/trends/links/preview_card_providers/index.html.haml
index c3648c35e..025270c12 100644
--- a/app/views/admin/trends/links/preview_card_providers/index.html.haml
+++ b/app/views/admin/trends/links/preview_card_providers/index.html.haml
@@ -29,7 +29,7 @@
- Trends::PreviewCardProviderFilter::KEYS.each do |key|
= hidden_field_tag key, params[key] if params[key].present?
- .batch-table.optional
+ .batch-table
.batch-table__toolbar
%label.batch-table__toolbar__select.batch-checkbox-all
= check_box_tag :batch_checkbox_all, nil, false
diff --git a/app/views/admin/webhooks/_form.html.haml b/app/views/admin/webhooks/_form.html.haml
index c1e8f8979..6c5ff03dd 100644
--- a/app/views/admin/webhooks/_form.html.haml
+++ b/app/views/admin/webhooks/_form.html.haml
@@ -5,7 +5,7 @@
= f.input :url, wrapper: :with_block_label, input_html: { placeholder: 'https://' }
.fields-group
- = f.input :events, collection: Webhook::EVENTS, wrapper: :with_block_label, include_blank: false, as: :check_boxes, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
+ = f.input :events, collection: Webhook::EVENTS, wrapper: :with_block_label, include_blank: false, as: :check_boxes, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li', disabled: Webhook::EVENTS.filter { |event| !current_user.role.can?(Webhook.permission_for_event(event)) }
.actions
= f.button :button, @webhook.new_record? ? t('admin.webhooks.add_new') : t('generic.save_changes'), type: :submit
diff --git a/app/views/oauth/authorized_applications/index.html.haml b/app/views/oauth/authorized_applications/index.html.haml
index 0280d8aef..55d8524db 100644
--- a/app/views/oauth/authorized_applications/index.html.haml
+++ b/app/views/oauth/authorized_applications/index.html.haml
@@ -18,8 +18,8 @@
.announcements-list__item__action-bar
.announcements-list__item__meta
- - if application.most_recently_used_access_token
- = t('doorkeeper.authorized_applications.index.last_used_at', date: l(application.most_recently_used_access_token.last_used_at.to_date))
+ - if @last_used_at_by_app[application.id]
+ = t('doorkeeper.authorized_applications.index.last_used_at', date: l(@last_used_at_by_app[application.id].to_date))
- else
= t('doorkeeper.authorized_applications.index.never_used')
diff --git a/app/workers/scheduler/accounts_statuses_cleanup_scheduler.rb b/app/workers/scheduler/accounts_statuses_cleanup_scheduler.rb
index d245f6bbd..a2ab31cc5 100644
--- a/app/workers/scheduler/accounts_statuses_cleanup_scheduler.rb
+++ b/app/workers/scheduler/accounts_statuses_cleanup_scheduler.rb
@@ -7,28 +7,30 @@ class Scheduler::AccountsStatusesCleanupScheduler
# This limit is mostly to be nice to the fediverse at large and not
# generate too much traffic.
# This also helps limiting the running time of the scheduler itself.
- MAX_BUDGET = 150
+ MAX_BUDGET = 300
- # This is an attempt to spread the load across instances, as various
- # accounts are likely to have various followers.
+ # This is an attempt to spread the load across remote servers, as
+ # spreading deletions across diverse accounts is likely to spread
+ # the deletion across diverse followers. It also helps each individual
+ # user see some effect sooner.
PER_ACCOUNT_BUDGET = 5
# This is an attempt to limit the workload generated by status removal
- # jobs to something the particular instance can handle.
- PER_THREAD_BUDGET = 6
+ # jobs to something the particular server can handle.
+ PER_THREAD_BUDGET = 5
- # Those avoid loading an instance that is already under load
- MAX_DEFAULT_SIZE = 200
- MAX_DEFAULT_LATENCY = 5
- MAX_PUSH_SIZE = 500
- MAX_PUSH_LATENCY = 10
-
- # 'pull' queue has lower priority jobs, and it's unlikely that pushing
- # deletes would cause much issues with this queue if it didn't cause issues
- # with default and push. Yet, do not enqueue deletes if the instance is
- # lagging behind too much.
- MAX_PULL_SIZE = 10_000
- MAX_PULL_LATENCY = 5.minutes.to_i
+ # These are latency limits on various queues above which a server is
+ # considered to be under load, causing the auto-deletion to be entirely
+ # skipped for that run.
+ LOAD_LATENCY_THRESHOLDS = {
+ default: 5,
+ push: 10,
+ # The `pull` queue has lower priority jobs, and it's unlikely that
+ # pushing deletes would cause much issues with this queue if it didn't
+ # cause issues with `default` and `push`. Yet, do not enqueue deletes
+ # if the instance is lagging behind too much.
+ pull: 5.minutes.to_i,
+ }.freeze
sidekiq_options retry: 0, lock: :until_executed, lock_ttl: 1.day.to_i
@@ -36,17 +38,37 @@ class Scheduler::AccountsStatusesCleanupScheduler
return if under_load?
budget = compute_budget
- first_policy_id = last_processed_id
+
+ # If the budget allows it, we want to consider all accounts with enabled
+ # auto cleanup at least once.
+ #
+ # We start from `first_policy_id` (the last processed id in the previous
+ # run) and process each policy until we loop to `first_policy_id`,
+ # recording into `affected_policies` any policy that caused posts to be
+ # deleted.
+ #
+ # After that, we set `full_iteration` to `false` and continue looping on
+ # policies from `affected_policies`.
+ first_policy_id = last_processed_id || 0
+ first_iteration = true
+ full_iteration = true
+ affected_policies = []
loop do
num_processed_accounts = 0
- scope = AccountStatusesCleanupPolicy.where(enabled: true)
- scope.where(Account.arel_table[:id].gt(first_policy_id)) if first_policy_id.present?
+ scope = cleanup_policies(first_policy_id, affected_policies, first_iteration, full_iteration)
scope.find_each(order: :asc) do |policy|
num_deleted = AccountStatusesCleanupService.new.call(policy, [budget, PER_ACCOUNT_BUDGET].min)
- num_processed_accounts += 1 unless num_deleted.zero?
budget -= num_deleted
+
+ unless num_deleted.zero?
+ num_processed_accounts += 1
+ affected_policies << policy.id if full_iteration
+ end
+
+ full_iteration = false if !first_iteration && policy.id >= first_policy_id
+
if budget.zero?
save_last_processed_id(policy.id)
break
@@ -55,36 +77,55 @@ class Scheduler::AccountsStatusesCleanupScheduler
# The idea here is to loop through all policies at least once until the budget is exhausted
# and start back after the last processed account otherwise
- break if budget.zero? || (num_processed_accounts.zero? && first_policy_id.nil?)
- first_policy_id = nil
+ break if budget.zero? || (num_processed_accounts.zero? && !full_iteration)
+
+ full_iteration = false unless first_iteration
+ first_iteration = false
end
end
def compute_budget
- threads = Sidekiq::ProcessSet.new.select { |x| x['queues'].include?('push') }.map { |x| x['concurrency'] }.sum
+ # Each post deletion is a `RemovalWorker` job (on `default` queue), each
+ # potentially spawning many `ActivityPub::DeliveryWorker` jobs (on the `push` queue).
+ threads = Sidekiq::ProcessSet.new.select { |x| x['queues'].include?('push') }.pluck('concurrency').sum
[PER_THREAD_BUDGET * threads, MAX_BUDGET].min
end
def under_load?
- queue_under_load?('default', MAX_DEFAULT_SIZE, MAX_DEFAULT_LATENCY) || queue_under_load?('push', MAX_PUSH_SIZE, MAX_PUSH_LATENCY) || queue_under_load?('pull', MAX_PULL_SIZE, MAX_PULL_LATENCY)
+ LOAD_LATENCY_THRESHOLDS.any? { |queue, max_latency| queue_under_load?(queue, max_latency) }
end
private
- def queue_under_load?(name, max_size, max_latency)
- queue = Sidekiq::Queue.new(name)
- queue.size > max_size || queue.latency > max_latency
+ def cleanup_policies(first_policy_id, affected_policies, first_iteration, full_iteration)
+ scope = AccountStatusesCleanupPolicy.where(enabled: true)
+
+ if full_iteration
+ # If we are doing a full iteration, examine all policies we have not examined yet
+ if first_iteration
+ scope.where(id: first_policy_id...)
+ else
+ scope.where(id: ..first_policy_id).or(scope.where(id: affected_policies))
+ end
+ else
+ # Otherwise, examine only policies that previously yielded posts to delete
+ scope.where(id: affected_policies)
+ end
+ end
+
+ def queue_under_load?(name, max_latency)
+ Sidekiq::Queue.new(name).latency > max_latency
end
def last_processed_id
- redis.get('account_statuses_cleanup_scheduler:last_account_id')
+ redis.get('account_statuses_cleanup_scheduler:last_policy_id')&.to_i
end
def save_last_processed_id(id)
if id.nil?
- redis.del('account_statuses_cleanup_scheduler:last_account_id')
+ redis.del('account_statuses_cleanup_scheduler:last_policy_id')
else
- redis.set('account_statuses_cleanup_scheduler:last_account_id', id, ex: 1.hour.seconds)
+ redis.set('account_statuses_cleanup_scheduler:last_policy_id', id, ex: 1.hour.seconds)
end
end
end
diff --git a/app/workers/scheduler/indexing_scheduler.rb b/app/workers/scheduler/indexing_scheduler.rb
index c42396629..d622f5586 100644
--- a/app/workers/scheduler/indexing_scheduler.rb
+++ b/app/workers/scheduler/indexing_scheduler.rb
@@ -6,17 +6,19 @@ class Scheduler::IndexingScheduler
sidekiq_options retry: 0
+ IMPORT_BATCH_SIZE = 1000
+ SCAN_BATCH_SIZE = 10 * IMPORT_BATCH_SIZE
+
def perform
return unless Chewy.enabled?
indexes.each do |type|
with_redis do |redis|
- ids = redis.smembers("chewy:queue:#{type.name}")
-
- type.import!(ids)
-
- redis.pipelined do |pipeline|
- ids.each { |id| pipeline.srem("chewy:queue:#{type.name}", id) }
+ redis.sscan_each("chewy:queue:#{type.name}", count: SCAN_BATCH_SIZE).each_slice(IMPORT_BATCH_SIZE) do |ids|
+ type.import!(ids)
+ redis.pipelined do |pipeline|
+ pipeline.srem("chewy:queue:#{type.name}", ids)
+ end
end
end
end
diff --git a/app/workers/scheduler/user_cleanup_scheduler.rb b/app/workers/scheduler/user_cleanup_scheduler.rb
index 45cfbc62e..4aee7935a 100644
--- a/app/workers/scheduler/user_cleanup_scheduler.rb
+++ b/app/workers/scheduler/user_cleanup_scheduler.rb
@@ -24,7 +24,7 @@ class Scheduler::UserCleanupScheduler
def clean_discarded_statuses!
Status.unscoped.discarded.where('deleted_at <= ?', 30.days.ago).find_in_batches do |statuses|
RemovalWorker.push_bulk(statuses) do |status|
- [status.id, { 'immediate' => true }]
+ [status.id, { 'immediate' => true, 'skip_streaming' => true }]
end
end
end
diff --git a/config/application.rb b/config/application.rb
index f0e65f443..55d98ca99 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -28,6 +28,7 @@ require_relative '../lib/paperclip/url_generator_extensions'
require_relative '../lib/paperclip/attachment_extensions'
require_relative '../lib/paperclip/lazy_thumbnail'
require_relative '../lib/paperclip/gif_transcoder'
+require_relative '../lib/paperclip/media_type_spoof_detector_extensions'
require_relative '../lib/paperclip/transcoder'
require_relative '../lib/paperclip/type_corrector'
require_relative '../lib/paperclip/response_with_limit_adapter'
diff --git a/config/imagemagick/policy.xml b/config/imagemagick/policy.xml
new file mode 100644
index 000000000..1052476b3
--- /dev/null
+++ b/config/imagemagick/policy.xml
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
index cb5629337..ccce6d71e 100644
--- a/config/initializers/content_security_policy.rb
+++ b/config/initializers/content_security_policy.rb
@@ -3,7 +3,7 @@
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
def host_to_url(str)
- "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
+ "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str.split('/').first}" if str.present?
end
base_host = Rails.configuration.x.web_domain
diff --git a/config/initializers/paperclip.rb b/config/initializers/paperclip.rb
index 63f0d9240..7ed244e0c 100644
--- a/config/initializers/paperclip.rb
+++ b/config/initializers/paperclip.rb
@@ -155,3 +155,10 @@ unless defined?(Seahorse)
end
end
end
+
+# Set our ImageMagick security policy, but allow admins to override it
+ENV['MAGICK_CONFIGURE_PATH'] = begin
+ imagemagick_config_paths = ENV.fetch('MAGICK_CONFIGURE_PATH', '').split(File::PATH_SEPARATOR)
+ imagemagick_config_paths << Rails.root.join('config', 'imagemagick').expand_path.to_s
+ imagemagick_config_paths.join(File::PATH_SEPARATOR)
+end
diff --git a/config/initializers/sidekiq.rb b/config/initializers/sidekiq.rb
index 9d2abf074..b847e6546 100644
--- a/config/initializers/sidekiq.rb
+++ b/config/initializers/sidekiq.rb
@@ -3,6 +3,11 @@
require_relative '../../lib/mastodon/sidekiq_middleware'
Sidekiq.configure_server do |config|
+ if Rails.configuration.database_configuration.dig('production', 'adapter') == 'postgresql_makara'
+ STDERR.puts 'ERROR: Database replication is not currently supported in Sidekiq workers. Check your configuration.'
+ exit 1
+ end
+
config.redis = REDIS_SIDEKIQ_PARAMS
config.server_middleware do |chain|
diff --git a/config/initializers/twitter_regex.rb b/config/initializers/twitter_regex.rb
index 6a7723fd2..e65b05dfd 100644
--- a/config/initializers/twitter_regex.rb
+++ b/config/initializers/twitter_regex.rb
@@ -25,7 +25,7 @@ module Twitter::TwitterText
\)
/iox
UCHARS = '\u{A0}-\u{D7FF}\u{F900}-\u{FDCF}\u{FDF0}-\u{FFEF}\u{10000}-\u{1FFFD}\u{20000}-\u{2FFFD}\u{30000}-\u{3FFFD}\u{40000}-\u{4FFFD}\u{50000}-\u{5FFFD}\u{60000}-\u{6FFFD}\u{70000}-\u{7FFFD}\u{80000}-\u{8FFFD}\u{90000}-\u{9FFFD}\u{A0000}-\u{AFFFD}\u{B0000}-\u{BFFFD}\u{C0000}-\u{CFFFD}\u{D0000}-\u{DFFFD}\u{E1000}-\u{EFFFD}\u{E000}-\u{F8FF}\u{F0000}-\u{FFFFD}\u{100000}-\u{10FFFD}'
- REGEXEN[:valid_url_query_chars] = /[a-z0-9!?\*'\(\);:&=\+\$\/%#\[\]\-_\.,~|@#{UCHARS}]/iou
+ REGEXEN[:valid_url_query_chars] = /[a-z0-9!?\*'\(\);:&=\+\$\/%#\[\]\-_\.,~|@\^#{UCHARS}]/iou
REGEXEN[:valid_url_query_ending_chars] = /[a-z0-9_&=#\/\-#{UCHARS}]/iou
REGEXEN[:valid_url_path] = /(?:
(?:
diff --git a/config/locales/activerecord.en.yml b/config/locales/activerecord.en.yml
index 8aee15659..a53c7c6e9 100644
--- a/config/locales/activerecord.en.yml
+++ b/config/locales/activerecord.en.yml
@@ -53,3 +53,7 @@ en:
position:
elevated: cannot be higher than your current role
own_role: cannot be changed with your current role
+ webhook:
+ attributes:
+ events:
+ invalid_permissions: cannot include events you don't have the rights to
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b1e2a8568..fe29cf95e 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1387,6 +1387,7 @@ en:
expired: The poll has already ended
invalid_choice: The chosen vote option does not exist
over_character_limit: cannot be longer than %{max} characters each
+ self_vote: You cannot vote in your own polls
too_few_options: must have more than one item
too_many_options: can't contain more than %{max} items
preferences:
@@ -1596,6 +1597,9 @@ en:
themes:
contrast: Mastodon (High contrast)
default: Mastodon (Dark)
+ elephant: Elephant (Dark)
+ elephant-contrast: Elephant (Contrast)
+ elephant-light: Elephant (Light)
mastodon-light: Mastodon (Light)
time:
formats:
diff --git a/config/routes.rb b/config/routes.rb
index 7958c6db8..49508dc39 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -292,7 +292,7 @@ Rails.application.routes.draw do
end
end
- resources :instances, only: [:index, :show, :destroy], constraints: { id: /[^\/]+/ } do
+ resources :instances, only: [:index, :show, :destroy], constraints: { id: /[^\/]+/ }, format: 'html' do
member do
post :clear_delivery_errors
post :restart_delivery
diff --git a/config/themes.yml b/config/themes.yml
index 9c21c9459..6b1d5db8b 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -1,3 +1,6 @@
default: styles/application.scss
-contrast: styles/contrast.scss
+elephant: styles/elephant.scss
+elephant-light: styles/elephant-light.scss
+elephant-contrast: styles/elephant-contrast.scss
mastodon-light: styles/mastodon-light.scss
+contrast: styles/contrast.scss
diff --git a/dist/nginx.conf b/dist/nginx.conf
index 5bc960e25..b59446403 100644
--- a/dist/nginx.conf
+++ b/dist/nginx.conf
@@ -109,6 +109,8 @@ server {
location ~ ^/system/ {
add_header Cache-Control "public, max-age=2419200, immutable";
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
+ add_header X-Content-Type-Options nosniff;
+ add_header Content-Security-Policy "default-src 'none'; form-action 'none'";
try_files $uri =404;
}
diff --git a/docker-compose.yml b/docker-compose.yml
index f603c2f7e..ae6aefb37 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -56,7 +56,7 @@ services:
web:
build: .
- image: ghcr.io/mastodon/mastodon
+ image: ghcr.io/mastodon/mastodon:v4.1.6
restart: always
env_file: .env.production
command: bash -c "rm -f /mastodon/tmp/pids/server.pid; bundle exec rails s -p 3000"
@@ -77,7 +77,7 @@ services:
streaming:
build: .
- image: ghcr.io/mastodon/mastodon
+ image: ghcr.io/mastodon/mastodon:v4.1.6
restart: always
env_file: .env.production
command: node ./streaming
@@ -95,7 +95,7 @@ services:
sidekiq:
build: .
- image: ghcr.io/mastodon/mastodon
+ image: ghcr.io/mastodon/mastodon:v4.1.6
restart: always
env_file: .env.production
command: bundle exec sidekiq
diff --git a/lib/mastodon/accounts_cli.rb b/lib/mastodon/accounts_cli.rb
index be93bba59..d4a6bbc12 100644
--- a/lib/mastodon/accounts_cli.rb
+++ b/lib/mastodon/accounts_cli.rb
@@ -542,7 +542,7 @@ module Mastodon
User.pending.find_each(&:approve!)
say('OK', :green)
elsif options[:number]
- User.pending.limit(options[:number]).each(&:approve!)
+ User.pending.order(created_at: :asc).limit(options[:number]).each(&:approve!)
say('OK', :green)
elsif username.present?
account = Account.find_local(username)
diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb
index 75b247b41..9d1e4d58e 100644
--- a/lib/mastodon/version.rb
+++ b/lib/mastodon/version.rb
@@ -13,7 +13,7 @@ module Mastodon
end
def patch
- 2
+ 6
end
def flags
@@ -21,7 +21,7 @@ module Mastodon
end
def suffix
- '-gh23137'
+ '-gh23240'
end
def to_a
diff --git a/lib/paperclip/media_type_spoof_detector_extensions.rb b/lib/paperclip/media_type_spoof_detector_extensions.rb
new file mode 100644
index 000000000..a406ef312
--- /dev/null
+++ b/lib/paperclip/media_type_spoof_detector_extensions.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Paperclip
+ module MediaTypeSpoofDetectorExtensions
+ def calculated_content_type
+ return @calculated_content_type if defined?(@calculated_content_type)
+
+ @calculated_content_type = type_from_file_command.chomp
+
+ # The `file` command fails to recognize some MP3 files as such
+ @calculated_content_type = type_from_marcel if @calculated_content_type == 'application/octet-stream' && type_from_marcel == 'audio/mpeg'
+ @calculated_content_type
+ end
+
+ def type_from_marcel
+ @type_from_marcel ||= Marcel::MimeType.for Pathname.new(@file.path),
+ name: @file.path
+ end
+ end
+end
+
+Paperclip::MediaTypeSpoofDetector.prepend(Paperclip::MediaTypeSpoofDetectorExtensions)
diff --git a/lib/paperclip/transcoder.rb b/lib/paperclip/transcoder.rb
index afd9f58ff..be40b4924 100644
--- a/lib/paperclip/transcoder.rb
+++ b/lib/paperclip/transcoder.rb
@@ -19,10 +19,7 @@ module Paperclip
def make
metadata = VideoMetadataExtractor.new(@file.path)
- unless metadata.valid?
- Paperclip.log("Unsupported file #{@file.path}")
- return File.open(@file.path)
- end
+ raise Paperclip::Error, "Error while transcoding #{@file.path}: unsupported file" unless metadata.valid?
update_attachment_type(metadata)
update_options_from_metadata(metadata)
diff --git a/lib/public_file_server_middleware.rb b/lib/public_file_server_middleware.rb
index 3799230a2..7e02e37a0 100644
--- a/lib/public_file_server_middleware.rb
+++ b/lib/public_file_server_middleware.rb
@@ -32,6 +32,11 @@ class PublicFileServerMiddleware
end
end
+ # Override the default CSP header set by the CSP middleware
+ headers['Content-Security-Policy'] = "default-src 'none'; form-action 'none'" if request_path.start_with?(paperclip_root_url)
+
+ headers['X-Content-Type-Options'] = 'nosniff'
+
[status, headers, response]
end
diff --git a/lib/sanitize_ext/sanitize_config.rb b/lib/sanitize_ext/sanitize_config.rb
index baf652662..703ba8b05 100644
--- a/lib/sanitize_ext/sanitize_config.rb
+++ b/lib/sanitize_ext/sanitize_config.rb
@@ -94,26 +94,26 @@ class Sanitize
]
)
- MASTODON_OEMBED ||= freeze_config merge(
- RELAXED,
- elements: RELAXED[:elements] + %w(audio embed iframe source video),
+ MASTODON_OEMBED ||= freeze_config(
+ elements: %w(audio embed iframe source video),
- attributes: merge(
- RELAXED[:attributes],
+ attributes: {
'audio' => %w(controls),
'embed' => %w(height src type width),
'iframe' => %w(allowfullscreen frameborder height scrolling src width),
'source' => %w(src type),
'video' => %w(controls height loop width),
- 'div' => [:data]
- ),
+ },
- protocols: merge(
- RELAXED[:protocols],
+ protocols: {
'embed' => { 'src' => HTTP_PROTOCOLS },
'iframe' => { 'src' => HTTP_PROTOCOLS },
- 'source' => { 'src' => HTTP_PROTOCOLS }
- )
+ 'source' => { 'src' => HTTP_PROTOCOLS },
+ },
+
+ add_attributes: {
+ 'iframe' => { 'sandbox' => 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms' },
+ }
)
end
end
diff --git a/lib/tasks/branding.rake b/lib/tasks/branding.rake
index d1c1c9ded..d97c97c99 100644
--- a/lib/tasks/branding.rake
+++ b/lib/tasks/branding.rake
@@ -40,7 +40,7 @@ namespace :branding do
output_dest = Rails.root.join('app', 'javascript', 'icons')
rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size --keep-aspect-ratio :input -o :output')
- convert = Terrapin::CommandLine.new('convert', ':input :output')
+ convert = Terrapin::CommandLine.new('convert', ':input :output', environment: { 'MAGICK_CONFIGURE_PATH' => nil })
favicon_sizes = [16, 32, 48]
apple_icon_sizes = [57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024]
diff --git a/spec/controllers/api/v1/conversations_controller_spec.rb b/spec/controllers/api/v1/conversations_controller_spec.rb
index 5add7cf1d..1ec26d520 100644
--- a/spec/controllers/api/v1/conversations_controller_spec.rb
+++ b/spec/controllers/api/v1/conversations_controller_spec.rb
@@ -16,6 +16,7 @@ RSpec.describe Api::V1::ConversationsController, type: :controller do
before do
PostStatusService.new.call(other.account, text: 'Hey @alice', visibility: 'direct')
+ PostStatusService.new.call(user.account, text: 'Hey, nobody here', visibility: 'direct')
end
it 'returns http success' do
@@ -31,7 +32,26 @@ RSpec.describe Api::V1::ConversationsController, type: :controller do
it 'returns conversations' do
get :index
json = body_as_json
- expect(json.size).to eq 1
+ expect(json.size).to eq 2
+ expect(json[0][:accounts].size).to eq 1
+ end
+
+ context 'with since_id' do
+ context 'when requesting old posts' do
+ it 'returns conversations' do
+ get :index, params: { since_id: Mastodon::Snowflake.id_at(1.hour.ago, with_random: false) }
+ json = body_as_json
+ expect(json.size).to eq 2
+ end
+ end
+
+ context 'when requesting posts in the future' do
+ it 'returns no conversation' do
+ get :index, params: { since_id: Mastodon::Snowflake.id_at(1.hour.from_now, with_random: false) }
+ json = body_as_json
+ expect(json.size).to eq 0
+ end
+ end
end
end
end
diff --git a/spec/controllers/api/v1/statuses/histories_controller_spec.rb b/spec/controllers/api/v1/statuses/histories_controller_spec.rb
index 00677f1d2..99384c8ed 100644
--- a/spec/controllers/api/v1/statuses/histories_controller_spec.rb
+++ b/spec/controllers/api/v1/statuses/histories_controller_spec.rb
@@ -23,6 +23,7 @@ describe Api::V1::Statuses::HistoriesController do
it 'returns http success' do
expect(response).to have_http_status(200)
+ expect(body_as_json.size).to_not be 0
end
end
end
diff --git a/spec/controllers/api/v2/admin/accounts_controller_spec.rb b/spec/controllers/api/v2/admin/accounts_controller_spec.rb
index 2508a9e05..ebec4a13e 100644
--- a/spec/controllers/api/v2/admin/accounts_controller_spec.rb
+++ b/spec/controllers/api/v2/admin/accounts_controller_spec.rb
@@ -69,5 +69,13 @@ RSpec.describe Api::V2::Admin::AccountsController, type: :controller do
end
end
end
+
+ context 'with limit param' do
+ let(:params) { { limit: 1 } }
+
+ it 'sets the correct pagination headers' do
+ expect(response.headers['Link'].find_link(%w(rel next)).href).to eq api_v2_admin_accounts_url(limit: 1, max_id: admin_account.id)
+ end
+ end
end
end
diff --git a/spec/controllers/well_known/webfinger_controller_spec.rb b/spec/controllers/well_known/webfinger_controller_spec.rb
index 8574d369d..0e7b34f47 100644
--- a/spec/controllers/well_known/webfinger_controller_spec.rb
+++ b/spec/controllers/well_known/webfinger_controller_spec.rb
@@ -4,6 +4,10 @@ describe WellKnown::WebfingerController, type: :controller do
render_views
describe 'GET #show' do
+ subject(:perform_show!) do
+ get :show, params: { resource: resource }, format: :json
+ end
+
let(:alternate_domains) { [] }
let(:alice) { Fabricate(:account, username: 'alice') }
let(:resource) { nil }
@@ -15,10 +19,6 @@ describe WellKnown::WebfingerController, type: :controller do
Rails.configuration.x.alternate_domains = tmp
end
- subject do
- get :show, params: { resource: resource }, format: :json
- end
-
shared_examples 'a successful response' do
it 'returns http success' do
expect(response).to have_http_status(200)
@@ -43,7 +43,7 @@ describe WellKnown::WebfingerController, type: :controller do
let(:resource) { alice.to_webfinger_s }
before do
- subject
+ perform_show!
end
it_behaves_like 'a successful response'
@@ -54,7 +54,7 @@ describe WellKnown::WebfingerController, type: :controller do
before do
alice.suspend!
- subject
+ perform_show!
end
it_behaves_like 'a successful response'
@@ -66,7 +66,7 @@ describe WellKnown::WebfingerController, type: :controller do
before do
alice.suspend!
alice.deletion_request.destroy
- subject
+ perform_show!
end
it 'returns http gone' do
@@ -78,7 +78,7 @@ describe WellKnown::WebfingerController, type: :controller do
let(:resource) { 'acct:not@existing.com' }
before do
- subject
+ perform_show!
end
it 'returns http not found' do
@@ -90,7 +90,7 @@ describe WellKnown::WebfingerController, type: :controller do
let(:alternate_domains) { ['foo.org'] }
before do
- subject
+ perform_show!
end
context 'when an account exists' do
@@ -114,11 +114,39 @@ describe WellKnown::WebfingerController, type: :controller do
end
end
+ context 'when the old name scheme is used to query the instance actor' do
+ let(:resource) do
+ "#{Rails.configuration.x.local_domain}@#{Rails.configuration.x.local_domain}"
+ end
+
+ before do
+ perform_show!
+ end
+
+ it 'returns http success' do
+ expect(response).to have_http_status(200)
+ end
+
+ it 'does not set a Vary header' do
+ expect(response.headers['Vary']).to be_nil
+ end
+
+ it 'returns application/jrd+json' do
+ expect(response.media_type).to eq 'application/jrd+json'
+ end
+
+ it 'returns links for the internal account' do
+ json = body_as_json
+ expect(json[:subject]).to eq 'acct:mastodon.internal@cb6e6126.ngrok.io'
+ expect(json[:aliases]).to eq ['https://cb6e6126.ngrok.io/actor']
+ end
+ end
+
context 'with no resource parameter' do
let(:resource) { nil }
before do
- subject
+ perform_show!
end
it 'returns http bad request' do
@@ -130,7 +158,7 @@ describe WellKnown::WebfingerController, type: :controller do
let(:resource) { 'df/:dfkj' }
before do
- subject
+ perform_show!
end
it 'returns http bad request' do
diff --git a/spec/fixtures/files/attachment-jpg.123456_abcd b/spec/fixtures/files/attachment-jpg.123456_abcd
new file mode 100644
index 000000000..f1d40539a
Binary files /dev/null and b/spec/fixtures/files/attachment-jpg.123456_abcd differ
diff --git a/spec/fixtures/files/boop.mp3 b/spec/fixtures/files/boop.mp3
new file mode 100644
index 000000000..ba106a3a3
Binary files /dev/null and b/spec/fixtures/files/boop.mp3 differ
diff --git a/spec/lib/account_reach_finder_spec.rb b/spec/lib/account_reach_finder_spec.rb
new file mode 100644
index 000000000..1da95ba6b
--- /dev/null
+++ b/spec/lib/account_reach_finder_spec.rb
@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe AccountReachFinder do
+ let(:account) { Fabricate(:account) }
+
+ let(:follower1) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://example.com/inbox-1') }
+ let(:follower2) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://example.com/inbox-2') }
+ let(:follower3) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://foo.bar/users/a/inbox', shared_inbox_url: 'https://foo.bar/inbox') }
+
+ let(:mentioned1) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://foo.bar/users/b/inbox', shared_inbox_url: 'https://foo.bar/inbox') }
+ let(:mentioned2) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://example.com/inbox-3') }
+ let(:mentioned3) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://example.com/inbox-4') }
+
+ let(:unrelated_account) { Fabricate(:account, protocol: :activitypub, inbox_url: 'https://example.com/unrelated-inbox') }
+
+ before do
+ follower1.follow!(account)
+ follower2.follow!(account)
+ follower3.follow!(account)
+
+ Fabricate(:status, account: account).tap do |status|
+ status.mentions << Mention.new(account: follower1)
+ status.mentions << Mention.new(account: mentioned1)
+ end
+
+ Fabricate(:status, account: account)
+
+ Fabricate(:status, account: account).tap do |status|
+ status.mentions << Mention.new(account: mentioned2)
+ status.mentions << Mention.new(account: mentioned3)
+ end
+
+ Fabricate(:status).tap do |status|
+ status.mentions << Mention.new(account: unrelated_account)
+ end
+ end
+
+ describe '#inboxes' do
+ it 'includes the preferred inbox URL of followers' do
+ expect(described_class.new(account).inboxes).to include(*[follower1, follower2, follower3].map(&:preferred_inbox_url))
+ end
+
+ it 'includes the preferred inbox URL of recently-mentioned accounts' do
+ expect(described_class.new(account).inboxes).to include(*[mentioned1, mentioned2, mentioned3].map(&:preferred_inbox_url))
+ end
+
+ it 'does not include the inbox of unrelated users' do
+ expect(described_class.new(account).inboxes).to_not include(unrelated_account.preferred_inbox_url)
+ end
+ end
+end
diff --git a/spec/lib/vacuum/access_tokens_vacuum_spec.rb b/spec/lib/vacuum/access_tokens_vacuum_spec.rb
index 0244c3449..39c8cdb39 100644
--- a/spec/lib/vacuum/access_tokens_vacuum_spec.rb
+++ b/spec/lib/vacuum/access_tokens_vacuum_spec.rb
@@ -5,9 +5,11 @@ RSpec.describe Vacuum::AccessTokensVacuum do
describe '#perform' do
let!(:revoked_access_token) { Fabricate(:access_token, revoked_at: 1.minute.ago) }
+ let!(:expired_access_token) { Fabricate(:access_token, expires_in: 59.minutes.to_i, created_at: 1.hour.ago) }
let!(:active_access_token) { Fabricate(:access_token) }
let!(:revoked_access_grant) { Fabricate(:access_grant, revoked_at: 1.minute.ago) }
+ let!(:expired_access_grant) { Fabricate(:access_grant, expires_in: 59.minutes.to_i, created_at: 1.hour.ago) }
let!(:active_access_grant) { Fabricate(:access_grant) }
before do
@@ -18,10 +20,18 @@ RSpec.describe Vacuum::AccessTokensVacuum do
expect { revoked_access_token.reload }.to raise_error ActiveRecord::RecordNotFound
end
+ it 'deletes expired access tokens' do
+ expect { expired_access_token.reload }.to raise_error ActiveRecord::RecordNotFound
+ end
+
it 'deletes revoked access grants' do
expect { revoked_access_grant.reload }.to raise_error ActiveRecord::RecordNotFound
end
+ it 'deletes expired access grants' do
+ expect { expired_access_grant.reload }.to raise_error ActiveRecord::RecordNotFound
+ end
+
it 'does not delete active access tokens' do
expect { active_access_token.reload }.to_not raise_error
end
diff --git a/spec/models/form/account_batch_spec.rb b/spec/models/form/account_batch_spec.rb
new file mode 100644
index 000000000..fd8e90901
--- /dev/null
+++ b/spec/models/form/account_batch_spec.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Form::AccountBatch do
+ let(:account_batch) { described_class.new }
+
+ describe '#save' do
+ subject { account_batch.save }
+
+ let(:account) { Fabricate(:user, role: UserRole.find_by(name: 'Admin')).account }
+ let(:account_ids) { [] }
+ let(:query) { Account.none }
+
+ before do
+ account_batch.assign_attributes(
+ action: action,
+ current_account: account,
+ account_ids: account_ids,
+ query: query,
+ select_all_matching: select_all_matching
+ )
+ end
+
+ context 'when action is "suspend"' do
+ let(:action) { 'suspend' }
+
+ let(:target_account) { Fabricate(:account) }
+ let(:target_account2) { Fabricate(:account) }
+
+ before do
+ Fabricate(:report, target_account: target_account)
+ Fabricate(:report, target_account: target_account2)
+ end
+
+ context 'when accounts are passed as account_ids' do
+ let(:select_all_matching) { '0' }
+ let(:account_ids) { [target_account.id, target_account2.id] }
+
+ it 'suspends the expected users' do
+ expect { subject }.to change { [target_account.reload.suspended?, target_account2.reload.suspended?] }.from([false, false]).to([true, true])
+ end
+
+ it 'closes open reports targeting the suspended users' do
+ expect { subject }.to change { Report.unresolved.where(target_account: [target_account, target_account2]).count }.from(2).to(0)
+ end
+ end
+
+ context 'when accounts are passed as a query' do
+ let(:select_all_matching) { '1' }
+ let(:query) { Account.where(id: [target_account.id, target_account2.id]) }
+
+ it 'suspends the expected users' do
+ expect { subject }.to change { [target_account.reload.suspended?, target_account2.reload.suspended?] }.from([false, false]).to([true, true])
+ end
+
+ it 'closes open reports targeting the suspended users' do
+ expect { subject }.to change { Report.unresolved.where(target_account: [target_account, target_account2]).count }.from(2).to(0)
+ end
+ end
+ end
+ end
+end
diff --git a/spec/models/media_attachment_spec.rb b/spec/models/media_attachment_spec.rb
index 29fd313ae..c3283ccb0 100644
--- a/spec/models/media_attachment_spec.rb
+++ b/spec/models/media_attachment_spec.rb
@@ -150,6 +150,26 @@ RSpec.describe MediaAttachment, type: :model do
end
end
+ describe 'mp3 with large cover art' do
+ let(:media) { described_class.create(account: Fabricate(:account), file: attachment_fixture('boop.mp3')) }
+
+ it 'detects it as an audio file' do
+ expect(media.type).to eq 'audio'
+ end
+
+ it 'sets meta for the duration' do
+ expect(media.file.meta['original']['duration']).to be_within(0.05).of(0.235102)
+ end
+
+ it 'extracts thumbnail' do
+ expect(media.thumbnail.present?).to be true
+ end
+
+ it 'gives the file a random name' do
+ expect(media.file_file_name).to_not eq 'boop.mp3'
+ end
+ end
+
describe 'jpeg' do
let(:media) { MediaAttachment.create(account: Fabricate(:account), file: attachment_fixture('attachment.jpg')) }
diff --git a/spec/requests/api/v2/media_spec.rb b/spec/requests/api/v2/media_spec.rb
new file mode 100644
index 000000000..89384d0ca
--- /dev/null
+++ b/spec/requests/api/v2/media_spec.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Media API', paperclip_processing: true do
+ let(:user) { Fabricate(:user) }
+ let(:token) { Fabricate(:accessible_access_token, resource_owner_id: user.id, scopes: scopes) }
+ let(:scopes) { 'write' }
+ let(:headers) { { 'Authorization' => "Bearer #{token.token}" } }
+
+ describe 'POST /api/v2/media' do
+ it 'returns http success' do
+ post '/api/v2/media', headers: headers, params: { file: fixture_file_upload('attachment-jpg.123456_abcd', 'image/jpeg') }
+ expect(File.exist?(user.account.media_attachments.first.file.path(:small))).to be true
+ expect(response).to have_http_status(200)
+ end
+ end
+end
diff --git a/spec/requests/content_security_policy_spec.rb b/spec/requests/content_security_policy_spec.rb
new file mode 100644
index 000000000..7eb27d61d
--- /dev/null
+++ b/spec/requests/content_security_policy_spec.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe 'Content-Security-Policy' do
+ it 'sets the expected CSP headers' do
+ allow(SecureRandom).to receive(:base64).with(16).and_return('ZbA+JmE7+bK8F5qvADZHuQ==')
+
+ get '/'
+ expect(response.headers['Content-Security-Policy'].split(';').map(&:strip)).to contain_exactly(
+ "base-uri 'none'",
+ "default-src 'none'",
+ "frame-ancestors 'none'",
+ "font-src 'self' https://cb6e6126.ngrok.io",
+ "img-src 'self' https: data: blob: https://cb6e6126.ngrok.io",
+ "style-src 'self' https://cb6e6126.ngrok.io 'nonce-ZbA+JmE7+bK8F5qvADZHuQ=='",
+ "media-src 'self' https: data: https://cb6e6126.ngrok.io",
+ "frame-src 'self' https:",
+ "manifest-src 'self' https://cb6e6126.ngrok.io",
+ "form-action 'self'",
+ "child-src 'self' blob: https://cb6e6126.ngrok.io",
+ "worker-src 'self' blob: https://cb6e6126.ngrok.io",
+ "connect-src 'self' data: blob: https://cb6e6126.ngrok.io https://cb6e6126.ngrok.io ws://localhost:4000",
+ "script-src 'self' https://cb6e6126.ngrok.io 'wasm-unsafe-eval'"
+ )
+ end
+end
diff --git a/spec/services/fetch_link_card_service_spec.rb b/spec/services/fetch_link_card_service_spec.rb
index 4914c2753..7a758f910 100644
--- a/spec/services/fetch_link_card_service_spec.rb
+++ b/spec/services/fetch_link_card_service_spec.rb
@@ -10,6 +10,7 @@ RSpec.describe FetchLinkCardService, type: :service do
stub_request(:get, 'http://example.com/koi8-r').to_return(request_fixture('koi8-r.txt'))
stub_request(:get, 'http://example.com/日本語').to_return(request_fixture('sjis.txt'))
stub_request(:get, 'https://github.com/qbi/WannaCry').to_return(status: 404)
+ stub_request(:get, 'http://example.com/test?data=file.gpx%5E1').to_return(status: 200)
stub_request(:get, 'http://example.com/test-').to_return(request_fixture('idn.txt'))
stub_request(:get, 'http://example.com/windows-1251').to_return(request_fixture('windows-1251.txt'))
@@ -85,6 +86,15 @@ RSpec.describe FetchLinkCardService, type: :service do
expect(a_request(:get, 'http://example.com/sjis')).to_not have_been_made
end
end
+
+ context do
+ let(:status) { Fabricate(:status, text: 'test http://example.com/test?data=file.gpx^1') }
+
+ it 'does fetch URLs with a caret in search params' do
+ expect(a_request(:get, 'http://example.com/test?data=file.gpx')).to_not have_been_made
+ expect(a_request(:get, 'http://example.com/test?data=file.gpx%5E1')).to have_been_made.once
+ end
+ end
end
context 'in a remote status' do
diff --git a/spec/services/resolve_url_service_spec.rb b/spec/services/resolve_url_service_spec.rb
index b3e3defbf..ab5b50b76 100644
--- a/spec/services/resolve_url_service_spec.rb
+++ b/spec/services/resolve_url_service_spec.rb
@@ -145,5 +145,35 @@ describe ResolveURLService, type: :service do
expect(subject.call(url, on_behalf_of: account)).to eq(status)
end
end
+
+ context 'when searching for a local link of a remote private status' do
+ let(:account) { Fabricate(:account) }
+ let(:poster) { Fabricate(:account, username: 'foo', domain: 'example.com') }
+ let(:url) { 'https://example.com/@foo/42' }
+ let(:uri) { 'https://example.com/users/foo/statuses/42' }
+ let!(:status) { Fabricate(:status, url: url, uri: uri, account: poster, visibility: :private) }
+ let(:search_url) { "https://#{Rails.configuration.x.local_domain}/@foo@example.com/#{status.id}" }
+
+ before do
+ stub_request(:get, url).to_return(status: 404) if url.present?
+ stub_request(:get, uri).to_return(status: 404)
+ end
+
+ context 'when the account follows the poster' do
+ before do
+ account.follow!(poster)
+ end
+
+ it 'returns the status' do
+ expect(subject.call(search_url, on_behalf_of: account)).to eq(status)
+ end
+ end
+
+ context 'when the account does not follow the poster' do
+ it 'does not return the status' do
+ expect(subject.call(search_url, on_behalf_of: account)).to be_nil
+ end
+ end
+ end
end
end
diff --git a/spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb b/spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb
index d953cc39d..0b0c4dd48 100644
--- a/spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb
+++ b/spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb
@@ -7,11 +7,13 @@ describe Scheduler::AccountsStatusesCleanupScheduler do
let!(:account2) { Fabricate(:account, domain: nil) }
let!(:account3) { Fabricate(:account, domain: nil) }
let!(:account4) { Fabricate(:account, domain: nil) }
+ let!(:account5) { Fabricate(:account, domain: nil) }
let!(:remote) { Fabricate(:account) }
let!(:policy1) { Fabricate(:account_statuses_cleanup_policy, account: account1) }
let!(:policy2) { Fabricate(:account_statuses_cleanup_policy, account: account3) }
let!(:policy3) { Fabricate(:account_statuses_cleanup_policy, account: account4, enabled: false) }
+ let!(:policy4) { Fabricate(:account_statuses_cleanup_policy, account: account5) }
let(:queue_size) { 0 }
let(:queue_latency) { 0 }
@@ -40,6 +42,7 @@ describe Scheduler::AccountsStatusesCleanupScheduler do
Fabricate(:status, account: account2, created_at: 3.years.ago)
Fabricate(:status, account: account3, created_at: 3.years.ago)
Fabricate(:status, account: account4, created_at: 3.years.ago)
+ Fabricate(:status, account: account5, created_at: 3.years.ago)
Fabricate(:status, account: remote, created_at: 3.years.ago)
end
@@ -70,7 +73,7 @@ describe Scheduler::AccountsStatusesCleanupScheduler do
end
end
- describe '#get_budget' do
+ describe '#compute_budget' do
context 'on a single thread' do
let(:process_set_stub) { [ { 'concurrency' => 1, 'queues' => ['push', 'default'] } ] }
@@ -109,8 +112,48 @@ describe Scheduler::AccountsStatusesCleanupScheduler do
expect { subject.perform }.to_not change { account4.statuses.count }
end
- it 'eventually deletes every deletable toot' do
- expect { subject.perform; subject.perform; subject.perform; subject.perform }.to change { Status.count }.by(-20)
+ it 'eventually deletes every deletable toot given enough runs' do
+ stub_const 'Scheduler::AccountsStatusesCleanupScheduler::MAX_BUDGET', 4
+
+ expect { 10.times { subject.perform } }.to change { Status.count }.by(-30)
+ end
+
+ it 'correctly round-trips between users across several runs' do
+ stub_const 'Scheduler::AccountsStatusesCleanupScheduler::MAX_BUDGET', 3
+ stub_const 'Scheduler::AccountsStatusesCleanupScheduler::PER_ACCOUNT_BUDGET', 2
+
+ expect { 3.times { subject.perform } }
+ .to change { Status.count }.by(-3 * 3)
+ .and change { account1.statuses.count }
+ .and change { account3.statuses.count }
+ .and change { account5.statuses.count }
+ end
+
+ context 'when given a big budget' do
+ let(:process_set_stub) { [{ 'concurrency' => 400, 'queues' => %w(push default) }] }
+
+ before do
+ stub_const 'Scheduler::AccountsStatusesCleanupScheduler::MAX_BUDGET', 400
+ end
+
+ it 'correctly handles looping in a single run' do
+ expect(subject.compute_budget).to eq(400)
+ expect { subject.perform }.to change { Status.count }.by(-30)
+ end
+ end
+
+ context 'when there is no work to be done' do
+ let(:process_set_stub) { [{ 'concurrency' => 400, 'queues' => %w(push default) }] }
+
+ before do
+ stub_const 'Scheduler::AccountsStatusesCleanupScheduler::MAX_BUDGET', 400
+ subject.perform
+ end
+
+ it 'does not get stuck' do
+ expect(subject.compute_budget).to eq(400)
+ expect { subject.perform }.to_not change { Status.count }
+ end
end
end
end
diff --git a/streaming/index.js b/streaming/index.js
index 32e3babaa..3fea71f94 100644
--- a/streaming/index.js
+++ b/streaming/index.js
@@ -92,18 +92,31 @@ const redisUrlToClient = async (defaultConfig, redisUrl) => {
const numWorkers = +process.env.STREAMING_CLUSTER_NUM || (env === 'development' ? 1 : Math.max(os.cpus().length - 1, 1));
/**
+ * Attempts to safely parse a string as JSON, used when both receiving a message
+ * from redis and when receiving a message from a client over a websocket
+ * connection, this is why it accepts a `req` argument.
* @param {string} json
- * @param {any} req
- * @return {Object.|null}
+ * @param {any?} req
+ * @returns {Object.|null}
*/
const parseJSON = (json, req) => {
try {
return JSON.parse(json);
} catch (err) {
- if (req.accountId) {
- log.warn(req.requestId, `Error parsing message from user ${req.accountId}: ${err}`);
+ /* FIXME: This logging isn't great, and should probably be done at the
+ * call-site of parseJSON, not in the method, but this would require changing
+ * the signature of parseJSON to return something akin to a Result type:
+ * [Error|null, null|Object {
const redisPrefix = redisNamespace ? `${redisNamespace}:` : '';
/**
- * @type {Object.>}
+ * @type {Object.): void>>}
*/
const subs = {};
@@ -207,12 +220,21 @@ const startWorker = async (workerId) => {
return;
}
- callbacks.forEach(callback => callback(message));
+ const json = parseJSON(message, null);
+ if (!json) return;
+
+ callbacks.forEach(callback => callback(json));
};
+ /**
+ * @callback SubscriptionListener
+ * @param {ReturnType} json of the message
+ * @returns void
+ */
+
/**
* @param {string} channel
- * @param {function(string): void} callback
+ * @param {SubscriptionListener} callback
*/
const subscribe = (channel, callback) => {
log.silly(`Adding listener for ${channel}`);
@@ -229,6 +251,7 @@ const startWorker = async (workerId) => {
/**
* @param {string} channel
+ * @param {SubscriptionListener} callback
*/
const unsubscribe = (channel, callback) => {
log.silly(`Removing listener for ${channel}`);
@@ -378,7 +401,7 @@ const startWorker = async (workerId) => {
/**
* @param {any} req
- * @return {string}
+ * @returns {string|undefined}
*/
const channelNameFromPath = req => {
const { path, query } = req;
@@ -487,15 +510,11 @@ const startWorker = async (workerId) => {
/**
* @param {any} req
* @param {SystemMessageHandlers} eventHandlers
- * @return {function(string): void}
+ * @returns {function(object): void}
*/
const createSystemMessageListener = (req, eventHandlers) => {
return message => {
- const json = parseJSON(message, req);
-
- if (!json) return;
-
- const { event } = json;
+ const { event } = message;
log.silly(req.requestId, `System message for ${req.accountId}: ${event}`);
@@ -610,54 +629,66 @@ const startWorker = async (workerId) => {
* @param {string[]} ids
* @param {any} req
* @param {function(string, string): void} output
- * @param {function(string[], function(string): void): void} attachCloseHandler
+ * @param {undefined | function(string[], SubscriptionListener): void} attachCloseHandler
* @param {boolean=} needsFiltering
- * @return {function(string): void}
+ * @returns {SubscriptionListener}
*/
const streamFrom = (ids, req, output, attachCloseHandler, needsFiltering = false) => {
const accountId = req.accountId || req.remoteAddress;
log.verbose(req.requestId, `Starting stream from ${ids.join(', ')} for ${accountId}`);
+ const transmit = (event, payload) => {
+ // TODO: Replace "string"-based delete payloads with object payloads:
+ const encodedPayload = typeof payload === 'object' ? JSON.stringify(payload) : payload;
+
+ log.silly(req.requestId, `Transmitting for ${accountId}: ${event} ${encodedPayload}`);
+ output(event, encodedPayload);
+ };
+
+ // The listener used to process each message off the redis subscription,
+ // message here is an object with an `event` and `payload` property. Some
+ // events also include a queued_at value, but this is being removed shortly.
+ /** @type {SubscriptionListener} */
const listener = message => {
- const json = parseJSON(message, req);
+ const { event, payload } = message;
- if (!json) return;
-
- const { event, payload, queued_at } = json;
-
- const transmit = () => {
- const now = new Date().getTime();
- const delta = now - queued_at;
- const encodedPayload = typeof payload === 'object' ? JSON.stringify(payload) : payload;
-
- log.silly(req.requestId, `Transmitting for ${accountId}: ${event} ${encodedPayload} Delay: ${delta}ms`);
- output(event, encodedPayload);
- };
-
- // Only messages that may require filtering are statuses, since notifications
- // are already personalized and deletes do not matter
- if (!needsFiltering || event !== 'update') {
- transmit();
+ // Streaming only needs to apply filtering to some channels and only to
+ // some events. This is because majority of the filtering happens on the
+ // Ruby on Rails side when producing the event for streaming.
+ //
+ // The only events that require filtering from the streaming server are
+ // `update` and `status.update`, all other events are transmitted to the
+ // client as soon as they're received (pass-through).
+ //
+ // The channels that need filtering are determined in the function
+ // `channelNameToIds` defined below:
+ if (!needsFiltering || (event !== 'update' && event !== 'status.update')) {
+ transmit(event, payload);
return;
}
- const unpackedPayload = payload;
- const targetAccountIds = [unpackedPayload.account.id].concat(unpackedPayload.mentions.map(item => item.id));
- const accountDomain = unpackedPayload.account.acct.split('@')[1];
+ // The rest of the logic from here on in this function is to handle
+ // filtering of statuses:
- if (Array.isArray(req.chosenLanguages) && unpackedPayload.language !== null && req.chosenLanguages.indexOf(unpackedPayload.language) === -1) {
- log.silly(req.requestId, `Message ${unpackedPayload.id} filtered by language (${unpackedPayload.language})`);
+ // Filter based on language:
+ if (Array.isArray(req.chosenLanguages) && payload.language !== null && req.chosenLanguages.indexOf(payload.language) === -1) {
+ log.silly(req.requestId, `Message ${payload.id} filtered by language (${payload.language})`);
return;
}
// When the account is not logged in, it is not necessary to confirm the block or mute
if (!req.accountId) {
- transmit();
+ transmit(event, payload);
return;
}
- pgPool.connect((err, client, done) => {
+ // Filter based on domain blocks, blocks, mutes, or custom filters:
+ const targetAccountIds = [payload.account.id].concat(payload.mentions.map(item => item.id));
+ const accountDomain = payload.account.acct.split('@')[1];
+
+ // TODO: Move this logic out of the message handling loop
+ pgPool.connect((err, client, releasePgConnection) => {
if (err) {
log.error(err);
return;
@@ -672,40 +703,57 @@ const startWorker = async (workerId) => {
SELECT 1
FROM mutes
WHERE account_id = $1
- AND target_account_id IN (${placeholders(targetAccountIds, 2)})`, [req.accountId, unpackedPayload.account.id].concat(targetAccountIds)),
+ AND target_account_id IN (${placeholders(targetAccountIds, 2)})`, [req.accountId, payload.account.id].concat(targetAccountIds)),
];
if (accountDomain) {
queries.push(client.query('SELECT 1 FROM account_domain_blocks WHERE account_id = $1 AND domain = $2', [req.accountId, accountDomain]));
}
- if (!unpackedPayload.filtered && !req.cachedFilters) {
+ if (!payload.filtered && !req.cachedFilters) {
queries.push(client.query('SELECT filter.id AS id, filter.phrase AS title, filter.context AS context, filter.expires_at AS expires_at, filter.action AS filter_action, keyword.keyword AS keyword, keyword.whole_word AS whole_word FROM custom_filter_keywords keyword JOIN custom_filters filter ON keyword.custom_filter_id = filter.id WHERE filter.account_id = $1 AND (filter.expires_at IS NULL OR filter.expires_at > NOW())', [req.accountId]));
}
Promise.all(queries).then(values => {
- done();
+ releasePgConnection();
+ // Handling blocks & mutes and domain blocks: If one of those applies,
+ // then we don't transmit the payload of the event to the client
if (values[0].rows.length > 0 || (accountDomain && values[1].rows.length > 0)) {
return;
}
- if (!unpackedPayload.filtered && !req.cachedFilters) {
+ // If the payload already contains the `filtered` property, it means
+ // that filtering has been applied on the ruby on rails side, as
+ // such, we don't need to construct or apply the filters in streaming:
+ if (Object.prototype.hasOwnProperty.call(payload, "filtered")) {
+ transmit(event, payload);
+ return;
+ }
+
+ // Handling for constructing the custom filters and caching them on the request
+ // TODO: Move this logic out of the message handling lifecycle
+ if (!req.cachedFilters) {
const filterRows = values[accountDomain ? 2 : 1].rows;
- req.cachedFilters = filterRows.reduce((cache, row) => {
- if (cache[row.id]) {
- cache[row.id].keywords.push([row.keyword, row.whole_word]);
+ req.cachedFilters = filterRows.reduce((cache, filter) => {
+ if (cache[filter.id]) {
+ cache[filter.id].keywords.push([filter.keyword, filter.whole_word]);
} else {
- cache[row.id] = {
- keywords: [[row.keyword, row.whole_word]],
- expires_at: row.expires_at,
- repr: {
- id: row.id,
- title: row.title,
- context: row.context,
- expires_at: row.expires_at,
- filter_action: ['warn', 'hide'][row.filter_action],
+ cache[filter.id] = {
+ keywords: [[filter.keyword, filter.whole_word]],
+ expires_at: filter.expires_at,
+ filter: {
+ id: filter.id,
+ title: filter.title,
+ context: filter.context,
+ expires_at: filter.expires_at,
+ // filter.filter_action is the value from the
+ // custom_filters.action database column, it is an integer
+ // representing a value in an enum defined by Ruby on Rails:
+ //
+ // enum { warn: 0, hide: 1 }
+ filter_action: ['warn', 'hide'][filter.filter_action],
},
};
}
@@ -713,6 +761,10 @@ const startWorker = async (workerId) => {
return cache;
}, {});
+ // Construct the regular expressions for the custom filters: This
+ // needs to be done in a separate loop as the database returns one
+ // filterRow per keyword, so we need all the keywords before
+ // constructing the regular expression
Object.keys(req.cachedFilters).forEach((key) => {
req.cachedFilters[key].regexp = new RegExp(req.cachedFilters[key].keywords.map(([keyword, whole_word]) => {
let expr = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -732,31 +784,58 @@ const startWorker = async (workerId) => {
});
}
- // Check filters
- if (req.cachedFilters && !unpackedPayload.filtered) {
- const status = unpackedPayload;
- const searchContent = ([status.spoiler_text || '', status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/
/g, '\n').replace(/<\/p>/g, '\n\n');
- const searchIndex = JSDOM.fragment(searchContent).textContent;
+ // Apply cachedFilters against the payload, constructing a
+ // `filter_results` array of FilterResult entities
+ if (req.cachedFilters) {
+ const status = payload;
+ // TODO: Calculate searchableContent in Ruby on Rails:
+ const searchableContent = ([status.spoiler_text || '', status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/
/g, '\n').replace(/<\/p>
/g, '\n\n');
+ const searchableTextContent = JSDOM.fragment(searchableContent).textContent;
const now = new Date();
- payload.filtered = [];
- Object.values(req.cachedFilters).forEach((cachedFilter) => {
- if ((cachedFilter.expires_at === null || cachedFilter.expires_at > now)) {
- const keyword_matches = searchIndex.match(cachedFilter.regexp);
- if (keyword_matches) {
- payload.filtered.push({
- filter: cachedFilter.repr,
- keyword_matches,
- });
- }
+ const filter_results = Object.values(req.cachedFilters).reduce((results, cachedFilter) => {
+ // Check the filter hasn't expired before applying:
+ if (cachedFilter.expires_at !== null && cachedFilter.expires_at < now) {
+ return results;
}
- });
- }
- transmit();
+ // Just in-case JSDOM fails to find textContent in searchableContent
+ if (!searchableTextContent) {
+ return results;
+ }
+
+ const keyword_matches = searchableTextContent.match(cachedFilter.regexp);
+ if (keyword_matches) {
+ // results is an Array of FilterResult; status_matches is always
+ // null as we only are only applying the keyword-based custom
+ // filters, not the status-based custom filters.
+ // https://docs.joinmastodon.org/entities/FilterResult/
+ results.push({
+ filter: cachedFilter.filter,
+ keyword_matches,
+ status_matches: null
+ });
+ }
+
+ return results;
+ }, []);
+
+ // Send the payload + the FilterResults as the `filtered` property
+ // to the streaming connection. To reach this code, the `event` must
+ // have been either `update` or `status.update`, meaning the
+ // `payload` is a Status entity, which has a `filtered` property:
+ //
+ // filtered: https://docs.joinmastodon.org/entities/Status/#filtered
+ transmit(event, {
+ ...payload,
+ filtered: filter_results
+ });
+ } else {
+ transmit(event, payload);
+ }
}).catch(err => {
+ releasePgConnection();
log.error(err);
- done();
});
});
};
@@ -765,7 +844,7 @@ const startWorker = async (workerId) => {
subscribe(`${redisPrefix}${id}`, listener);
});
- if (attachCloseHandler) {
+ if (typeof attachCloseHandler === 'function') {
attachCloseHandler(ids.map(id => `${redisPrefix}${id}`), listener);
}
@@ -802,12 +881,13 @@ const startWorker = async (workerId) => {
/**
* @param {any} req
* @param {function(): void} [closeHandler]
- * @return {function(string[]): void}
+ * @returns {function(string[], SubscriptionListener): void}
*/
- const streamHttpEnd = (req, closeHandler = undefined) => (ids) => {
+
+ const streamHttpEnd = (req, closeHandler = undefined) => (ids, listener) => {
req.on('close', () => {
ids.forEach(id => {
- unsubscribe(id);
+ unsubscribe(id, listener);
});
if (closeHandler) {
@@ -1067,7 +1147,7 @@ const startWorker = async (workerId) => {
* @typedef WebSocketSession
* @property {any} socket
* @property {any} request
- * @property {Object.} subscriptions
+ * @property {Object.} subscriptions
*/
/**
@@ -1207,8 +1287,15 @@ const startWorker = async (workerId) => {
ws.on('close', onEnd);
ws.on('error', onEnd);
- ws.on('message', data => {
- const json = parseJSON(data, session.request);
+ ws.on('message', (data, isBinary) => {
+ if (isBinary) {
+ log.warn('socket', 'Received binary data, closing connection');
+ ws.close(1003, 'The mastodon streaming server does not support binary messages');
+ return;
+ }
+ const message = data.toString('utf8');
+
+ const json = parseJSON(message, session.request);
if (!json) return;