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

Just trying to beautify some things

Browse source
This commit is contained in:
Niléane 2023-11-15 23:13:16 +01:00
commit 3d5cf7e82c
No known key found for this signature in database
4 changed files with 304 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

114
TangerineUI-purple.css
View file

@ -315,7 +315,8 @@ body.layout-single-column {
/* *️⃣ Icons /* *️⃣ Icons
-------- */ -------- */
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -353,13 +354,15 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) .account__header__tabs__buttons .icon-close
)
path { path {
display: none; display: none;
} }
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -397,7 +400,8 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) { .account__header__tabs__buttons .icon-close
) {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
@ -441,7 +445,14 @@ body.layout-single-column {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0 4px -2px 0;
} }
.layout-single-column button.icon-button:is(.reblogPrivate, .reblogPrivate:hover, .disabled, .disabled:hover) .icon-retweet { .layout-single-column
button.icon-button:is(
.reblogPrivate,
.reblogPrivate:hover,
.disabled,
.disabled:hover
)
.icon-retweet {
background-image: var(--icon-boost-accent); background-image: var(--icon-boost-accent);
opacity: .2; opacity: .2;
pointer-events: none; pointer-events: none;
@ -646,7 +657,13 @@ body.layout-single-column {
.layout-single-column .icon-file-text { .layout-single-column .icon-file-text {
background-image: var(--icon-link); background-image: var(--icon-link);
} }
.layout-single-column :is(.account--panel, .follow-request-banner, .account__relationship) .icon-times { .layout-single-column
:is(
.account--panel,
.follow-request-banner,
.account__relationship
)
.icon-times {
background-image: var(--icon-reject); background-image: var(--icon-reject);
} }
.layout-single-column .account--panel .icon-times, .layout-single-column .account--panel .icon-times,
@ -757,11 +774,13 @@ body.layout-single-column {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
.layout-single-column .compose-form .layout-single-column .compose-form
:is(.autosuggest-textarea__suggestions, :is(
.autosuggest-textarea__suggestions,
.autosuggest-textarea__textarea, .autosuggest-textarea__textarea,
.autosuggest-textarea__suggestions__item, .autosuggest-textarea__suggestions__item,
.compose-form__buttons-wrapper, .compose-form__buttons-wrapper,
.compose-form__modifiers), .compose-form__modifiers
),
.layout-single-column .compose-form__autosuggest-wrapper { .layout-single-column .compose-form__autosuggest-wrapper {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg); color: var(--color-content-fg);
@ -1210,7 +1229,8 @@ body.layout-single-column {
right: 0; right: 0;
} }
.layout-single-column .status--in-thread .layout-single-column .status--in-thread
:is(.attachment-list, :is(
.attachment-list,
.audio-player, .audio-player,
.hashtag-bar, .hashtag-bar,
.media-gallery, .media-gallery,
@ -1218,7 +1238,8 @@ body.layout-single-column {
.status-card, .status-card,
.status__action-bar, .status__action-bar,
.status__content, .status__content,
.video-player) { .video-player
) {
margin-left: 0; margin-left: 0;
width: auto; width: auto;
} }
@ -1275,12 +1296,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */
.layout-single-column .status__wrapper.focusable:focus, .layout-single-column
.layout-single-column .detailed-status__wrapper.focusable:focus, :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus,
.layout-single-column .focusable:focus .detailed-status, .layout-single-column
.layout-single-column .focusable:focus .detailed-status__action-bar, :is(.focusable, .status__wrapper.focusable):focus
.layout-single-column .status__wrapper.focusable:focus .detailed-status, :is(.detailed-status, .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);
} }
@ -1436,10 +1456,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 8px; margin-top: 8px;
gap: 8px; gap: 8px;
} }
.layout-single-column .status__action-bar button, .layout-single-column
.layout-single-column .status__action-bar .status__action-bar__dropdown, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .detailed-status__action-bar button, :is(button, .status__action-bar__dropdown) {
.layout-single-column .detailed-status__action-bar .status__action-bar__dropdown {
transition: all .3s; transition: all .3s;
} }
.layout-single-column .status__action-bar button:last-child { .layout-single-column .status__action-bar button:last-child {
@ -1449,14 +1468,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .status__action-bar .icon-button.disabled { .layout-single-column .status__action-bar .icon-button.disabled {
pointer-events: none; pointer-events: none;
} }
.layout-single-column .status__action-bar .icon-button:active, .layout-single-column
.layout-single-column .status__action-bar .icon-button.active:active, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .status__action-bar .icon-button:focus, .icon-button:is(
.layout-single-column .status__action-bar .icon-button.active:focus, :active,
.layout-single-column .detailed-status__action-bar .icon-button:active, .active:active,
.layout-single-column .detailed-status__action-bar .icon-button.active:active, :focus,
.layout-single-column .detailed-status__action-bar .icon-button:focus, .active:focus
.layout-single-column .detailed-status__action-bar .icon-button.active:focus { ) {
background-color: transparent; background-color: transparent;
} }
.layout-single-column .icon-button.star-icon.deactivate>.icon-star, .layout-single-column .icon-button.star-icon.deactivate>.icon-star,
@ -2038,7 +2057,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Horizontal selectors /* ⏺️ Horizontal selectors
(used to navigate subsections on the Explore, Live Feeds and Account pages) */ (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.layout-single-column :is(.account__section-headline, .notification__filter-bar) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar) {
background: var(--color-accent-bg); background: var(--color-accent-bg);
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
} }
@ -2067,7 +2087,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-right: 0; border-right: 0;
} }
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button) {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-bg) inset; box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
@ -2076,26 +2098,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
max-height: 45px; max-height: 45px;
padding: 14px 10px; padding: 14px 10px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) .icon { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
.icon {
margin-top: -1.5px; margin-top: -1.5px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
color: var(--color-accent); color: var(--color-accent);
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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, 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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active::before {
display: none; display: none;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) button { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
button {
background-color: transparent; background-color: transparent;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button, a.active, button.active)::after {
display: block; display: block;
position: absolute; position: absolute;
content: " "; content: " ";
@ -2111,11 +2145,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: unset; transform: unset;
border: 0; border: 0;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):last-child::after {
display: none; display: none;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
} }

114
TangerineUI.css
View file

@ -315,7 +315,8 @@ body.layout-single-column {
/* *️⃣ Icons /* *️⃣ Icons
-------- */ -------- */
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -353,13 +354,15 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) .account__header__tabs__buttons .icon-close
)
path { path {
display: none; display: none;
} }
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -397,7 +400,8 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) { .account__header__tabs__buttons .icon-close
) {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
@ -441,7 +445,14 @@ body.layout-single-column {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0 4px -2px 0;
} }
.layout-single-column button.icon-button:is(.reblogPrivate, .reblogPrivate:hover, .disabled, .disabled:hover) .icon-retweet { .layout-single-column
button.icon-button:is(
.reblogPrivate,
.reblogPrivate:hover,
.disabled,
.disabled:hover
)
.icon-retweet {
background-image: var(--icon-boost-accent); background-image: var(--icon-boost-accent);
opacity: .2; opacity: .2;
pointer-events: none; pointer-events: none;
@ -646,7 +657,13 @@ body.layout-single-column {
.layout-single-column .icon-file-text { .layout-single-column .icon-file-text {
background-image: var(--icon-link); background-image: var(--icon-link);
} }
.layout-single-column :is(.account--panel, .follow-request-banner, .account__relationship) .icon-times { .layout-single-column
:is(
.account--panel,
.follow-request-banner,
.account__relationship
)
.icon-times {
background-image: var(--icon-reject); background-image: var(--icon-reject);
} }
.layout-single-column .account--panel .icon-times, .layout-single-column .account--panel .icon-times,
@ -757,11 +774,13 @@ body.layout-single-column {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
.layout-single-column .compose-form .layout-single-column .compose-form
:is(.autosuggest-textarea__suggestions, :is(
.autosuggest-textarea__suggestions,
.autosuggest-textarea__textarea, .autosuggest-textarea__textarea,
.autosuggest-textarea__suggestions__item, .autosuggest-textarea__suggestions__item,
.compose-form__buttons-wrapper, .compose-form__buttons-wrapper,
.compose-form__modifiers), .compose-form__modifiers
),
.layout-single-column .compose-form__autosuggest-wrapper { .layout-single-column .compose-form__autosuggest-wrapper {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg); color: var(--color-content-fg);
@ -1210,7 +1229,8 @@ body.layout-single-column {
right: 0; right: 0;
} }
.layout-single-column .status--in-thread .layout-single-column .status--in-thread
:is(.attachment-list, :is(
.attachment-list,
.audio-player, .audio-player,
.hashtag-bar, .hashtag-bar,
.media-gallery, .media-gallery,
@ -1218,7 +1238,8 @@ body.layout-single-column {
.status-card, .status-card,
.status__action-bar, .status__action-bar,
.status__content, .status__content,
.video-player) { .video-player
) {
margin-left: 0; margin-left: 0;
width: auto; width: auto;
} }
@ -1275,12 +1296,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */
.layout-single-column .status__wrapper.focusable:focus, .layout-single-column
.layout-single-column .detailed-status__wrapper.focusable:focus, :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus,
.layout-single-column .focusable:focus .detailed-status, .layout-single-column
.layout-single-column .focusable:focus .detailed-status__action-bar, :is(.focusable, .status__wrapper.focusable):focus
.layout-single-column .status__wrapper.focusable:focus .detailed-status, :is(.detailed-status, .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);
} }
@ -1436,10 +1456,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 8px; margin-top: 8px;
gap: 8px; gap: 8px;
} }
.layout-single-column .status__action-bar button, .layout-single-column
.layout-single-column .status__action-bar .status__action-bar__dropdown, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .detailed-status__action-bar button, :is(button, .status__action-bar__dropdown) {
.layout-single-column .detailed-status__action-bar .status__action-bar__dropdown {
transition: all .3s; transition: all .3s;
} }
.layout-single-column .status__action-bar button:last-child { .layout-single-column .status__action-bar button:last-child {
@ -1449,14 +1468,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .status__action-bar .icon-button.disabled { .layout-single-column .status__action-bar .icon-button.disabled {
pointer-events: none; pointer-events: none;
} }
.layout-single-column .status__action-bar .icon-button:active, .layout-single-column
.layout-single-column .status__action-bar .icon-button.active:active, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .status__action-bar .icon-button:focus, .icon-button:is(
.layout-single-column .status__action-bar .icon-button.active:focus, :active,
.layout-single-column .detailed-status__action-bar .icon-button:active, .active:active,
.layout-single-column .detailed-status__action-bar .icon-button.active:active, :focus,
.layout-single-column .detailed-status__action-bar .icon-button:focus, .active:focus
.layout-single-column .detailed-status__action-bar .icon-button.active:focus { ) {
background-color: transparent; background-color: transparent;
} }
.layout-single-column .icon-button.star-icon.deactivate>.icon-star, .layout-single-column .icon-button.star-icon.deactivate>.icon-star,
@ -2038,7 +2057,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Horizontal selectors /* ⏺️ Horizontal selectors
(used to navigate subsections on the Explore, Live Feeds and Account pages) */ (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.layout-single-column :is(.account__section-headline, .notification__filter-bar) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar) {
background: var(--color-accent-bg); background: var(--color-accent-bg);
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
} }
@ -2067,7 +2087,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-right: 0; border-right: 0;
} }
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button) {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-bg) inset; box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
@ -2076,26 +2098,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
max-height: 45px; max-height: 45px;
padding: 14px 10px; padding: 14px 10px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) .icon { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
.icon {
margin-top: -1.5px; margin-top: -1.5px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
color: var(--color-accent); color: var(--color-accent);
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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, 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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active::before {
display: none; display: none;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) button { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
button {
background-color: transparent; background-color: transparent;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button, a.active, button.active)::after {
display: block; display: block;
position: absolute; position: absolute;
content: " "; content: " ";
@ -2111,11 +2145,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: unset; transform: unset;
border: 0; border: 0;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):last-child::after {
display: none; display: none;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
} }

114
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -315,7 +315,8 @@ body.layout-single-column {
/* *️⃣ Icons /* *️⃣ Icons
-------- */ -------- */
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -353,13 +354,15 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) .account__header__tabs__buttons .icon-close
)
path { path {
display: none; display: none;
} }
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -397,7 +400,8 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) { .account__header__tabs__buttons .icon-close
) {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
@ -441,7 +445,14 @@ body.layout-single-column {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0 4px -2px 0;
} }
.layout-single-column button.icon-button:is(.reblogPrivate, .reblogPrivate:hover, .disabled, .disabled:hover) .icon-retweet { .layout-single-column
button.icon-button:is(
.reblogPrivate,
.reblogPrivate:hover,
.disabled,
.disabled:hover
)
.icon-retweet {
background-image: var(--icon-boost-accent); background-image: var(--icon-boost-accent);
opacity: .2; opacity: .2;
pointer-events: none; pointer-events: none;
@ -646,7 +657,13 @@ body.layout-single-column {
.layout-single-column .icon-file-text { .layout-single-column .icon-file-text {
background-image: var(--icon-link); background-image: var(--icon-link);
} }
.layout-single-column :is(.account--panel, .follow-request-banner, .account__relationship) .icon-times { .layout-single-column
:is(
.account--panel,
.follow-request-banner,
.account__relationship
)
.icon-times {
background-image: var(--icon-reject); background-image: var(--icon-reject);
} }
.layout-single-column .account--panel .icon-times, .layout-single-column .account--panel .icon-times,
@ -757,11 +774,13 @@ body.layout-single-column {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
.layout-single-column .compose-form .layout-single-column .compose-form
:is(.autosuggest-textarea__suggestions, :is(
.autosuggest-textarea__suggestions,
.autosuggest-textarea__textarea, .autosuggest-textarea__textarea,
.autosuggest-textarea__suggestions__item, .autosuggest-textarea__suggestions__item,
.compose-form__buttons-wrapper, .compose-form__buttons-wrapper,
.compose-form__modifiers), .compose-form__modifiers
),
.layout-single-column .compose-form__autosuggest-wrapper { .layout-single-column .compose-form__autosuggest-wrapper {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg); color: var(--color-content-fg);
@ -1210,7 +1229,8 @@ body.layout-single-column {
right: 0; right: 0;
} }
.layout-single-column .status--in-thread .layout-single-column .status--in-thread
:is(.attachment-list, :is(
.attachment-list,
.audio-player, .audio-player,
.hashtag-bar, .hashtag-bar,
.media-gallery, .media-gallery,
@ -1218,7 +1238,8 @@ body.layout-single-column {
.status-card, .status-card,
.status__action-bar, .status__action-bar,
.status__content, .status__content,
.video-player) { .video-player
) {
margin-left: 0; margin-left: 0;
width: auto; width: auto;
} }
@ -1275,12 +1296,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */
.layout-single-column .status__wrapper.focusable:focus, .layout-single-column
.layout-single-column .detailed-status__wrapper.focusable:focus, :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus,
.layout-single-column .focusable:focus .detailed-status, .layout-single-column
.layout-single-column .focusable:focus .detailed-status__action-bar, :is(.focusable, .status__wrapper.focusable):focus
.layout-single-column .status__wrapper.focusable:focus .detailed-status, :is(.detailed-status, .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);
} }
@ -1436,10 +1456,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 8px; margin-top: 8px;
gap: 8px; gap: 8px;
} }
.layout-single-column .status__action-bar button, .layout-single-column
.layout-single-column .status__action-bar .status__action-bar__dropdown, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .detailed-status__action-bar button, :is(button, .status__action-bar__dropdown) {
.layout-single-column .detailed-status__action-bar .status__action-bar__dropdown {
transition: all .3s; transition: all .3s;
} }
.layout-single-column .status__action-bar button:last-child { .layout-single-column .status__action-bar button:last-child {
@ -1449,14 +1468,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .status__action-bar .icon-button.disabled { .layout-single-column .status__action-bar .icon-button.disabled {
pointer-events: none; pointer-events: none;
} }
.layout-single-column .status__action-bar .icon-button:active, .layout-single-column
.layout-single-column .status__action-bar .icon-button.active:active, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .status__action-bar .icon-button:focus, .icon-button:is(
.layout-single-column .status__action-bar .icon-button.active:focus, :active,
.layout-single-column .detailed-status__action-bar .icon-button:active, .active:active,
.layout-single-column .detailed-status__action-bar .icon-button.active:active, :focus,
.layout-single-column .detailed-status__action-bar .icon-button:focus, .active:focus
.layout-single-column .detailed-status__action-bar .icon-button.active:focus { ) {
background-color: transparent; background-color: transparent;
} }
.layout-single-column .icon-button.star-icon.deactivate>.icon-star, .layout-single-column .icon-button.star-icon.deactivate>.icon-star,
@ -2038,7 +2057,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Horizontal selectors /* ⏺️ Horizontal selectors
(used to navigate subsections on the Explore, Live Feeds and Account pages) */ (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.layout-single-column :is(.account__section-headline, .notification__filter-bar) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar) {
background: var(--color-accent-bg); background: var(--color-accent-bg);
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
} }
@ -2067,7 +2087,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-right: 0; border-right: 0;
} }
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button) {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-bg) inset; box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
@ -2076,26 +2098,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
max-height: 45px; max-height: 45px;
padding: 14px 10px; padding: 14px 10px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) .icon { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
.icon {
margin-top: -1.5px; margin-top: -1.5px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
color: var(--color-accent); color: var(--color-accent);
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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, 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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active::before {
display: none; display: none;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) button { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
button {
background-color: transparent; background-color: transparent;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button, a.active, button.active)::after {
display: block; display: block;
position: absolute; position: absolute;
content: " "; content: " ";
@ -2111,11 +2145,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: unset; transform: unset;
border: 0; border: 0;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):last-child::after {
display: none; display: none;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
} }

114
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -315,7 +315,8 @@ body.layout-single-column {
/* *️⃣ Icons /* *️⃣ Icons
-------- */ -------- */
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -353,13 +354,15 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) .account__header__tabs__buttons .icon-close
)
path { path {
display: none; display: none;
} }
.layout-single-column .layout-single-column
:is(.icon-bookmark, :is(
.icon-bookmark,
.icon-star, .icon-star,
.icon-retweet, .icon-retweet,
.icon-reply, .icon-reply,
@ -397,7 +400,8 @@ body.layout-single-column {
.icon-check, .icon-check,
.status__action-bar .icon-close, .status__action-bar .icon-close,
.detailed-status__action-bar .icon-close, .detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close) { .account__header__tabs__buttons .icon-close
) {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
@ -441,7 +445,14 @@ body.layout-single-column {
background-image: var(--icon-boost); background-image: var(--icon-boost);
margin: 0 4px -2px 0; margin: 0 4px -2px 0;
} }
.layout-single-column button.icon-button:is(.reblogPrivate, .reblogPrivate:hover, .disabled, .disabled:hover) .icon-retweet { .layout-single-column
button.icon-button:is(
.reblogPrivate,
.reblogPrivate:hover,
.disabled,
.disabled:hover
)
.icon-retweet {
background-image: var(--icon-boost-accent); background-image: var(--icon-boost-accent);
opacity: .2; opacity: .2;
pointer-events: none; pointer-events: none;
@ -646,7 +657,13 @@ body.layout-single-column {
.layout-single-column .icon-file-text { .layout-single-column .icon-file-text {
background-image: var(--icon-link); background-image: var(--icon-link);
} }
.layout-single-column :is(.account--panel, .follow-request-banner, .account__relationship) .icon-times { .layout-single-column
:is(
.account--panel,
.follow-request-banner,
.account__relationship
)
.icon-times {
background-image: var(--icon-reject); background-image: var(--icon-reject);
} }
.layout-single-column .account--panel .icon-times, .layout-single-column .account--panel .icon-times,
@ -757,11 +774,13 @@ body.layout-single-column {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
.layout-single-column .compose-form .layout-single-column .compose-form
:is(.autosuggest-textarea__suggestions, :is(
.autosuggest-textarea__suggestions,
.autosuggest-textarea__textarea, .autosuggest-textarea__textarea,
.autosuggest-textarea__suggestions__item, .autosuggest-textarea__suggestions__item,
.compose-form__buttons-wrapper, .compose-form__buttons-wrapper,
.compose-form__modifiers), .compose-form__modifiers
),
.layout-single-column .compose-form__autosuggest-wrapper { .layout-single-column .compose-form__autosuggest-wrapper {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg); color: var(--color-content-fg);
@ -1210,7 +1229,8 @@ body.layout-single-column {
right: 0; right: 0;
} }
.layout-single-column .status--in-thread .layout-single-column .status--in-thread
:is(.attachment-list, :is(
.attachment-list,
.audio-player, .audio-player,
.hashtag-bar, .hashtag-bar,
.media-gallery, .media-gallery,
@ -1218,7 +1238,8 @@ body.layout-single-column {
.status-card, .status-card,
.status__action-bar, .status__action-bar,
.status__content, .status__content,
.video-player) { .video-player
) {
margin-left: 0; margin-left: 0;
width: auto; width: auto;
} }
@ -1275,12 +1296,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Posts when in focus */ /* ⏺️ Posts when in focus */
.layout-single-column .status__wrapper.focusable:focus, .layout-single-column
.layout-single-column .detailed-status__wrapper.focusable:focus, :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus,
.layout-single-column .focusable:focus .detailed-status, .layout-single-column
.layout-single-column .focusable:focus .detailed-status__action-bar, :is(.focusable, .status__wrapper.focusable):focus
.layout-single-column .status__wrapper.focusable:focus .detailed-status, :is(.detailed-status, .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);
} }
@ -1436,10 +1456,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 8px; margin-top: 8px;
gap: 8px; gap: 8px;
} }
.layout-single-column .status__action-bar button, .layout-single-column
.layout-single-column .status__action-bar .status__action-bar__dropdown, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .detailed-status__action-bar button, :is(button, .status__action-bar__dropdown) {
.layout-single-column .detailed-status__action-bar .status__action-bar__dropdown {
transition: all .3s; transition: all .3s;
} }
.layout-single-column .status__action-bar button:last-child { .layout-single-column .status__action-bar button:last-child {
@ -1449,14 +1468,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.layout-single-column .status__action-bar .icon-button.disabled { .layout-single-column .status__action-bar .icon-button.disabled {
pointer-events: none; pointer-events: none;
} }
.layout-single-column .status__action-bar .icon-button:active, .layout-single-column
.layout-single-column .status__action-bar .icon-button.active:active, :is(.status__action-bar, .detailed-status__action-bar)
.layout-single-column .status__action-bar .icon-button:focus, .icon-button:is(
.layout-single-column .status__action-bar .icon-button.active:focus, :active,
.layout-single-column .detailed-status__action-bar .icon-button:active, .active:active,
.layout-single-column .detailed-status__action-bar .icon-button.active:active, :focus,
.layout-single-column .detailed-status__action-bar .icon-button:focus, .active:focus
.layout-single-column .detailed-status__action-bar .icon-button.active:focus { ) {
background-color: transparent; background-color: transparent;
} }
.layout-single-column .icon-button.star-icon.deactivate>.icon-star, .layout-single-column .icon-button.star-icon.deactivate>.icon-star,
@ -2038,7 +2057,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* ⏺️ Horizontal selectors /* ⏺️ Horizontal selectors
(used to navigate subsections on the Explore, Live Feeds and Account pages) */ (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.layout-single-column :is(.account__section-headline, .notification__filter-bar) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar) {
background: var(--color-accent-bg); background: var(--color-accent-bg);
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
} }
@ -2067,7 +2087,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-right: 0; border-right: 0;
} }
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button) { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button) {
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
color: var(--color-accent); color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-bg) inset; box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
@ -2076,26 +2098,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
max-height: 45px; max-height: 45px;
padding: 14px 10px; padding: 14px 10px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) .icon { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
.icon {
margin-top: -1.5px; margin-top: -1.5px;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):hover {
background-color: var(--color-accent-lines); background-color: var(--color-accent-lines);
color: var(--color-accent); color: var(--color-accent);
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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, 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 :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active::before {
display: none; display: none;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) button { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
button {
background-color: transparent; background-color: transparent;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button, a.active, button.active)::after {
display: block; display: block;
position: absolute; position: absolute;
content: " "; content: " ";
@ -2111,11 +2145,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transform: unset; transform: unset;
border: 0; border: 0;
} }
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button):last-child::after {
display: none; display: none;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.layout-single-column :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { .layout-single-column
:is(.account__section-headline, .notification__filter-bar)
:is(a, button).active {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
} }