chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

" "

Browse source
This commit is contained in:
Niléane 2023-07-15 01:06:28 +02:00
commit 6989b83fc9
No known key found for this signature in database
2 changed files with 180 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

180
TangerineUI-purple.css
View file

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

180
TangerineUI.css
View file

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