mirror of
https://github.com/nileane/TangerineUI-for-Mastodon
synced 2024-11-27 22:38:18 +09:00
" "
This commit is contained in:
Niléane
parent
d7db5310c3
commit
6989b83fc9
@ -3,9 +3,9 @@
|
||||
|
||||
A Tangerine redesign for Mastodon's Web UI.
|
||||
https://github.com/nileane/TangerineUI-for-Mastodon/
|
||||
|
||||
|
||||
by @nileane@nileane.fr
|
||||
|
||||
|
||||
Last Mastodon compatibility check: v4.1.4 stable ✅
|
||||
*/
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
--color-fg-muted: #655e6e;
|
||||
--color-secondary-bg: #0c0c0d;
|
||||
--color-secondary-separator: #26232e;
|
||||
|
||||
|
||||
--color-content-bg: #0b0b0b;
|
||||
--color-content-fg: #f2f2f2;
|
||||
--color-content-fg-bold: #ffffff;
|
||||
@ -49,7 +49,7 @@
|
||||
--color-content-secondary-bg: #1f1b22;
|
||||
--color-content-secondary-separator: rgba(64, 62, 89, 0.4);
|
||||
--color-content-bg-focus: #151515;
|
||||
|
||||
|
||||
--color-accent: #7a7af9;
|
||||
--color-accent-focus: #5a47ff;
|
||||
--color-accent-bg: #261f3c;
|
||||
@ -204,31 +204,31 @@ body.layout-single-column {
|
||||
}
|
||||
|
||||
/* 💨 Loading bar */
|
||||
.layout-single-column .loading-bar {
|
||||
.layout-single-column .loading-bar {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Resetting borders */
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .regeneration-indicator,
|
||||
.layout-single-column .audio-player,
|
||||
.layout-single-column .compose-form .spoiler-input__input,
|
||||
.layout-single-column .compose-form__autosuggest-wrapper,
|
||||
.layout-single-column .compose-form__poll-wrapper select,
|
||||
.layout-single-column .poll__option input[type=text],
|
||||
.layout-single-column .report-dialog-modal__textarea,
|
||||
.layout-single-column .search__input,
|
||||
.layout-single-column .audio-player,
|
||||
.layout-single-column .compose-form .spoiler-input__input,
|
||||
.layout-single-column .compose-form__autosuggest-wrapper,
|
||||
.layout-single-column .compose-form__poll-wrapper select,
|
||||
.layout-single-column .poll__option input[type=text],
|
||||
.layout-single-column .report-dialog-modal__textarea,
|
||||
.layout-single-column .search__input,
|
||||
.layout-single-column .setting-text,
|
||||
.layout-single-column .compose-form .compose-form__buttons-wrapper,
|
||||
.layout-single-column .about__section__body {
|
||||
border: 0;
|
||||
}
|
||||
.layout-single-column .column-inline-form,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .column-inline-form,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .regeneration-indicator {
|
||||
background: transparent;
|
||||
}
|
||||
@ -394,7 +394,7 @@ body.layout-single-column {
|
||||
.layout-single-column .fa-group.column-header__icon:before,
|
||||
.layout-single-column .fa-users.column-header__icon:before {
|
||||
content: var(--icon-users-column-link-active);
|
||||
}
|
||||
}
|
||||
/* Explore icon */
|
||||
.layout-single-column .column-link .fa-hashtag::before {
|
||||
content: var(--icon-hashtag);
|
||||
@ -488,7 +488,7 @@ body.layout-single-column {
|
||||
top: 2px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
|
||||
/* Unfollow hashtag icon */
|
||||
.layout-single-column .column-header__button .column-header__icon.fa-user-times::before {
|
||||
content: var(--icon-unfollow-hashtag);
|
||||
@ -496,7 +496,7 @@ body.layout-single-column {
|
||||
top: 2px;
|
||||
right: -5px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -512,7 +512,7 @@ body.layout-single-column {
|
||||
.layout-single-column .navigation-bar strong {
|
||||
color: var(--color-content-fg-bold);
|
||||
}
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
|
||||
.layout-single-column .compose-form .compose-form__buttons-wrapper,
|
||||
@ -674,7 +674,7 @@ body.layout-single-column {
|
||||
.layout-single-column .status__avatar {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.layout-single-column .reply-indicator__content,
|
||||
.layout-single-column .reply-indicator__content,
|
||||
.layout-single-column .status__content {
|
||||
line-height: 19px;
|
||||
}
|
||||
@ -745,7 +745,7 @@ body.layout-single-column {
|
||||
.layout-single-column .detailed-status__wrapper.focusable:focus,
|
||||
.layout-single-column .focusable:focus .detailed-status,
|
||||
.layout-single-column .focusable:focus .detailed-status__action-bar,
|
||||
.layout-single-column .status__wrapper.focusable:focus .detailed-status,
|
||||
.layout-single-column .status__wrapper.focusable:focus .detailed-status,
|
||||
.layout-single-column .focusable:focus .detailed-status__action-bar {
|
||||
outline: 0;
|
||||
background: var(--color-content-bg-focus);
|
||||
@ -846,7 +846,7 @@ body.layout-single-column {
|
||||
.layout-single-column .status-card.compact {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border: none;
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 1px 4px rgba(0, 0, 0, .08);
|
||||
}
|
||||
.layout-single-column .status-card__title,
|
||||
@ -1022,7 +1022,7 @@ body.layout-single-column {
|
||||
.layout-single-column .tabs-bar__wrapper {
|
||||
background-color: transparent;
|
||||
border-radius: 7px 7px 0 0;
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
inset 0 10px var(--color-bg),
|
||||
0 -30px var(--color-bg);
|
||||
}
|
||||
@ -1096,7 +1096,7 @@ body.layout-single-column {
|
||||
padding: 0 0 0 15px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.layout-single-column .column-header__icon {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
@ -1122,9 +1122,9 @@ body.layout-single-column {
|
||||
.layout-single-column .columns-area--mobile {
|
||||
border-radius: 7px;
|
||||
}
|
||||
.layout-single-column .column-header,
|
||||
.layout-single-column .column-header,
|
||||
.layout-single-column .column-back-button,
|
||||
.layout-single-column .column-header__button,
|
||||
.layout-single-column .column-header__button,
|
||||
.layout-single-column .column-header__back-button {
|
||||
background-color: transparent;
|
||||
height: 55px;
|
||||
@ -1172,9 +1172,9 @@ body.layout-single-column {
|
||||
border-radius: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.layout-single-column .account__section-headline a,
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar a,
|
||||
.layout-single-column .account__section-headline a,
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar a,
|
||||
.layout-single-column .notification__filter-bar button {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
@ -1182,32 +1182,32 @@ body.layout-single-column {
|
||||
border-radius: 9px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.layout-single-column .account__section-headline a:hover,
|
||||
.layout-single-column .account__section-headline button:hover,
|
||||
.layout-single-column .notification__filter-bar a:hover,
|
||||
.layout-single-column .account__section-headline a:hover,
|
||||
.layout-single-column .account__section-headline button:hover,
|
||||
.layout-single-column .notification__filter-bar a:hover,
|
||||
.layout-single-column .notification__filter-bar button:hover {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
|
||||
}
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .notification__filter-bar button.active {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
|
||||
}
|
||||
.layout-single-column .account__section-headline a.active:after,
|
||||
.layout-single-column .account__section-headline a.active:after,
|
||||
.layout-single-column .account__section-headline a.active:before,
|
||||
.layout-single-column .account__section-headline button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:before,
|
||||
.layout-single-column .notification__filter-bar a.active:after,
|
||||
.layout-single-column .notification__filter-bar a.active:before,
|
||||
.layout-single-column .notification__filter-bar button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:before,
|
||||
.layout-single-column .notification__filter-bar a.active:after,
|
||||
.layout-single-column .notification__filter-bar a.active:before,
|
||||
.layout-single-column .notification__filter-bar button.active:after,
|
||||
.layout-single-column .notification__filter-bar button.active:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar button {
|
||||
background-color: transparent;
|
||||
@ -1231,9 +1231,9 @@ body.layout-single-column {
|
||||
display: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .notification__filter-bar button.active {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
@ -1250,7 +1250,7 @@ body.layout-single-column {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.layout-single-column .column-link.column-link--logo,
|
||||
.layout-single-column .column-link.column-link--logo,
|
||||
.layout-single-column .ui__header__logo {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
@ -1295,7 +1295,7 @@ body.layout-single-column {
|
||||
top: -4px;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.layout-single-column .compose-panel hr, .navigation-panel hr {
|
||||
display: none;
|
||||
}
|
||||
@ -1355,9 +1355,9 @@ body.layout-single-column {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 0;
|
||||
}
|
||||
.layout-single-column .navigation-panel .column-link,
|
||||
.layout-single-column .navigation-panel .column-link,
|
||||
.layout-single-column .navigation-panel .navigation-panel__legal,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column .column-link--transparent:hover {
|
||||
flex: 0 0 18vw;
|
||||
@ -1370,7 +1370,7 @@ body.layout-single-column {
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent:active {
|
||||
margin: 6px 0 7px;
|
||||
@ -1414,8 +1414,8 @@ body.layout-single-column {
|
||||
background-color: rgba(24, 24, 25, 0.7);
|
||||
border: 0;
|
||||
}
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent:active {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
@ -1603,7 +1603,7 @@ body.layout-single-column {
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--color-content-bg);
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account-card__header {
|
||||
padding: 0;
|
||||
border-radius: 7px 7px 0 0;
|
||||
@ -1629,7 +1629,7 @@ body.layout-single-column {
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--color-content-bg);
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account-card__header {
|
||||
padding: 0;
|
||||
border-radius: 7px 7px 0 0;
|
||||
@ -1753,13 +1753,13 @@ body.layout-single-column {
|
||||
.layout-single-column .search__popout__menu__item mark {
|
||||
color: var(--color-content-fg-bold);
|
||||
}
|
||||
.search__popout__menu__item.selected,
|
||||
.search__popout__menu__item:active,
|
||||
.search__popout__menu__item:focus,
|
||||
.search__popout__menu__item.selected,
|
||||
.search__popout__menu__item:active,
|
||||
.search__popout__menu__item:focus,
|
||||
.search__popout__menu__item:hover,
|
||||
.search__popout__menu__item.selected mark,
|
||||
.search__popout__menu__item:active mark,
|
||||
.search__popout__menu__item:focus mark,
|
||||
.search__popout__menu__item.selected mark,
|
||||
.search__popout__menu__item:active mark,
|
||||
.search__popout__menu__item:focus mark,
|
||||
.search__popout__menu__item:hover mark {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
@ -1775,11 +1775,11 @@ body.layout-single-column {
|
||||
.layout-single-column .search__input {
|
||||
padding: 13px;
|
||||
}
|
||||
.layout-single-column i.fa-search,
|
||||
.layout-single-column i.fa-search,
|
||||
.layout-single-column i.fa.active {
|
||||
transform: scale(1);
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .explore__search-header {
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
@ -1999,11 +1999,11 @@ body.layout-single-column {
|
||||
}
|
||||
.layout-single-column .icon-button,
|
||||
.layout-single-column .icon-button.inverted,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .status__content .status__content__spoiler-link {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .status__content .status__content__spoiler-link {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
@ -2017,8 +2017,8 @@ body.layout-single-column {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.layout-single-column .icon-button:active,
|
||||
.layout-single-column .icon-button:focus,
|
||||
.layout-single-column .icon-button:active,
|
||||
.layout-single-column .icon-button:focus,
|
||||
.layout-single-column .icon-button:hover {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
@ -2103,9 +2103,9 @@ body.layout-single-column {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button,
|
||||
.layout-single-column .privacy-dropdown .icon-button.inverted.active {
|
||||
@ -2117,19 +2117,19 @@ body.layout-single-column {
|
||||
.layout-single-column .button.button-tertiary.button--destructive {
|
||||
background-color: transparent;
|
||||
}
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:active,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:focus,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:active,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:focus,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:hover {
|
||||
background-color: #79bd9a;
|
||||
}
|
||||
.layout-single-column .button.button-tertiary.button--destructive:active,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:focus,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:active,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:focus,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:hover {
|
||||
background-color: #df405a;
|
||||
}
|
||||
.layout-single-column .app-body .block-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__secondary-button,
|
||||
.layout-single-column .app-body .block-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__secondary-button,
|
||||
.layout-single-column .app-body .mute-modal__cancel-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -2395,13 +2395,13 @@ body.layout-single-column {
|
||||
.layout-single-column .about__section:nth-child(3) .about__section__body {
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
.layout-single-column .about__meta,
|
||||
.layout-single-column .about__meta,
|
||||
.layout-single-column .about__section__title {
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .about__section.active .about__section__title {
|
||||
border-radius: 7px 7px 0 0;
|
||||
}
|
||||
@ -2413,13 +2413,13 @@ body.layout-single-column {
|
||||
|
||||
.layout-single-column .prose,
|
||||
.layout-single-column .prose p,
|
||||
.layout-single-column .prose b,
|
||||
.layout-single-column .prose h1,
|
||||
.layout-single-column .prose h2,
|
||||
.layout-single-column .prose h3,
|
||||
.layout-single-column .prose h4,
|
||||
.layout-single-column .prose h5,
|
||||
.layout-single-column .prose h6,
|
||||
.layout-single-column .prose b,
|
||||
.layout-single-column .prose h1,
|
||||
.layout-single-column .prose h2,
|
||||
.layout-single-column .prose h3,
|
||||
.layout-single-column .prose h4,
|
||||
.layout-single-column .prose h5,
|
||||
.layout-single-column .prose h6,
|
||||
.layout-single-column .prose strong,
|
||||
.layout-single-column .rules-list,
|
||||
.layout-single-column .about__domain-blocks__domain h6,
|
||||
@ -2484,4 +2484,4 @@ body.layout-single-column {
|
||||
.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */
|
||||
.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
180
TangerineUI.css
180
TangerineUI.css
@ -3,9 +3,9 @@
|
||||
|
||||
A Tangerine redesign for Mastodon's Web UI.
|
||||
https://github.com/nileane/TangerineUI-for-Mastodon/
|
||||
|
||||
|
||||
by @nileane@nileane.fr
|
||||
|
||||
|
||||
Last Mastodon compatibility check: v4.1.4 stable ✅
|
||||
*/
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
--color-fg-muted: #6e635e;
|
||||
--color-secondary-bg: #0d0c0c;
|
||||
--color-secondary-separator: #25201c;
|
||||
|
||||
|
||||
--color-content-bg: #0b0b0b;
|
||||
--color-content-fg: #f2f2f2;
|
||||
--color-content-fg-bold: #ffffff;
|
||||
@ -49,7 +49,7 @@
|
||||
--color-content-secondary-bg: #292623;
|
||||
--color-content-secondary-separator: rgba(77, 73, 70, 0.4);
|
||||
--color-content-bg-focus: #222222;
|
||||
|
||||
|
||||
--color-accent: #e68933;
|
||||
--color-accent-focus: #ffa047;
|
||||
--color-accent-bg: #3c2a1f;
|
||||
@ -204,31 +204,31 @@ body.layout-single-column {
|
||||
}
|
||||
|
||||
/* 💨 Loading bar */
|
||||
.layout-single-column .loading-bar {
|
||||
.layout-single-column .loading-bar {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Resetting borders */
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .regeneration-indicator,
|
||||
.layout-single-column .audio-player,
|
||||
.layout-single-column .compose-form .spoiler-input__input,
|
||||
.layout-single-column .compose-form__autosuggest-wrapper,
|
||||
.layout-single-column .compose-form__poll-wrapper select,
|
||||
.layout-single-column .poll__option input[type=text],
|
||||
.layout-single-column .report-dialog-modal__textarea,
|
||||
.layout-single-column .search__input,
|
||||
.layout-single-column .audio-player,
|
||||
.layout-single-column .compose-form .spoiler-input__input,
|
||||
.layout-single-column .compose-form__autosuggest-wrapper,
|
||||
.layout-single-column .compose-form__poll-wrapper select,
|
||||
.layout-single-column .poll__option input[type=text],
|
||||
.layout-single-column .report-dialog-modal__textarea,
|
||||
.layout-single-column .search__input,
|
||||
.layout-single-column .setting-text,
|
||||
.layout-single-column .compose-form .compose-form__buttons-wrapper,
|
||||
.layout-single-column .about__section__body {
|
||||
border: 0;
|
||||
}
|
||||
.layout-single-column .column-inline-form,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .column-inline-form,
|
||||
.layout-single-column .column>.scrollable,
|
||||
.layout-single-column .error-column,
|
||||
.layout-single-column .getting-started,
|
||||
.layout-single-column .regeneration-indicator {
|
||||
background: transparent;
|
||||
}
|
||||
@ -394,7 +394,7 @@ body.layout-single-column {
|
||||
.layout-single-column .fa-group.column-header__icon:before,
|
||||
.layout-single-column .fa-users.column-header__icon:before {
|
||||
content: var(--icon-users-column-link-active);
|
||||
}
|
||||
}
|
||||
/* Explore icon */
|
||||
.layout-single-column .column-link .fa-hashtag::before {
|
||||
content: var(--icon-hashtag);
|
||||
@ -488,7 +488,7 @@ body.layout-single-column {
|
||||
top: 2px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
|
||||
/* Unfollow hashtag icon */
|
||||
.layout-single-column .column-header__button .column-header__icon.fa-user-times::before {
|
||||
content: var(--icon-unfollow-hashtag);
|
||||
@ -496,7 +496,7 @@ body.layout-single-column {
|
||||
top: 2px;
|
||||
right: -5px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -512,7 +512,7 @@ body.layout-single-column {
|
||||
.layout-single-column .navigation-bar strong {
|
||||
color: var(--color-content-fg-bold);
|
||||
}
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
|
||||
.layout-single-column .compose-form .compose-form__buttons-wrapper,
|
||||
@ -674,7 +674,7 @@ body.layout-single-column {
|
||||
.layout-single-column .status__avatar {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.layout-single-column .reply-indicator__content,
|
||||
.layout-single-column .reply-indicator__content,
|
||||
.layout-single-column .status__content {
|
||||
line-height: 19px;
|
||||
}
|
||||
@ -745,7 +745,7 @@ body.layout-single-column {
|
||||
.layout-single-column .detailed-status__wrapper.focusable:focus,
|
||||
.layout-single-column .focusable:focus .detailed-status,
|
||||
.layout-single-column .focusable:focus .detailed-status__action-bar,
|
||||
.layout-single-column .status__wrapper.focusable:focus .detailed-status,
|
||||
.layout-single-column .status__wrapper.focusable:focus .detailed-status,
|
||||
.layout-single-column .focusable:focus .detailed-status__action-bar {
|
||||
outline: 0;
|
||||
background: var(--color-content-bg-focus);
|
||||
@ -846,7 +846,7 @@ body.layout-single-column {
|
||||
.layout-single-column .status-card.compact {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border: none;
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
0 1px 4px rgba(0, 0, 0, .08);
|
||||
}
|
||||
.layout-single-column .status-card__title,
|
||||
@ -1022,7 +1022,7 @@ body.layout-single-column {
|
||||
.layout-single-column .tabs-bar__wrapper {
|
||||
background-color: transparent;
|
||||
border-radius: 7px 7px 0 0;
|
||||
box-shadow:
|
||||
box-shadow:
|
||||
inset 0 10px var(--color-bg),
|
||||
0 -30px var(--color-bg);
|
||||
}
|
||||
@ -1096,7 +1096,7 @@ body.layout-single-column {
|
||||
padding: 0 0 0 15px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.layout-single-column .column-header__icon {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
@ -1122,9 +1122,9 @@ body.layout-single-column {
|
||||
.layout-single-column .columns-area--mobile {
|
||||
border-radius: 7px;
|
||||
}
|
||||
.layout-single-column .column-header,
|
||||
.layout-single-column .column-header,
|
||||
.layout-single-column .column-back-button,
|
||||
.layout-single-column .column-header__button,
|
||||
.layout-single-column .column-header__button,
|
||||
.layout-single-column .column-header__back-button {
|
||||
background-color: transparent;
|
||||
height: 55px;
|
||||
@ -1172,9 +1172,9 @@ body.layout-single-column {
|
||||
border-radius: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.layout-single-column .account__section-headline a,
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar a,
|
||||
.layout-single-column .account__section-headline a,
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar a,
|
||||
.layout-single-column .notification__filter-bar button {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
@ -1182,32 +1182,32 @@ body.layout-single-column {
|
||||
border-radius: 9px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.layout-single-column .account__section-headline a:hover,
|
||||
.layout-single-column .account__section-headline button:hover,
|
||||
.layout-single-column .notification__filter-bar a:hover,
|
||||
.layout-single-column .account__section-headline a:hover,
|
||||
.layout-single-column .account__section-headline button:hover,
|
||||
.layout-single-column .notification__filter-bar a:hover,
|
||||
.layout-single-column .notification__filter-bar button:hover {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
|
||||
}
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .notification__filter-bar button.active {
|
||||
background-color: var(--color-content-bg);
|
||||
color: var(--color-content-fg);
|
||||
box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
|
||||
}
|
||||
.layout-single-column .account__section-headline a.active:after,
|
||||
.layout-single-column .account__section-headline a.active:after,
|
||||
.layout-single-column .account__section-headline a.active:before,
|
||||
.layout-single-column .account__section-headline button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:before,
|
||||
.layout-single-column .notification__filter-bar a.active:after,
|
||||
.layout-single-column .notification__filter-bar a.active:before,
|
||||
.layout-single-column .notification__filter-bar button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:after,
|
||||
.layout-single-column .account__section-headline button.active:before,
|
||||
.layout-single-column .notification__filter-bar a.active:after,
|
||||
.layout-single-column .notification__filter-bar a.active:before,
|
||||
.layout-single-column .notification__filter-bar button.active:after,
|
||||
.layout-single-column .notification__filter-bar button.active:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar button {
|
||||
background-color: transparent;
|
||||
@ -1231,9 +1231,9 @@ body.layout-single-column {
|
||||
display: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .account__section-headline a.active,
|
||||
.layout-single-column .account__section-headline button.active,
|
||||
.layout-single-column .notification__filter-bar a.active,
|
||||
.layout-single-column .notification__filter-bar button.active {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
@ -1250,7 +1250,7 @@ body.layout-single-column {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.layout-single-column .column-link.column-link--logo,
|
||||
.layout-single-column .column-link.column-link--logo,
|
||||
.layout-single-column .ui__header__logo {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
@ -1295,7 +1295,7 @@ body.layout-single-column {
|
||||
top: -4px;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.layout-single-column .compose-panel hr, .navigation-panel hr {
|
||||
display: none;
|
||||
}
|
||||
@ -1355,9 +1355,9 @@ body.layout-single-column {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 0;
|
||||
}
|
||||
.layout-single-column .navigation-panel .column-link,
|
||||
.layout-single-column .navigation-panel .column-link,
|
||||
.layout-single-column .navigation-panel .navigation-panel__legal,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column .column-link--transparent:hover {
|
||||
flex: 0 0 18vw;
|
||||
@ -1370,7 +1370,7 @@ body.layout-single-column {
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent:active {
|
||||
margin: 6px 0 7px;
|
||||
@ -1414,8 +1414,8 @@ body.layout-single-column {
|
||||
background-color: rgba(24, 24, 25, 0.7);
|
||||
border: 0;
|
||||
}
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent.active,
|
||||
.layout-single-column a.column-link--transparent.active:hover,
|
||||
.layout-single-column a.column-link--transparent:active {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
@ -1603,7 +1603,7 @@ body.layout-single-column {
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--color-content-bg);
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account-card__header {
|
||||
padding: 0;
|
||||
border-radius: 7px 7px 0 0;
|
||||
@ -1629,7 +1629,7 @@ body.layout-single-column {
|
||||
margin: 0 0 10px;
|
||||
background-color: var(--color-content-bg);
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .account-card__header {
|
||||
padding: 0;
|
||||
border-radius: 7px 7px 0 0;
|
||||
@ -1753,13 +1753,13 @@ body.layout-single-column {
|
||||
.layout-single-column .search__popout__menu__item mark {
|
||||
color: var(--color-content-fg-bold);
|
||||
}
|
||||
.search__popout__menu__item.selected,
|
||||
.search__popout__menu__item:active,
|
||||
.search__popout__menu__item:focus,
|
||||
.search__popout__menu__item.selected,
|
||||
.search__popout__menu__item:active,
|
||||
.search__popout__menu__item:focus,
|
||||
.search__popout__menu__item:hover,
|
||||
.search__popout__menu__item.selected mark,
|
||||
.search__popout__menu__item:active mark,
|
||||
.search__popout__menu__item:focus mark,
|
||||
.search__popout__menu__item.selected mark,
|
||||
.search__popout__menu__item:active mark,
|
||||
.search__popout__menu__item:focus mark,
|
||||
.search__popout__menu__item:hover mark {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
@ -1775,11 +1775,11 @@ body.layout-single-column {
|
||||
.layout-single-column .search__input {
|
||||
padding: 13px;
|
||||
}
|
||||
.layout-single-column i.fa-search,
|
||||
.layout-single-column i.fa-search,
|
||||
.layout-single-column i.fa.active {
|
||||
transform: scale(1);
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .explore__search-header {
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
@ -1999,11 +1999,11 @@ body.layout-single-column {
|
||||
}
|
||||
.layout-single-column .icon-button,
|
||||
.layout-single-column .icon-button.inverted,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .status__content .status__content__spoiler-link {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .reply-indicator__content .status__content__spoiler-link,
|
||||
.layout-single-column .status__content .status__content__spoiler-link {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
@ -2017,8 +2017,8 @@ body.layout-single-column {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.layout-single-column .icon-button:active,
|
||||
.layout-single-column .icon-button:focus,
|
||||
.layout-single-column .icon-button:active,
|
||||
.layout-single-column .icon-button:focus,
|
||||
.layout-single-column .icon-button:hover {
|
||||
background-color: var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
@ -2103,9 +2103,9 @@ body.layout-single-column {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button,
|
||||
.layout-single-column .privacy-dropdown .icon-button.inverted.active {
|
||||
@ -2117,19 +2117,19 @@ body.layout-single-column {
|
||||
.layout-single-column .button.button-tertiary.button--destructive {
|
||||
background-color: transparent;
|
||||
}
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:active,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:focus,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:active,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:focus,
|
||||
.layout-single-column .button.button-tertiary.button--confirmation:hover {
|
||||
background-color: #79bd9a;
|
||||
}
|
||||
.layout-single-column .button.button-tertiary.button--destructive:active,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:focus,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:active,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:focus,
|
||||
.layout-single-column .button.button-tertiary.button--destructive:hover {
|
||||
background-color: #df405a;
|
||||
}
|
||||
.layout-single-column .app-body .block-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__secondary-button,
|
||||
.layout-single-column .app-body .block-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__cancel-button,
|
||||
.layout-single-column .app-body .confirmation-modal__secondary-button,
|
||||
.layout-single-column .app-body .mute-modal__cancel-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -2395,13 +2395,13 @@ body.layout-single-column {
|
||||
.layout-single-column .about__section:nth-child(3) .about__section__body {
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
.layout-single-column .about__meta,
|
||||
.layout-single-column .about__meta,
|
||||
.layout-single-column .about__section__title {
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
.layout-single-column .about__section.active .about__section__title {
|
||||
border-radius: 7px 7px 0 0;
|
||||
}
|
||||
@ -2413,13 +2413,13 @@ body.layout-single-column {
|
||||
|
||||
.layout-single-column .prose,
|
||||
.layout-single-column .prose p,
|
||||
.layout-single-column .prose b,
|
||||
.layout-single-column .prose h1,
|
||||
.layout-single-column .prose h2,
|
||||
.layout-single-column .prose h3,
|
||||
.layout-single-column .prose h4,
|
||||
.layout-single-column .prose h5,
|
||||
.layout-single-column .prose h6,
|
||||
.layout-single-column .prose b,
|
||||
.layout-single-column .prose h1,
|
||||
.layout-single-column .prose h2,
|
||||
.layout-single-column .prose h3,
|
||||
.layout-single-column .prose h4,
|
||||
.layout-single-column .prose h5,
|
||||
.layout-single-column .prose h6,
|
||||
.layout-single-column .prose strong,
|
||||
.layout-single-column .rules-list,
|
||||
.layout-single-column .about__domain-blocks__domain h6,
|
||||
@ -2484,4 +2484,4 @@ body.layout-single-column {
|
||||
.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */
|
||||
.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user