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

Some dark mode improvements : darker column backgrounds, better contrast for hashtag buttons and thread lines,

Browse source
This commit is contained in:
Niléane 2023-10-11 19:47:54 +02:00
commit d29daf574d
No known key found for this signature in database
4 changed files with 76 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
TangerineUI-purple.css
View file

@ -43,13 +43,13 @@
--color-secondary-bg: #1e162b;
--color-secondary-separator: #26232e;
--color-content-bg: #1a1a1a;
--color-content-bg: #111111;
--color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373;
--color-content-secondary-bg: #22212f;
--color-content-secondary-separator: rgba(64, 62, 89, 0.4);
--color-content-bg-focus: #222222;
--color-content-bg-focus: #1b1b1b;
--color-accent: #7a7af9;
--color-accent-focus: #5a47ff;
@ -988,6 +988,12 @@ body.layout-single-column {
width: 0;
height: 14px;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .status--in-thread .status__line {
border-color: var(--color-accent);
opacity: .3;
}
}
.layout-single-column .status__line.status__line--full {
height: 100%;
}
@ -1122,6 +1128,7 @@ body.layout-single-column {
.layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted);
font-size: 90%;
transition: all .1s;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
@ -1148,6 +1155,16 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button {
color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-content-fg);
}
}
/* ⭐ Action bar */
.layout-single-column .status__action-bar {

21
TangerineUI.css
View file

@ -43,13 +43,13 @@
--color-secondary-bg: #282015;
--color-secondary-separator: #25201c;
--color-content-bg: #1a1a1a;
--color-content-bg: #111111;
--color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373;
--color-content-secondary-bg: #292623;
--color-content-secondary-separator: rgba(77, 73, 70, 0.4);
--color-content-bg-focus: #222222;
--color-content-bg-focus: #1b1b1b;
--color-accent: #e68933;
--color-accent-focus: #ffa047;
@ -988,6 +988,12 @@ body.layout-single-column {
width: 0;
height: 14px;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .status--in-thread .status__line {
border-color: var(--color-accent);
opacity: .3;
}
}
.layout-single-column .status__line.status__line--full {
height: 100%;
}
@ -1122,6 +1128,7 @@ body.layout-single-column {
.layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted);
font-size: 90%;
transition: all .1s;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
@ -1148,6 +1155,16 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button {
color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-content-fg);
}
}
/* ⭐ Action bar */
.layout-single-column .status__action-bar {

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

@ -43,13 +43,13 @@
--color-secondary-bg: #1e162b;
--color-secondary-separator: #26232e;
--color-content-bg: #1a1a1a;
--color-content-bg: #111111;
--color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373;
--color-content-secondary-bg: #22212f;
--color-content-secondary-separator: rgba(64, 62, 89, 0.4);
--color-content-bg-focus: #222222;
--color-content-bg-focus: #1b1b1b;
--color-accent: #7a7af9;
--color-accent-focus: #5a47ff;
@ -988,6 +988,12 @@ body.layout-single-column {
width: 0;
height: 14px;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .status--in-thread .status__line {
border-color: var(--color-accent);
opacity: .3;
}
}
.layout-single-column .status__line.status__line--full {
height: 100%;
}
@ -1122,6 +1128,7 @@ body.layout-single-column {
.layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted);
font-size: 90%;
transition: all .1s;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
@ -1148,6 +1155,16 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button {
color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-content-fg);
}
}
/* ⭐ Action bar */
.layout-single-column .status__action-bar {

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

@ -43,13 +43,13 @@
--color-secondary-bg: #282015;
--color-secondary-separator: #25201c;
--color-content-bg: #1a1a1a;
--color-content-bg: #111111;
--color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373;
--color-content-secondary-bg: #292623;
--color-content-secondary-separator: rgba(77, 73, 70, 0.4);
--color-content-bg-focus: #222222;
--color-content-bg-focus: #1b1b1b;
--color-accent: #e68933;
--color-accent-focus: #ffa047;
@ -988,6 +988,12 @@ body.layout-single-column {
width: 0;
height: 14px;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .status--in-thread .status__line {
border-color: var(--color-accent);
opacity: .3;
}
}
.layout-single-column .status__line.status__line--full {
height: 100%;
}
@ -1122,6 +1128,7 @@ body.layout-single-column {
.layout-single-column .hashtag-bar .link-button {
color: var(--color-fg-muted);
font-size: 90%;
transition: all .1s;
}
.layout-single-column .hashtag-bar .link-button {
font-size: 80%;
@ -1148,6 +1155,16 @@ body.layout-single-column {
.layout-single-column .hashtag-bar a:hover span {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.layout-single-column .hashtag-bar a,
.layout-single-column .hashtag-bar .link-button {
color: var(--color-accent);
}
.layout-single-column .hashtag-bar a:hover,
.layout-single-column .hashtag-bar .link-button:hover {
color: var(--color-content-fg);
}
}
/* ⭐ Action bar */
.layout-single-column .status__action-bar {