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

New look for the hashtag bar on posts

Browse source
This commit is contained in:
Niléane 2023-10-09 12:33:02 +02:00
commit 88ed86034c
No known key found for this signature in database
4 changed files with 88 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
TangerineUI-purple.css
View file

@ -1112,12 +1112,33 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button { .layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted); color: var(--color-fg-muted);
font-size: 90%;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
margin-left: 3px;
}
.layout-single-column .hashtag-bar a {
background-color: var(--color-content-secondary-bg);
transition: all .3s; transition: all .3s;
padding: 3px 8px;
border-radius: 8px;
} }
.layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover { .layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-accent); color: var(--color-accent);
} }
.layout-single-column .hashtag-bar a:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .hashtag-bar a:active,
.layout-single-column .hashtag-bar a:focus {
color: var(--color-accent-fg);
background-color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
/* ⭐ Action bar */ /* ⭐ Action bar */
.layout-single-column .status__action-bar { .layout-single-column .status__action-bar {
@ -3073,6 +3094,7 @@ body.layout-single-column {
.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);
border-radius: 8px;
} }
.layout-single-column .account__header__tabs__buttons .icon-button { .layout-single-column .account__header__tabs__buttons .icon-button {
padding: 3px; padding: 3px;

22
TangerineUI.css
View file

@ -1112,12 +1112,33 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button { .layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted); color: var(--color-fg-muted);
font-size: 90%;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
margin-left: 3px;
}
.layout-single-column .hashtag-bar a {
background-color: var(--color-content-secondary-bg);
transition: all .3s; transition: all .3s;
padding: 3px 8px;
border-radius: 8px;
} }
.layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover { .layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-accent); color: var(--color-accent);
} }
.layout-single-column .hashtag-bar a:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .hashtag-bar a:active,
.layout-single-column .hashtag-bar a:focus {
color: var(--color-accent-fg);
background-color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
/* ⭐ Action bar */ /* ⭐ Action bar */
.layout-single-column .status__action-bar { .layout-single-column .status__action-bar {
@ -3073,6 +3094,7 @@ body.layout-single-column {
.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);
border-radius: 8px;
} }
.layout-single-column .account__header__tabs__buttons .icon-button { .layout-single-column .account__header__tabs__buttons .icon-button {
padding: 3px; padding: 3px;

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

@ -1112,12 +1112,33 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button { .layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted); color: var(--color-fg-muted);
font-size: 90%;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
margin-left: 3px;
}
.layout-single-column .hashtag-bar a {
background-color: var(--color-content-secondary-bg);
transition: all .3s; transition: all .3s;
padding: 3px 8px;
border-radius: 8px;
} }
.layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover { .layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-accent); color: var(--color-accent);
} }
.layout-single-column .hashtag-bar a:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .hashtag-bar a:active,
.layout-single-column .hashtag-bar a:focus {
color: var(--color-accent-fg);
background-color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
/* ⭐ Action bar */ /* ⭐ Action bar */
.layout-single-column .status__action-bar { .layout-single-column .status__action-bar {
@ -3073,6 +3094,7 @@ body.layout-single-column {
.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);
border-radius: 8px;
} }
.layout-single-column .account__header__tabs__buttons .icon-button { .layout-single-column .account__header__tabs__buttons .icon-button {
padding: 3px; padding: 3px;

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

@ -1112,12 +1112,33 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a, .layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button { .layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted); color: var(--color-fg-muted);
font-size: 90%;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
margin-left: 3px;
}
.layout-single-column .hashtag-bar a {
background-color: var(--color-content-secondary-bg);
transition: all .3s; transition: all .3s;
padding: 3px 8px;
border-radius: 8px;
} }
.layout-single-column .hashtag-bar a:hover, .layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover { .layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-accent); color: var(--color-accent);
} }
.layout-single-column .hashtag-bar a:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .hashtag-bar a:active,
.layout-single-column .hashtag-bar a:focus {
color: var(--color-accent-fg);
background-color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
/* ⭐ Action bar */ /* ⭐ Action bar */
.layout-single-column .status__action-bar { .layout-single-column .status__action-bar {
@ -3073,6 +3094,7 @@ body.layout-single-column {
.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);
border-radius: 8px;
} }
.layout-single-column .account__header__tabs__buttons .icon-button { .layout-single-column .account__header__tabs__buttons .icon-button {
padding: 3px; padding: 3px;