diff --git a/CHANGELOG.md b/CHANGELOG.md index 74b5541..227982a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ### 1.5.7-nightly: 2023-07-02 * Add support for Mastodon 4.1.2-nightly-20230702 +* Fix lists position on mobile ### 1.5.7: 2023-06-09 diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css index 838597e..03d190c 100644 --- a/layout-multiple-columns.css +++ b/layout-multiple-columns.css @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 1.5.7 */ + 1.5.7-mastodon-4.1.2-nightly */ /* CSS variables */ :root { @@ -73,7 +73,6 @@ --size-icon-notification: 30px; --width-main-panel: 600px; --width-side-panel: 260px; - --width-column: 380px; /* Misc */ --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3); @@ -141,7 +140,7 @@ } /* High Contrast theme */ -body.theme-contrast.layout-multiple-columns { +body.theme-contrast.layout-single-column { --color-dim: #b8b3c0; /* Icons */ @@ -161,7 +160,7 @@ body.theme-contrast.layout-multiple-columns { } /* Light theme */ -body.theme-mastodon-light.layout-multiple-columns { +body.theme-mastodon-light.layout-single-column { --color-bg: #fff; --color-fg: #000; --color-border: #e6e1ed; @@ -256,14 +255,14 @@ body.theme-mastodon-light.layout-multiple-columns { } /* Hide scrollbar on mobile, since we can't pick the handle anyway */ - .layout-multiple-columns::-webkit-scrollbar { + .layout-single-column::-webkit-scrollbar { display: none; } } /* Search popout offset */ -.layout-multiple-columns .search__popout, -.layout-multiple-columns .search-popout { +.layout-single-column .search__popout, +.layout-single-column .search-popout { left: calc(30px / 2); /* It's inlined so we have to use !important */ @@ -276,28 +275,35 @@ body.theme-mastodon-light.layout-multiple-columns { } body.embed, -body.layout-multiple-columns { +body.layout-single-column { background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-stack); } -.layout-multiple-columns .ui { +.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-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 { +.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); } /* Logo */ -.layout-multiple-columns .ui__header__logo, -.layout-multiple-columns .column-link.column-link--logo { +.layout-single-column .ui__header__logo, +.layout-single-column .column-link.column-link--logo { background-image: 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'); background-position: center; background-repeat: no-repeat; @@ -307,20 +313,20 @@ body.layout-multiple-columns { width: 50px; } -.layout-multiple-columns .ui__header__logo svg { +.layout-single-column .ui__header__logo svg { display: none; } /* Things that should have default font-size */ -.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-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); } /* Modal overlay */ -.layout-multiple-columns .modal-root__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; @@ -328,8 +334,8 @@ body.layout-multiple-columns { color: var(--color-light-text) !important; } -.layout-multiple-columns .modal-root__modal .display-name strong, -.layout-multiple-columns .modal-root__modal .status__content { +.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 */ @@ -337,19 +343,19 @@ body.layout-multiple-columns { } /* Hide footer buttons in modals */ -.layout-multiple-columns .media-modal__overlay .picture-in-picture__footer { +.layout-single-column .media-modal__overlay .picture-in-picture__footer { display: none; } /* Report modal */ -.layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text { +.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text { display: grid; gap: 6px; } /* Modal buttons */ -.layout-multiple-columns .media-modal__navigation button, -.layout-multiple-columns .image-loader button { +.layout-single-column .media-modal__navigation button, +.layout-single-column .image-loader button { align-items: center; border-radius: 50%; /* It's inlined so we have to use !important */ @@ -371,73 +377,62 @@ body.layout-multiple-columns { width: 36px !important; } -.layout-multiple-columns .media-modal__navigation button { +.layout-single-column .media-modal__navigation button { /* stylelint-disable-next-line */ top: 5px !important; } -.layout-multiple-columns .media-modal__navigation .fa-times::before { +.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-multiple-columns .list-editor input.setting-text, -.layout-multiple-columns .list-adder input.setting-text { +.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-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 { +.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-multiple-columns .list-editor__search { +.layout-single-column .list-editor__search { padding: 15px; } -.layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html { +.layout-single-column .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 { +.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-multiple-columns .list-editor .drawer__inner.backdrop { +.layout-single-column .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 { +.layout-single-column .list-editor__search .search__icon .fa { margin: 15px; } -.layout-multiple-columns .list-editor .list__display-name, -.layout-multiple-columns .list-adder .list__display-name { +.layout-single-column .list-editor .list__display-name, +.layout-single-column .list-adder .list__display-name { display: flex; gap: var(--gap-default); } -.layout-multiple-columns .list__display-name .fa-list-ul::before { +.layout-single-column .list__display-name .fa-list-ul::before { top: -2px; } @@ -447,29 +442,29 @@ body.layout-multiple-columns { @source https://github.com/mastodon/mastodon/issues/21874#issuecomment-1332556018 */ -.layout-multiple-columns a.status-card, -.layout-multiple-columns a.status-card.compact { +.layout-single-column a.status-card, +.layout-single-column a.status-card.compact { background-color: var(--color-bg); border-radius: 10px; display: block; } -.layout-multiple-columns .fa-file-text::before { +.layout-single-column .fa-file-text::before { content: ""; } -.layout-multiple-columns a.status-card .status-card__image-image, -.layout-multiple-columns a.status-card .status-card__image-image.compact { +.layout-single-column a.status-card .status-card__image-image, +.layout-single-column a.status-card .status-card__image-image.compact { border-radius: 0; } -.layout-multiple-columns a.status-card .status-card__content, -.layout-multiple-columns a.status-card.compact .status-card__content { +.layout-single-column a.status-card .status-card__content, +.layout-single-column a.status-card.compact .status-card__content { padding: 15px; } -.layout-multiple-columns a.status-card .status-card__title, -.layout-multiple-columns a.status-card.compact .status-card__title { +.layout-single-column a.status-card .status-card__title, +.layout-single-column a.status-card.compact .status-card__title { color: var(--color-fg); font-size: 18px; font-weight: 400; @@ -487,176 +482,149 @@ a.status-card.compact .status-card__host { } /* Announcements */ -.layout-multiple-columns .announcements__pagination .fa, -.layout-multiple-columns .announcements__pagination { +.layout-single-column .announcements__pagination .fa, +.layout-single-column .announcements__pagination { color: var(--color-dim); } -.layout-multiple-columns .announcements__pagination .icon-button:hover i { +.layout-single-column .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 { +.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); } -/* 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 { +.layout-single-column .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 { +.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-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 { +.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-multiple-columns .compose-form .compose-form__warning { +.layout-single-column .compose-form .compose-form__warning { background-color: var(--color-light-purple); color: var(--color-bg); } /* 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 { +.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-multiple-columns .columns-area__panels__pane { +.layout-single-column .columns-area__panels__pane { order: 3; } -.layout-multiple-columns .columns-area__panels__main { +.layout-single-column .columns-area__panels__main { order: 2; } -.layout-multiple-columns .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { +.layout-single-column .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 { +.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-multiple-columns .columns-area__panels__pane--compositional { +.layout-single-column .columns-area__panels__pane--compositional { flex-grow: 1; height: 100vh; max-width: 350px; @@ -665,29 +633,29 @@ a.status-card.compact .status-card__host { top: 0; } -.layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner { +.layout-single-column .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, +.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner, .compose-panel { /* stylelint-disable-next-line */ width: 100% !important; } -.layout-multiple-columns .search { +.layout-single-column .search { margin-inline: 10px; } /* stylelint-disable-next-line */ @media (min-width: 1175px) { - .layout-multiple-columns .columns-area__panels__main { + .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-multiple-columns .navigation-panel { + .layout-single-column .navigation-panel { margin-right: -20px; /* stylelint-disable-next-line */ padding-left: 0 !important; @@ -695,195 +663,193 @@ a.status-card.compact .status-card__host { } } -.layout-multiple-columns .emoji-mart-anchor-bar, -.layout-multiple-columns .column-link.column-link--logo svg { +.layout-single-column .emoji-mart-anchor-bar, +.layout-single-column .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, +.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-multiple-columns .status__content a, -.layout-multiple-columns .column-link--transparent.active, -.layout-multiple-columns .status__content__read-more-button { +.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 etc. */ -.layout-multiple-columns .search-results__header, -.layout-multiple-columns .drawer__inner, -.layout-multiple-columns .react-toggle .react-toggle-track { +/* Toggles */ +.layout-single-column .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 { +.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); } -.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 { +.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-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 { +.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-multiple-columns .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-multiple-columns .trends__item__sparkline path:last-child { +.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-multiple-columns .language-dropdown__dropdown__results__item:hover, -.layout-multiple-columns .language-dropdown__dropdown__results__item:focus, -.layout-multiple-columns .reply-indicator { +.layout-single-column .language-dropdown__dropdown__results__item:hover, +.layout-single-column .language-dropdown__dropdown__results__item:focus, +.layout-single-column .reply-indicator { background-color: var(--color-mud); color: var(--color-light-text); } /* Accented border colors */ -.layout-multiple-columns .notification.unread::before, -.layout-multiple-columns .status__wrapper.unread::before { +.layout-single-column .notification.unread::before, +.layout-single-column .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 { +.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-multiple-columns .notification:hover .notification__message { +.layout-single-column .notification:hover .notification__message { background-color: transparent; } /* Things like notification status update text that should be dim */ -.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-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 { color: var(--color-dim); } /* Dim backgrounds */ -.layout-multiple-columns .poll__chart { +.layout-single-column .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 { +.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-multiple-columns .navigation-bar, -.layout-multiple-columns .navigation-bar strong { +.layout-single-column .navigation-bar, +.layout-single-column .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 { +.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; @@ -894,88 +860,88 @@ body.embed .status__content a, 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 { +.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-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link, -.layout-multiple-columns .notification .status__content__spoiler-link { +.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-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 { +.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-multiple-columns .account .account__display-name, -.layout-multiple-columns .column-settings__section, -.layout-multiple-columns .setting-toggle__label { +.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-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, -.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 { +.layout-single-column .compose-form__poll-wrapper select, +.layout-single-column .actions-modal ul li:not(:empty) a, +.layout-single-column .report-dialog-modal .status__content, +.layout-single-column .report-dialog-modal .status__content p, +.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong, +.layout-single-column .report-dialog-modal__lead, +.layout-single-column .detailed-status__display-name strong, +.layout-single-column .dismissable-banner__message, +.layout-single-column .privacy-dropdown__option, +.layout-single-column .privacy-dropdown__option__content strong, +.layout-single-column .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-multiple-columns .muted .status__info *, -.layout-multiple-columns .muted .status__info .display-name * { +.layout-single-column .muted .status__info *, +.layout-single-column .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 { +.layout-single-column .status__info .display-name .display-name__account, +.layout-single-column .display-name__account { color: var(--color-dim); } /* Main panel column */ -.layout-multiple-columns .columns-area__panels__main > div { +.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-multiple-columns .status .status__info { +.layout-single-column .status .status__info { align-items: flex-start; gap: var(--gap-default); height: calc(var(--gap-default) * 2); @@ -985,20 +951,20 @@ body.embed .status__content a, } /* Display name */ -.layout-multiple-columns .status__info .status__display-name { +.layout-single-column .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 { +.layout-single-column .status__info .display-name { display: flex; gap: calc(var(--gap-default) / 2); } /* The separator dot */ -.layout-multiple-columns .status__info::before { +.layout-single-column .status__info::before { color: var(--color-dim); content: "ยท"; display: inline-block; @@ -1011,59 +977,60 @@ body.embed .status__content a, position: relative; } -.layout-multiple-columns .status__info .status__relative-time { +.layout-single-column .status__info .status__relative-time { height: unset; order: 3; } /* Visibility icon */ -.layout-multiple-columns .status .status__visibility-icon { +.layout-single-column .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, +.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-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, +.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-multiple-columns .detailed-status, -.layout-multiple-columns .detailed-status__action-bar, -.layout-multiple-columns .column > .scrollable { +.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-multiple-columns .status__avatar { +.layout-single-column .status__avatar { /* Need to override inline styles */ /* stylelint-disable-next-line */ height: var(--size-avatar) !important; @@ -1082,177 +1049,176 @@ body.embed .detailed-status, } /* 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 { +.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-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 { +.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-multiple-columns .column-header__wrapper.active { +.layout-single-column .column-header__wrapper.active { box-shadow: var(--active-header-box-shadow); } -.layout-multiple-columns .column-header__wrapper.active::before { +.layout-single-column .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 { +.layout-single-column .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form__buttons-wrapper { border: 0; } -.layout-multiple-columns article, -.layout-multiple-columns .status__prepend, -.layout-multiple-columns .notification__message, -.layout-multiple-columns .status { +.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-multiple-columns article:focus, -.layout-multiple-columns article:hover { +.layout-single-column article:focus, +.layout-single-column 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 { +.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-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 { +.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-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 { +.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-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 { +.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-multiple-columns .search__popout em, -.layout-multiple-columns .search-popout em { +.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-multiple-columns a.status-card .status-card__content, -.layout-multiple-columns a.status-card.compact .status-card__content { +.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-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 { +.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-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 { +.layout-single-column .status:not(.status--in-thread) .status__action-bar, +.layout-single-column .status:not(.status--in-thread) .attachment-list, +.layout-single-column .status:not(.status--in-thread) .status__content__read-more-button, +.layout-single-column .status:not(.status--in-thread) .status__content { 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 { +.layout-single-column .conversation .attachment-list, +.layout-single-column .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 { +[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-multiple-columns .reply-indicator .attachment-list { +.layout-single-column .reply-indicator .attachment-list { padding-left: 0; } -.layout-multiple-columns .status__action-bar button, -.layout-multiple-columns .detailed-status__action-bar button { +.layout-single-column .status__action-bar button, +.layout-single-column .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] { +.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-multiple-columns .status .audio-player, -.layout-multiple-columns .status .video-player, -.layout-multiple-columns .status .media-gallery { +.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-multiple-columns .status .status-card { +.layout-single-column .status .status-card { margin-left: calc(var(--size-avatar) + var(--gap-default)); } /* Detailed status update */ -.layout-multiple-columns .detailed-status .status__content { +.layout-single-column .detailed-status .status__content { font-size: var(--font-size-bigger); } body.embed .detailed-status__meta, -.layout-multiple-columns .detailed-status__meta { +.layout-single-column .detailed-status__meta { color: var(--color-dim); font-size: var(--font-size); } @@ -1263,21 +1229,21 @@ body.embed .detailed-status__meta { body.embed .detailed-status__reblogs, body.embed .detailed-status__favorites, -.layout-multiple-columns .detailed-status__favorites, -.layout-multiple-columns .detailed-status__reblogs { +.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-multiple-columns .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-multiple-columns .detailed-status__reblogs { +.layout-single-column .detailed-status__reblogs { font-size: var(--font-size); } @@ -1288,14 +1254,14 @@ body.embed .detailed-status__favorites { } body.embed .detailed-status__reblogs::after, -.layout-multiple-columns .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-multiple-columns .detailed-status__favorites::after { +.layout-single-column .detailed-status__favorites::after { color: var(--color-dim); content: 'Favourites'; font-weight: 500; @@ -1303,32 +1269,32 @@ body.embed .detailed-status__favorites::after, 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 { +.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-multiple-columns .icon-button { +.layout-single-column .icon-button { color: var(--color-dim); } -.layout-multiple-columns .icon-button:hover { +.layout-single-column .icon-button:hover { color: var(--color-accent); } /* Other general buttons */ -.layout-multiple-columns .column-header__button.active:active, +.layout-single-column .column-header__button.active:active, .column-header__button.active:focus, -.layout-multiple-columns .column-header__button.active:hover { +.layout-single-column .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 { +.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); @@ -1336,27 +1302,27 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } @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 { + .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-multiple-columns .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) { +.layout-single-column .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 { +.layout-single-column .column-header { font-size: var(--font-size-heading); font-weight: var(--font-weight-bold); } /* Column sub-headers */ -.layout-multiple-columns .column-subheading { +.layout-single-column .column-subheading { background-color: transparent; color: var(--color-fg); font-size: var(--font-size-bigger); @@ -1365,59 +1331,59 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* "Your lists" view */ -.layout-multiple-columns .column-subheading ~ article { +.layout-single-column .column-subheading ~ article { padding-left: var(--gap-default); padding-right: var(--gap-default); } /* Notifications */ -.layout-multiple-columns .notification__message { +.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-multiple-columns .notification__message i { +.layout-single-column .notification__message i { font-size: var(--size-icon-notification); } /* Make sure notification user is clickable */ -.layout-multiple-columns .notification__display-name { +.layout-single-column .notification__display-name { position: relative; z-index: 99; } /* Hack to display notification message title on one line */ -.layout-multiple-columns .notification__message > span { +.layout-single-column .notification__message > span { display: block; margin-top: calc(var(--size-avatar-small) + 6px); overflow: visible; } -.layout-multiple-columns .notification__message > span > span { +.layout-single-column .notification__message > span > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.layout-multiple-columns .notification__message > div { +.layout-single-column .notification__message > div { display: flex; justify-content: flex-end; } -.layout-multiple-columns .muted .status__avatar { +.layout-single-column .muted .status__avatar { opacity: 1; } -.layout-multiple-columns .notification .account__avatar-overlay-base { +.layout-single-column .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 { +.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; @@ -1430,126 +1396,126 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, width: var(--size-avatar-small) !important; } -.layout-multiple-columns .notification .status__info .status__display-name { +.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-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 { +.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-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 { +.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-multiple-columns .notification.notification-admin-report .account__avatar-overlay-overlay { +.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-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 { +.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-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 { +.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-multiple-columns .notification.notification-admin-report .account__avatar-overlay { +.layout-single-column .notification.notification-admin-report .account__avatar-overlay { margin-top: 0; top: 0; } -.layout-multiple-columns .notification.notification-status .notification__message > span { +.layout-single-column .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 { +.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-multiple-columns .notification.notification-reblog .notification__message > span { +.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-multiple-columns .notification.notification-follow .notification__message > span { +.layout-single-column .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 { +.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-multiple-columns .notification.notification-follow .account__avatar-wrapper { +.layout-single-column .notification.notification-follow .account__avatar-wrapper { top: 6px; } /* Minimal fav notification fix */ -.layout-multiple-columns .notification.notification-favourite .notification__message > span { +.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-multiple-columns .notification .status__content:has(.status__content__text:empty) + .attachment-list { +.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-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 { +.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-multiple-columns .notification.notification.notification-admin-sign-up .notification__message + .account, -.layout-multiple-columns .notification.notification-follow .notification__message + .account { +.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-multiple-columns .status__prepend { +.layout-single-column .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 { +.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-multiple-columns .notification-admin-report .notification__report { +.layout-single-column .notification-admin-report .notification__report { border-color: var(--color-border); display: flex; font-size: var(--font-size); @@ -1559,37 +1525,37 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, padding-left: calc(var(--size-avatar) + var(--gap-default)); } -.layout-multiple-columns .notification-admin-report .notification__report__details { +.layout-single-column .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 { +.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-multiple-columns .notification-admin-report .notification__message > span { +.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-multiple-columns .notification .status__relative-time, -.layout-multiple-columns .notification .status__info::before { +.layout-single-column .notification .status__relative-time, +.layout-single-column .notification .status__info::before { display: none; } /* Right side panel */ -.layout-multiple-columns .navigation-panel { +.layout-single-column .navigation-panel { box-sizing: border-box; margin-top: 0; overflow-y: auto; padding: 10px; } -.layout-multiple-columns .navigation-panel hr { +.layout-single-column .navigation-panel hr { /* Hide but reserve space */ visibility: hidden; } @@ -1599,37 +1565,28 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, height: 100%; } -.layout-multiple-columns .navigation-panel__logo hr { +.layout-single-column .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 { +.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-multiple-columns .navigation-panel::-webkit-scrollbar { +.layout-single-column .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 { +.layout-single-column .column-link { align-items: center; color: var(--color-light-text); - display: flex; - font-size: var(--font-size); + display: inline-flex; + font-size: var(--font-size-heading); gap: var(--gap-default); overflow: visible; padding-bottom: calc(var(--gap-default) + 4px); @@ -1639,65 +1596,83 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, transition: all 100ms; } -[dir="rtl"] .layout-multiple-columns .column-link { +[dir="rtl"] .layout-single-column .column-link { margin-left: auto; margin-right: 0; } -.layout-multiple-columns .column-link > i { +.layout-single-column .column-link > i { min-width: 1.3em; } -.layout-multiple-columns .column-link > span { +.layout-single-column .column-link > span { position: relative; } -.layout-multiple-columns .account__section-headline a { +.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-multiple-columns .notification__filter-bar button:hover, -.layout-multiple-columns .account__section-headline a:hover { +.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-multiple-columns .notification__filter-bar button.active:hover, - .layout-multiple-columns .account__section-headline a.active:hover { + .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-multiple-columns .notification__filter-bar { +.layout-single-column .notification__filter-bar { border-bottom: 1px solid var(--color-border); border-left: 0; border-right: 0; } -.layout-multiple-columns .column-link__icon { +.layout-single-column .column-link__icon { margin: 0; } /* Notification badge on side panel */ -.layout-multiple-columns .icon-with-badge__badge { +.layout-single-column .icon-with-badge__badge { border-radius: 50%; font-size: 11px; left: 12px; top: -6px; } -.layout-multiple-columns .column-link--transparent.active { +.layout-single-column .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 { +.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; @@ -1708,141 +1683,141 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, 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 { +.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-multiple-columns .notification.notification-reblog .status__action-bar, -.layout-multiple-columns .notification.notification-favourite .status__action-bar { +.layout-single-column .notification.notification-reblog .status__action-bar, +.layout-single-column .notification.notification-favourite .status__action-bar { display: none; } -.layout-multiple-columns .search .search__icon .fa-search::before { +.layout-single-column .search .search__icon .fa-search::before { content: ''; } -.layout-multiple-columns .status__prepend .fa-retweet::before { +.layout-single-column .status__prepend .fa-retweet::before { content: var(--icon-boost-status-prepend); position: relative; top: 1px; } -.layout-multiple-columns .notification .notification__message .fa { +.layout-single-column .notification .notification__message .fa { font-size: 27px; margin-right: 4px; max-width: 30px; } -.layout-multiple-columns .notification .fa:not(.fa-link)::before { +.layout-single-column .notification .fa:not(.fa-link)::before { font-size: 22px; height: 27px; } -.layout-multiple-columns .notification .fa.fa-user-plus:not(.fa-link)::before { +.layout-single-column .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 { +.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-multiple-columns .notification .fa.fa-flag::before, -.layout-multiple-columns .notification .fa.fa-tasks:not(.fa-link)::before { +.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-multiple-columns .notification .fa.fa-home:not(.fa-link)::before { +.layout-single-column .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 { +.layout-single-column .account__relationship .icon-button, +.layout-single-column .notification .account__relationship .icon-button { background-color: transparent; } -.layout-multiple-columns .notification .account__relationship .fa::before { +.layout-single-column .notification .account__relationship .fa::before { /* stylelint-disable-next-line */ color: var(--color-dim); font-size: 20px; } -.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 { +.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-multiple-columns .explore__search-results .icon-button.active:hover .fa::before, -.layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::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-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 { +.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-multiple-columns .notification .account__relationship { +.layout-single-column .notification .account__relationship { border-radius: 50%; height: 24px; transform: translateY(-4px); width: 24px; } -.layout-multiple-columns .notification .account__relationship:hover { +.layout-single-column .notification .account__relationship:hover { background-color: rgba(96, 105, 132, .15); } /* Emoji-mart search input */ -.layout-multiple-columns .emoji-mart-search-icon svg { +.layout-single-column .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 { +.layout-single-column .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg { fill: var(--color-accent); } -.layout-multiple-columns .emoji-mart-search > input { +.layout-single-column .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 { +.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-multiple-columns .report-dialog-modal__textarea, -.layout-multiple-columns .report-dialog-modal__textarea:focus, -.layout-multiple-columns .emoji-mart-search > input:focus { +.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-multiple-columns .emoji-mart-search-icon:disabled { +.layout-single-column .emoji-mart-search-icon:disabled { opacity: 1; } /* Search */ -.layout-multiple-columns .search .search__icon .fa-search { +.layout-single-column .search .search__icon .fa-search { background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b"%3E%3Cg%3E%3Cpath d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); background-position: center; background-repeat: no-repeat; @@ -1853,8 +1828,8 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, width: 24px; } -.layout-multiple-columns input.setting-text, -.layout-multiple-columns .search__input { +.layout-single-column input.setting-text, +.layout-single-column .search__input { background-color: var(--color-mud); border-color: var(--color-mud); border-radius: 32px; @@ -1865,38 +1840,38 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Input texts */ -.layout-multiple-columns .poll__option input[type="text"], -.layout-multiple-columns input.setting-text:focus, -.layout-multiple-columns .search__input:focus { +.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-multiple-columns .poll__option input[type="text"] { +.layout-single-column .poll__option input[type="text"] { background-color: transparent; border-color: var(--color-border); } -.layout-multiple-columns .poll__option input[type="text"]:focus { +.layout-single-column .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 { +.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-multiple-columns .getting-started__trends h4, -.layout-multiple-columns .account__header__bar { +.layout-single-column .getting-started__trends h4, +.layout-single-column .account__header__bar { border-color: var(--color-border); } -.layout-multiple-columns .account__header__bio .account__header__fields { +.layout-single-column .account__header__bio .account__header__fields { background-color: transparent; color: var(--color-dim); display: flex; @@ -1906,38 +1881,38 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Hide label */ -.layout-multiple-columns .account__header__bio .account__header__fields dt { +.layout-single-column .account__header__bio .account__header__fields dt { display: none; } /* Joined label */ -.layout-multiple-columns .account__header__bio .account__header__fields dt:not([title]) { +.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-multiple-columns h4, -.layout-multiple-columns .search__popout h4, -.layout-multiple-columns .search-popout h4, -.layout-multiple-columns .server-banner h4 { +.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-multiple-columns .account__header__bio .account__header__fields dt:not([title])::before { +.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-multiple-columns .account__header__bio .account__header__fields dd, -.layout-multiple-columns .account__header__bio .account__header__fields dt { +.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-multiple-columns .account__header__bio .account__header__fields dl { +.layout-single-column .account__header__bio .account__header__fields dl { background-color: transparent; border: 0; color: var(--color-dim); @@ -1948,7 +1923,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, padding: 0; } -.layout-multiple-columns .getting-started__trends h4 { +.layout-single-column .getting-started__trends h4 { border: 0; font-size: var(--font-size-heading); font-weight: var(--font-weight-bold); @@ -1957,57 +1932,51 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, text-transform: unset; } -.layout-multiple-columns .getting-started__trends { +.layout-single-column .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 { +.layout-single-column .trends__item__name a { font-size: var(--font-size); } -.layout-multiple-columns .trends__item__name { +.layout-single-column .trends__item__name { display: grid; gap: 4px; } -.layout-multiple-columns .account__header__image { +.layout-single-column .account__header__image { height: 200px; } -.layout-multiple-columns .account__header__bar .avatar .account__avatar { +.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: 90px !important; + height: 133.5px !important; /* It's inlined so we have to use !important */ /* stylelint-disable-next-line */ - width: 90px !important; + width: 133.5px !important; } -.layout-multiple-columns .account__header__tabs { +.layout-single-column .account__header__tabs { overflow: visible; } -.layout-multiple-columns .account__header__tabs .account-role { +.layout-single-column .account__header__tabs .account-role { display: none; - width: 90px; + width: 133.5px; } /* 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 { +.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; @@ -2022,20 +1991,20 @@ body.embed .button.logo-button, /* 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 { +.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-multiple-columns .account__header__tabs__buttons .icon-button { +.layout-single-column .account__header__tabs__buttons .icon-button { color: var(--color-light-text); } /* stylelint-disable-next-line */ -.layout-multiple-columns .account__header__tabs__buttons .icon-button { +.layout-single-column .account__header__tabs__buttons .icon-button { align-items: center; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; @@ -2046,51 +2015,51 @@ body.embed .button.logo-button, } 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 { +.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-multiple-columns .account__header__tabs__buttons .icon-button .fa::before { +.layout-single-column .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 { +.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-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 { +.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-multiple-columns .account__header__tabs__buttons .icon-button .fa-ellipsis-v::before { +.layout-single-column .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 { +.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-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 { +.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-multiple-columns .detailed-status__action-bar .icon-button:hover::after, -.layout-multiple-columns .status__action-bar .icon-button:hover::after { +.layout-single-column .detailed-status__action-bar .icon-button:hover::after, +.layout-single-column .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 { +.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: ''; @@ -2100,98 +2069,88 @@ body.embed .button.logo-button:hover, pointer-events: none; position: absolute; top: -8px; - transform: translateX(1px) translateY(0px); + transform: translateX(8px) translateY(1px); 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 { +.layout-single-column .conversation .icon-button::after { transform: translateX(-8px) translateY(1px); } -.layout-multiple-columns .conversation__content { +.layout-single-column .conversation__content { overflow: visible; } -.layout-multiple-columns .detailed-status__button { +.layout-single-column .detailed-status__button { position: relative; } -.layout-multiple-columns .detailed-status__button .icon-button.star-icon::after { +.layout-single-column .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); +.layout-single-column .status__action-bar .icon-button.icon-button--with-counter::after { + transform: translateX(-6px) translateY(-1px); } /* Misc UI fixes */ -.layout-multiple-columns .search__icon .fa.active { +.layout-single-column .search__icon .fa.active { opacity: .6; } /* Explore -> For you shade in bio */ -.layout-multiple-columns .scrollable .account-card__bio::after { +.layout-single-column .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 { +.layout-single-column .empty-column-indicator { min-height: 120px; } -.layout-multiple-columns .status__prepend + .status { +.layout-single-column .status__prepend + .status { padding-top: 10px; } -.layout-multiple-columns .search__icon .fa-times-circle { +.layout-single-column .search__icon .fa-times-circle { top: 14px; } -.layout-multiple-columns .setting-text__toolbar { +.layout-single-column .setting-text__toolbar { align-items: center; } -.layout-multiple-columns .timeline-hint strong { +.layout-single-column .timeline-hint strong { display: block; margin-bottom: var(--gap-default); } -.layout-multiple-columns .timeline-hint br { +.layout-single-column .timeline-hint br { display: none; } /* General fixes */ -.layout-multiple-columns .account__header__bar .avatar { +.layout-single-column .account__header__bar .avatar { /* stylelint-disable-next-line */ margin-left: 0 !important; } /* Fix for button line-height */ -.layout-multiple-columns .button.logo-button { +.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-multiple-columns .detailed-status-direct { +.layout-single-column .detailed-status-direct { position: relative; } -.layout-multiple-columns .status__wrapper-direct::after, -.layout-multiple-columns .detailed-status-direct::after { +.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 */ @@ -2203,18 +2162,18 @@ body.embed .button.logo-button:hover, width: 0; } -.layout-multiple-columns .notification .status__wrapper-direct::after { +.layout-single-column .notification .status__wrapper-direct::after { top: -40px; } /* Private message conversations */ -.layout-multiple-columns .conversation .status__action-bar { +.layout-single-column .conversation .status__action-bar { padding-left: 0; } /* Default buttons */ -.layout-multiple-columns .compose-form__buttons button, -.layout-multiple-columns .button { +.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; @@ -2222,11 +2181,11 @@ body.embed .button.logo-button:hover, } /* 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 { +.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); @@ -2234,7 +2193,7 @@ body.embed .button.logo-button:hover, } /* Compose form */ -.layout-multiple-columns .compose-panel .compose-form { +.layout-single-column .compose-panel .compose-form { background-color: transparent; margin-bottom: 0; position: relative; @@ -2247,15 +2206,15 @@ body.embed .button.logo-button:hover, z-index: 5; } -.layout-multiple-columns .compose-panel .compose-form, -.layout-multiple-columns .compose-panel, -.layout-multiple-columns .compose-form__autosuggest-wrapper { +.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-multiple-columns .compose-form .autosuggest-textarea__textarea { + .layout-single-column .compose-form .autosuggest-textarea__textarea { /* stylelint-disable-next-line */ max-height: 20vh !important; /* stylelint-disable-next-line */ overflow-y: auto !important; @@ -2264,28 +2223,28 @@ body.embed .button.logo-button:hover, } @media (min-width: 889px) and (max-height: 1000px) { - .layout-multiple-columns .compose-form .autosuggest-textarea__textarea { + .layout-single-column .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 { +.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-multiple-columns .button.button-tertiary { +.layout-single-column .button.button-tertiary { /* stylelint-disable-next-line */ background-color: transparent !important; /* stylelint-disable-next-line */ @@ -2294,29 +2253,29 @@ body.embed .button.logo-button:hover, padding: 6px 17px; } -.layout-multiple-columns .button.button-tertiary:active, -.layout-multiple-columns .button.button-tertiary:focus, -.layout-multiple-columns .button.button-tertiary:hover { +.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-multiple-columns .button.button-secondary { +.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-multiple-columns .button.button-secondary:hover { +.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-multiple-columns .button.button-tertiary:focus, -.layout-multiple-columns .button.button-tertiary:hover { +.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 */ @@ -2329,32 +2288,32 @@ body.embed .button.logo-button:hover, } /* Smaller icon for back button */ -.layout-multiple-columns .column-back-button i, -.layout-multiple-columns .column-header__back-button i { +.layout-single-column .column-back-button i, +.layout-single-column .column-header__back-button i { font-size: 12px; } -.layout-multiple-columns .icon-button__counter { +.layout-single-column .icon-button__counter { font-size: var(--font-size-smaller); } -.layout-multiple-columns .notification__favourite-icon-wrapper .fa.fa-retweet { +.layout-single-column .notification__favourite-icon-wrapper .fa.fa-retweet { color: var(--color-green); } /* Smaller icons for status action bar */ -.layout-multiple-columns .status__action-bar .fa { +.layout-single-column .status__action-bar .fa { font-size: 14.6px; min-width: 18px; } -.layout-multiple-columns .status__action-bar .icon-button--with-counter { +.layout-single-column .status__action-bar .icon-button--with-counter { align-items: center; display: inline-flex; gap: 6px; } -.layout-multiple-columns .status__action-bar .icon-button { +.layout-single-column .status__action-bar .icon-button { /* It's inlined so we have to use !important */ /* stylelint-disable-next-line */ height: unset !important; @@ -2365,102 +2324,101 @@ body.embed .button.logo-button:hover, @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 { + .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-multiple-columns .list-panel { + .layout-single-column .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 { + .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-multiple-columns .navigation-panel__logo { + .layout-single-column .navigation-panel__logo { order: 1; } - .layout-multiple-columns .column-link[href="/home"] { + .layout-single-column .column-link[href="/home"] { order: 2; } - .layout-multiple-columns .column-link[href="/notifications"] { + .layout-single-column .column-link[href="/notifications"] { order: 3; } - .layout-multiple-columns .column-link[href="/explore"] { + .layout-single-column .column-link[href="/explore"] { order: 4; } - .layout-multiple-columns .column-link[href="/public/local"] { + .layout-single-column .column-link[href="/public/local"] { order: 5; } - .layout-multiple-columns .column-link[href="/public"] { + .layout-single-column .column-link[href="/public"] { order: 6; } - .layout-multiple-columns .column-link[href="/conversations"] { + .layout-single-column .column-link[href="/conversations"] { order: 7; } - .layout-multiple-columns .column-link[href='/follow_requests'] { + .layout-single-column .column-link[href='/follow_requests'] { order: 8; } - .layout-multiple-columns .column-link[href="/bookmarks"] { + .layout-single-column .column-link[href="/bookmarks"] { order: 9; } - .layout-multiple-columns .column-link[href="/favourites"] { + .layout-single-column .column-link[href="/favourites"] { order: 10; } - .layout-multiple-columns .column-link[href="/lists"] { + .layout-single-column .column-link[href="/lists"] { order: 12; } /* stylelint-disable-next-line no-duplicate-selectors */ - .layout-multiple-columns .list-panel { + .layout-single-column .list-panel { order: 13; } - .layout-multiple-columns .column-link[href="/settings/preferences"] { + .layout-single-column .column-link[href="/settings/preferences"] { order: 11; } - .layout-multiple-columns .navigation-panel__sign-in-banner, - .layout-multiple-columns .navigation-panel__legal { + .layout-single-column .navigation-panel__sign-in-banner, + .layout-single-column .navigation-panel__legal { order: 14; } - .layout-multiple-columns .flex-spacer { + .layout-single-column .flex-spacer { order: 15; } - .layout-multiple-columns .getting-started__trends { + .layout-single-column .getting-started__trends { order: 16; } - .layout-multiple-columns .status__action-bar .icon-button { + .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-multiple-columns .conversation .status__action-bar .icon-button { + .layout-single-column .conversation .status__action-bar .icon-button { /* It's inlined so we have to use !important */ /* stylelint-disable-next-line */ @@ -2468,169 +2426,169 @@ body.embed .button.logo-button:hover, } /* Fix list links if they are too short */ - .layout-multiple-columns .list-panel .column-link { + .layout-single-column .list-panel .column-link { display: flex; } } /* Replace bookmark icon */ -.layout-multiple-columns .detailed-status .fa-bookmark::before, -.layout-multiple-columns .status .fa-bookmark::before { +.layout-single-column .detailed-status .fa-bookmark::before, +.layout-single-column .status .fa-bookmark::before { content: var(--icon-bookmark); position: relative; top: 1px; } -.layout-multiple-columns .column-link .fa-bookmark::before { +.layout-single-column .column-link .fa-bookmark::before { content: var(--icon-bookmark-column-link); } -.layout-multiple-columns .column-link.active .fa-bookmark::before { +.layout-single-column .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 { +.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-multiple-columns .status button.icon-button:hover .fa-bookmark::before { +.layout-single-column .status button.icon-button:hover .fa-bookmark::before { content: var(--icon-bookmark-status-hover); } /* Notifications icon */ -.layout-multiple-columns .column-link .fa-bell::before { +.layout-single-column .column-link .fa-bell::before { content: var(--icon-bell); } -.layout-multiple-columns .column-link.active .fa-bell::before { +.layout-single-column .column-link.active .fa-bell::before { content: var(--icon-bell-active); } /* Home icon */ -.layout-multiple-columns .notification__filter-bar .fa-home::before { +.layout-single-column .notification__filter-bar .fa-home::before { content: var(--icon-home-notification); } -.layout-multiple-columns .notification__filter-bar .active .fa-home::before { +.layout-single-column .notification__filter-bar .active .fa-home::before { content: var(--icon-home-notification-active); } -.layout-multiple-columns .column-link .fa-home::before { +.layout-single-column .column-link .fa-home::before { content: var(--icon-home); position: relative; top: 1px; } /* Federated icon */ -.layout-multiple-columns .column-link .fa-globe::before { +.layout-single-column .column-link .fa-globe::before { content: var(--icon-globe); } -.layout-multiple-columns .column-link.active .fa-home::before { +.layout-single-column .column-link.active .fa-home::before { content: var(--icon-home-column-link-active); } /* Explore icon */ -.layout-multiple-columns .column-link .fa-hashtag::before { +.layout-single-column .column-link .fa-hashtag::before { content: var(--icon-hashtag); position: relative; top: 1px; } -.layout-multiple-columns .column-link.active .fa-hashtag::before { +.layout-single-column .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 { +.layout-single-column .column-link .fa-users::before { content: var(--icon-users-column-link); position: relative; top: 2px; } -.layout-multiple-columns .column-link.active .fa-users::before { +.layout-single-column .column-link.active .fa-users::before { content: var(--icon-users-column-link-active); } /* Direct messages icon */ -.layout-multiple-columns .column-link .fa-at::before { +.layout-single-column .column-link .fa-at::before { content: var(--icon-direct-messages); position: relative; top: 1px; } -.layout-multiple-columns .column-link.active .fa-at { +.layout-single-column .column-link.active .fa-at { transform: scale(1.15); } -.layout-multiple-columns .column-link.active .fa-at::before { +.layout-single-column .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 { +.layout-single-column .detailed-status .fa-share-alt::before, +.layout-single-column .status .fa-share-alt::before { content: var(--icon-share); } -.layout-multiple-columns .status button.icon-button:hover .fa-share-alt::before { +.layout-single-column .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 { +.layout-single-column .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 { +.layout-single-column .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 { +.layout-single-column .notification__filter-bar .fa-tasks::before, +.layout-single-column .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 { +.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-multiple-columns .detailed-status button.icon-button i.fa-retweet, -.layout-multiple-columns .status button.icon-button i.fa-retweet { +.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-multiple-columns .notification__favourite-icon-wrapper .fa-retweet::before { +.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-multiple-columns button.icon-button i.fa-retweet { +.layout-single-column 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 { +.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; @@ -2638,142 +2596,142 @@ body.embed .button.logo-button:hover, /* 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 { +.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-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 { +.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-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 { +.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-multiple-columns button.icon-button:not(.active):hover i.fa-retweet, - .layout-multiple-columns button.icon-button:not(.active):hover i.fa-retweet ~ span { + .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-multiple-columns .status button.icon-button:not(.active):hover i.fa-bookmark::before { + .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-multiple-columns button.icon-button:not(.active):hover i.fa-retweet { + .layout-single-column 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 { +.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-multiple-columns button.icon-button:hover i.fa-star ~ span, -.layout-multiple-columns button.icon-button.active i.fa-star ~ span { +.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-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-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-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 { +.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-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 { +.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-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 { +.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-multiple-columns .conversation .icon-button:hover .fa-reply::before { +.layout-single-column .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 { +.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-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 { +.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-multiple-columns .detailed-status__action-bar .fa-bookmark::before { +.layout-single-column .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 { +.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-multiple-columns .detailed-status__action-bar .icon-button.active .fa-bookmark::before { +.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-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 { +.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-multiple-columns .fa-list-ul::before { +.layout-single-column .fa-list-ul::before { content: var(--icon-list); position: relative; top: 1px; } -.layout-multiple-columns .relationship-tag { +.layout-single-column .relationship-tag { background-color: var(--color-mud); color: var(--color-light-text); font-size: 11px; @@ -2784,44 +2742,44 @@ body.embed .button.logo-button:hover, /* 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 { + .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-multiple-columns .ui__header, - .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper, - .layout-multiple-columns .tabs-bar__wrapper { + .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-multiple-columns .columns-area__panels__main { + .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-multiple-columns .columns-area__panels__main > div { + .layout-single-column .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 { + .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-multiple-columns .columns-area__panels { + .layout-single-column .columns-area__panels { width: calc(100% - 1px); } - .layout-multiple-columns .columns-area__panels__main > .tabs-bar__wrapper { + .layout-single-column .columns-area__panels__main > .tabs-bar__wrapper { border-right: 0; } } @@ -2829,7 +2787,7 @@ body.embed .button.logo-button:hover, /* Mobile */ @media screen and (max-width: 889px) { /* Better blur overlay for ui-header */ - .layout-multiple-columns .ui::after { + .layout-single-column .ui::after { backdrop-filter: blur(12px); background-color: var(--color-bg-75); content: ''; @@ -2843,33 +2801,33 @@ body.embed .button.logo-button:hover, } /* Fix navigation-bar getting underneath layer */ - .layout-multiple-columns .navigation-bar { + .layout-single-column .navigation-bar { z-index: 2; } - .layout-multiple-columns .tabs-bar__wrapper { + .layout-single-column .tabs-bar__wrapper { margin-right: 0; position: sticky; top: 55px; z-index: 2; } - .layout-multiple-columns .columns-area__panels__main { + .layout-single-column .columns-area__panels__main { order: 1; position: unset; width: 100%; } - .layout-multiple-columns .columns-area__panels { + .layout-single-column .columns-area__panels { flex-direction: column; justify-content: flex-start; } - .layout-multiple-columns .columns-area__panels__main::-webkit-scrollbar { + .layout-single-column .columns-area__panels__main::-webkit-scrollbar { display: none; } - .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + .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; @@ -2879,7 +2837,7 @@ body.embed .button.logo-button:hover, width: 100vw; } - .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel { + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { flex-direction: row; gap: 0; height: 100%; @@ -2887,11 +2845,11 @@ body.embed .button.logo-button:hover, padding: 0; } - .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { + .layout-single-column .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { display: none; } - .layout-multiple-columns .column-link { + .layout-single-column .column-link { justify-content: center; margin-right: unset; padding-bottom: 0; @@ -2901,14 +2859,14 @@ body.embed .button.logo-button:hover, width: 38px; } - .layout-multiple-columns .item-list .column-link { + .layout-single-column .item-list .column-link { padding-bottom: 4px; padding-top: 4px; width: unset; } - .layout-multiple-columns .column-link:hover, - .layout-multiple-columns .column-link:focus { + .layout-single-column .column-link:hover, + .layout-single-column .column-link:focus { /* stylelint-disable-next-line */ background-color: transparent !important; } @@ -2939,12 +2897,12 @@ body.embed .button.logo-button:hover, top: 1px; } - .layout-multiple-columns .columns-area__panels__main > div, - .layout-multiple-columns .columns-area__panels__main > div.columns-area.columns-area--mobile { + .layout-single-column .columns-area__panels__main > div, + .layout-single-column .columns-area__panels__main > div.columns-area.columns-area--mobile { border: 0; } - .layout-multiple-columns .ui__header { + .layout-single-column .ui__header { align-items: center; border-bottom: 0; box-sizing: border-box; @@ -2957,7 +2915,7 @@ body.embed .button.logo-button:hover, z-index: 2; } - .layout-multiple-columns .account__header__bar .avatar .account__avatar { + .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; @@ -2967,135 +2925,135 @@ body.embed .button.logo-button:hover, width: 106px !important; } - .layout-multiple-columns .account__header__image { + .layout-single-column .account__header__image { height: 157px; } - .layout-multiple-columns .column > .scrollable { + .layout-single-column .column > .scrollable { padding-bottom: 55px; } - .layout-multiple-columns .actions-modal ul li:not(:empty) a { + .layout-single-column .actions-modal ul li:not(:empty) a { color: var(--color-light-text); } /* "Your lists" view */ - .layout-multiple-columns .column-subheading ~ article { + .layout-single-column .column-subheading ~ article { padding-bottom: calc(var(--gap-default) / 2); padding-top: calc(var(--gap-default) / 2); } - .layout-multiple-columns .compose-form { + .layout-single-column .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 { + .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-multiple-columns .navigation-panel .navigation-panel__legal, - .layout-multiple-columns .navigation-panel .column-link { + .layout-single-column .navigation-panel .navigation-panel__legal, + .layout-single-column .navigation-panel .column-link { flex: 0 0 calc(100vw / 4); padding: 0; } - .layout-multiple-columns .navigation-panel .navigation-panel__legal { + .layout-single-column .navigation-panel .navigation-panel__legal { order: 999; text-align: center; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(1) { + .layout-single-column .navigation-panel .column-link:nth-child(1) { order: 2; } /* Home */ - .layout-multiple-columns .navigation-panel .column-link:nth-child(2) { + .layout-single-column .navigation-panel .column-link:nth-child(2) { order: 1; } /* Notifications */ - .layout-multiple-columns .navigation-panel .column-link:nth-child(3) { + .layout-single-column .navigation-panel .column-link:nth-child(3) { order: 4; } /* Explore */ - .layout-multiple-columns .navigation-panel .column-link:nth-child(4) { + .layout-single-column .navigation-panel .column-link:nth-child(4) { order: 2; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(5) { + .layout-single-column .navigation-panel .column-link:nth-child(5) { order: 5; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(6) { + .layout-single-column .navigation-panel .column-link:nth-child(6) { order: 6; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(7) { + .layout-single-column .navigation-panel .column-link:nth-child(7) { order: 7; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(8) { + .layout-single-column .navigation-panel .column-link:nth-child(8) { order: 8; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(9) { + .layout-single-column .navigation-panel .column-link:nth-child(9) { order: 9; } /* Lists */ - .layout-multiple-columns .navigation-panel .column-link:nth-child(10) { + .layout-single-column .navigation-panel .column-link[href="/lists"] { order: 4; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(11) { + .layout-single-column .navigation-panel .column-link:nth-child(11) { order: 11; } - .layout-multiple-columns .navigation-panel .column-link:nth-child(12) { + .layout-single-column .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 { +.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-multiple-columns.no-reduce-motion .icon-button:focus .fa-retweet { +.layout-single-column.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 { +.layout-single-column .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 { +.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-multiple-columns .media-gallery__item-thumbnail img, -.layout-multiple-columns .audio-player, -.layout-multiple-columns .video-player video, -.layout-multiple-columns .media-gallery__gifv video, -.layout-multiple-columns .media-gallery__preview { +.layout-single-column .media-gallery__item-thumbnail img, +.layout-single-column .audio-player, +.layout-single-column .video-player video, +.layout-single-column .media-gallery__gifv video, +.layout-single-column .media-gallery__preview { backface-visibility: hidden; border-radius: 10px; } -.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 { +.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: 4px; @@ -3119,17 +3077,17 @@ body.embed .button.logo-button:hover, 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 { +.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); } /* More distinct focus color for accessibility, instead of just white */ -.layout-multiple-columns input:focus-visible { +.layout-single-column input:focus-visible { outline-color: var(--color-accent); outline-style: solid; } @@ -3146,176 +3104,151 @@ body.embed .entry .detailed-status { } /* 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 { +.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-multiple-columns .button.logo-button.button--destructive:active, -.layout-multiple-columns .button.logo-button.button--destructive:focus { +.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-multiple-columns .character-counter.character-counter--over { +.layout-single-column .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 { +.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-multiple-columns .column-header__button .column-header__icon.fa-user-times::before { +.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-multiple-columns .server-banner__meta__column { +.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-multiple-columns .scrollable > div > div .status.status-reply { - border-color: transparent; - position: relative; +/* Native Mastodon 4.1.2-nightly threaded lines */ +.layout-single-column .status__line--first { + height: calc(100% + var(--size-avatar)); } -/* 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); +.layout-single-column .status__line--full { + height: calc(100% + 32px); } -/* 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); +div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.layout-single-column .status__line--full.status__line--first { + height: 100%; } -.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; +/* Threaded line, actually */ +.layout-single-column .status__line { + border-inline-start: 2px solid var(--color-thread-line); + -webkit-border-start: 2px solid var(--color-thread-line); } -/* 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-single-column .status__line--full::before { + background-color: var(--color-thread-line); } -.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; +/* Hide border-top from the last in thread */ +.layout-single-column div:has(.status--in-thread) + div .detailed-status { + border-top: 0; +} + +/* Hide the "stub" from the first status line */ +div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, +.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { + top: 32px; } -.layout-multiple-columns .scrollable > div > .status__thread.status__thread--first-item .status.status-reply .status__avatar::before { - top: 60px; +.layout-single-column .status--in-thread .attachment-list, +.layout-single-column .status--in-thread .audio-player, +.layout-single-column .status--in-thread .media-gallery, +.layout-single-column .status--in-thread .picture-in-picture-placeholder, +.layout-single-column .status--in-thread .status-card, +.layout-single-column .status--in-thread .status__action-bar, +.layout-single-column .status--in-thread .status__content, +.layout-single-column .status--in-thread .video-player { + padding-left: 4px; } /* 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 { +.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-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 { +.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-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 { +.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-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 { +.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-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 { +.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-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 { +.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-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 { +.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-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 { +.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; } @@ -3331,43 +3264,43 @@ body.embed .entry .detailed-status { } /* Left sidebar column links */ -.layout-multiple-columns .column-link .fa-star::before { +.layout-single-column .column-link .fa-star::before { content: var(--icon-heart-column-link); } @media (min-width: 889px) { - .layout-multiple-columns .column-link .fa-star::before { + .layout-single-column .column-link .fa-star::before { position: relative; top: 2px; } } -.layout-multiple-columns .column-link.active .fa-star::before { +.layout-single-column .column-link.active .fa-star::before { content: var(--icon-heart-column-link-active); } -.layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before { +.layout-single-column .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 { +.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-multiple-columns .notification__filter-bar .active .fa-star::before { +.layout-single-column .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 { +.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-multiple-columns .notification__filter-bar .fa-star::before { +.layout-single-column .notification__filter-bar .fa-star::before { position: relative; top: 2px; } @@ -3377,30 +3310,30 @@ body.embed .entry .detailed-status { 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 { +.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-multiple-columns.no-reduce-motion .icon-button.star-icon { +.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-multiple-columns.no-reduce-motion .icon-button.star-icon .fa-star { +.layout-single-column.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 { +.layout-single-column.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 { +.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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); @@ -3418,24 +3351,24 @@ body.embed .entry .detailed-status { } /* stylelint-disable-next-line */ -.layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before { +.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-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .fa-star::before { + .layout-single-column.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 { +.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-multiple-columns.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .fa-star::before { +.layout-single-column.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .fa-star::before { left: -29px; } @@ -3453,51 +3386,51 @@ body.embed .entry .detailed-status { /* 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 { + .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-multiple-columns button.icon-button.active:hover i.fa-star ~ span { + .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-multiple-columns .column-link .fa-star::before { +.layout-single-column .column-link .fa-star::before { content: var(--icon-star-column-link); } -.layout-multiple-columns .column-link.active .fa-star::before { +.layout-single-column .column-link.active .fa-star::before { content: var(--icon-star-column-link-active); } -.layout-multiple-columns .notification__favourite-icon-wrapper .fa-star::before { +.layout-single-column .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 { +.layout-single-column .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 { +.layout-single-column 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 { +.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-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 { +.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; @@ -3506,16 +3439,16 @@ body.embed .entry .detailed-status { } /* 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 { +.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-multiple-columns.no-reduce-motion .icon-button.star-icon.activate .fa-star::before { +.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; @@ -3535,8 +3468,8 @@ body.embed .entry .detailed-status { } /* 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 { +.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; @@ -3557,16 +3490,16 @@ body.embed .entry .detailed-status { } /* 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 { +.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-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 { +.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; @@ -3580,26 +3513,26 @@ body.embed .entry .detailed-status { width: 0em; } -.layout-multiple-columns .icon-button.star-icon.active, -.layout-multiple-columns .notification__favourite-icon-wrapper .star-icon { +.layout-single-column .icon-button.star-icon.active, +.layout-single-column .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 { +.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-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 { +.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; @@ -3608,27 +3541,27 @@ body.embed .entry .detailed-status { } /* 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 { +.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-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 { + .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-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 { +.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; @@ -3637,8 +3570,8 @@ body.embed .entry .detailed-status { } /* 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 { +.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; } @@ -3646,14 +3579,14 @@ body.embed .entry .detailed-status { /* 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 { + .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-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 { + .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; }