diff --git a/CHANGELOG.md b/CHANGELOG.md index b1aebda19..5ab9eb10d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,14 +3,6 @@ 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 diff --git a/Containerfile b/Containerfile deleted file mode 100644 index cac82ae2a..000000000 --- a/Containerfile +++ /dev/null @@ -1,99 +0,0 @@ -# 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/app/javascript/styles/elephant-contrast.scss b/app/javascript/styles/elephant-contrast.scss deleted file mode 100644 index 5285e07fa..000000000 --- a/app/javascript/styles/elephant-contrast.scss +++ /dev/null @@ -1,6 +0,0 @@ -@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 deleted file mode 100644 index f72d3b506..000000000 --- a/app/javascript/styles/elephant-light.scss +++ /dev/null @@ -1,6 +0,0 @@ -@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 deleted file mode 100644 index d416c9842..000000000 --- a/app/javascript/styles/elephant.scss +++ /dev/null @@ -1,4 +0,0 @@ -@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 deleted file mode 100644 index 1895c6389..000000000 --- a/app/javascript/styles/elephant/layout-multiple-columns.scss +++ /dev/null @@ -1,4228 +0,0 @@ -/* 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 deleted file mode 100644 index 4f67f28b9..000000000 --- a/app/javascript/styles/elephant/layout-single-column.scss +++ /dev/null @@ -1,4191 +0,0 @@ -/* 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 deleted file mode 100644 index 6e04d6022..000000000 --- a/app/javascript/styles/gh/elephant-mods.scss +++ /dev/null @@ -1,85 +0,0 @@ -.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/request.rb b/app/lib/request.rb index 660dc0fa7..9c02410a5 100644 --- a/app/lib/request.rb +++ b/app/lib/request.rb @@ -285,11 +285,11 @@ class Request end until socks.empty? - _, available_socks, = IO.select(nil, socks, nil, Request::TIMEOUT[:connect_timeout]) + _, available_socks, = IO.select(nil, socks, nil, Request::TIMEOUT[:connect]) if available_socks.nil? socks.each(&:close) - raise HTTP::TimeoutError, "Connect timed out after #{Request::TIMEOUT[:connect_timeout]} seconds" + raise HTTP::TimeoutError, "Connect timed out after #{Request::TIMEOUT[:connect]} seconds" end available_socks.each do |sock| diff --git a/config/locales/en.yml b/config/locales/en.yml index fe29cf95e..ce20d5d1d 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1597,9 +1597,6 @@ 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/themes.yml b/config/themes.yml index 6b1d5db8b..9c21c9459 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,6 +1,3 @@ default: styles/application.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 +mastodon-light: styles/mastodon-light.scss diff --git a/docker-compose.yml b/docker-compose.yml index ae6aefb37..e3fa9ae1e 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -56,7 +56,7 @@ services: web: build: . - image: ghcr.io/mastodon/mastodon:v4.1.6 + image: ghcr.io/mastodon/mastodon:v4.1.5 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:v4.1.6 + image: ghcr.io/mastodon/mastodon:v4.1.5 restart: always env_file: .env.production command: node ./streaming @@ -95,7 +95,7 @@ services: sidekiq: build: . - image: ghcr.io/mastodon/mastodon:v4.1.6 + image: ghcr.io/mastodon/mastodon:v4.1.5 restart: always env_file: .env.production command: bundle exec sidekiq diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb index 9d1e4d58e..8af6c6f67 100644 --- a/lib/mastodon/version.rb +++ b/lib/mastodon/version.rb @@ -13,7 +13,7 @@ module Mastodon end def patch - 6 + 5 end def flags @@ -21,7 +21,7 @@ module Mastodon end def suffix - '-gh23240' + '-gh23202' end def to_a diff --git a/streaming/index.js b/streaming/index.js index 3fea71f94..ffb570c5b 100644 --- a/streaming/index.js +++ b/streaming/index.js @@ -226,15 +226,9 @@ const startWorker = async (workerId) => { callbacks.forEach(callback => callback(json)); }; - /** - * @callback SubscriptionListener - * @param {ReturnType} json of the message - * @returns void - */ - /** * @param {string} channel - * @param {SubscriptionListener} callback + * @param {function(string): void} callback */ const subscribe = (channel, callback) => { log.silly(`Adding listener for ${channel}`); @@ -251,7 +245,7 @@ const startWorker = async (workerId) => { /** * @param {string} channel - * @param {SubscriptionListener} callback + * @param {function(Object): void} callback */ const unsubscribe = (channel, callback) => { log.silly(`Removing listener for ${channel}`); @@ -629,66 +623,51 @@ const startWorker = async (workerId) => { * @param {string[]} ids * @param {any} req * @param {function(string, string): void} output - * @param {undefined | function(string[], SubscriptionListener): void} attachCloseHandler + * @param {function(string[], function(string): void): void} attachCloseHandler * @param {boolean=} needsFiltering - * @returns {SubscriptionListener} + * @returns {function(object): void} */ 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} */ + // Currently message is of type string, soon it'll be Record const listener = message => { - const { event, payload } = message; + const { event, payload, queued_at } = message; - // 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); + 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(); return; } - // The rest of the logic from here on in this function is to handle - // filtering of statuses: + const unpackedPayload = payload; + const targetAccountIds = [unpackedPayload.account.id].concat(unpackedPayload.mentions.map(item => item.id)); + const accountDomain = unpackedPayload.account.acct.split('@')[1]; - // 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})`); + 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})`); return; } // When the account is not logged in, it is not necessary to confirm the block or mute if (!req.accountId) { - transmit(event, payload); + transmit(); return; } - // 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) => { + pgPool.connect((err, client, done) => { if (err) { log.error(err); return; @@ -703,57 +682,40 @@ const startWorker = async (workerId) => { SELECT 1 FROM mutes WHERE account_id = $1 - AND target_account_id IN (${placeholders(targetAccountIds, 2)})`, [req.accountId, payload.account.id].concat(targetAccountIds)), + AND target_account_id IN (${placeholders(targetAccountIds, 2)})`, [req.accountId, unpackedPayload.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 (!payload.filtered && !req.cachedFilters) { + if (!unpackedPayload.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 => { - releasePgConnection(); + done(); - // 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 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) { + if (!unpackedPayload.filtered && !req.cachedFilters) { const filterRows = values[accountDomain ? 2 : 1].rows; - req.cachedFilters = filterRows.reduce((cache, filter) => { - if (cache[filter.id]) { - cache[filter.id].keywords.push([filter.keyword, filter.whole_word]); + req.cachedFilters = filterRows.reduce((cache, row) => { + if (cache[row.id]) { + cache[row.id].keywords.push([row.keyword, row.whole_word]); } else { - 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], + 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], }, }; } @@ -761,10 +723,6 @@ 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, '\\$&'); @@ -784,58 +742,31 @@ const startWorker = async (workerId) => { }); } - // 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; + // 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; const now = new Date(); - 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; + 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, + }); + } } - - // 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); } + + transmit(); }).catch(err => { - releasePgConnection(); log.error(err); + done(); }); }); }; @@ -844,7 +775,7 @@ const startWorker = async (workerId) => { subscribe(`${redisPrefix}${id}`, listener); }); - if (typeof attachCloseHandler === 'function') { + if (attachCloseHandler) { attachCloseHandler(ids.map(id => `${redisPrefix}${id}`), listener); } @@ -881,13 +812,12 @@ const startWorker = async (workerId) => { /** * @param {any} req * @param {function(): void} [closeHandler] - * @returns {function(string[], SubscriptionListener): void} + * @return {function(string[]): void} */ - - const streamHttpEnd = (req, closeHandler = undefined) => (ids, listener) => { + const streamHttpEnd = (req, closeHandler = undefined) => (ids) => { req.on('close', () => { ids.forEach(id => { - unsubscribe(id, listener); + unsubscribe(id); }); if (closeHandler) { @@ -1147,7 +1077,7 @@ const startWorker = async (workerId) => { * @typedef WebSocketSession * @property {any} socket * @property {any} request - * @property {Object.} subscriptions + * @property {Object.} subscriptions */ /**