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

Color adjustments, especially for the dark palettes

Browse source
This commit is contained in:
Niléane 2023-07-25 02:17:42 +02:00
commit 96007ea623
No known key found for this signature in database
4 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

17
TangerineUI-purple.css
View file

@ -39,23 +39,23 @@
--color-bg: #000000; --color-bg: #000000;
--color-fg: #d6d2e0; --color-fg: #d6d2e0;
--color-fg-muted: #655e6e; --color-fg-muted: #655e6e;
--color-secondary-bg: #0c0c0d; --color-secondary-bg: #1e162b;
--color-secondary-separator: #26232e; --color-secondary-separator: #26232e;
--color-content-bg: #111111; --color-content-bg: #1a1a1a;
--color-content-fg: #f2f2f2; --color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff; --color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373; --color-content-fg-muted: #737373;
--color-content-secondary-bg: #1f1b22; --color-content-secondary-bg: #22212f;
--color-content-secondary-separator: rgba(64, 62, 89, 0.4); --color-content-secondary-separator: rgba(64, 62, 89, 0.4);
--color-content-bg-focus: #181818; --color-content-bg-focus: #222222;
--color-accent: #7a7af9; --color-accent: #7a7af9;
--color-accent-focus: #5a47ff; --color-accent-focus: #5a47ff;
--color-accent-bg: #261f3c; --color-accent-bg: #261f3c;
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: var(--color-content-secondary-bg); --color-lines: var(--color-content-secondary-separator);
} }
} }
:root { :root {
@ -1237,8 +1237,8 @@ body.layout-single-column {
.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-lines);
color: var(--color-content-fg); 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 .account__section-headline a.active, .layout-single-column .account__section-headline a.active,
@ -1744,6 +1744,7 @@ body.layout-single-column {
/* 📰 Trending stories */ /* 📰 Trending stories */
.layout-single-column .story { .layout-single-column .story {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
transition: background-color .2s;
} }
.layout-single-column .story:not(:last-child) { .layout-single-column .story:not(:last-child) {
border-bottom: 2px solid var(--color-content-secondary-separator); border-bottom: 2px solid var(--color-content-secondary-separator);
@ -1753,7 +1754,7 @@ body.layout-single-column {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.layout-single-column .story:hover { .layout-single-column .story:hover {
background-color: var(--color-accent-bg); background-color: var(--color-content-bg-focus);
} }
.layout-single-column .story__details__publisher, .layout-single-column .story__details__publisher,
.layout-single-column .story__details__shared { .layout-single-column .story__details__shared {

13
TangerineUI.css
View file

@ -39,16 +39,16 @@
--color-bg: #000000; --color-bg: #000000;
--color-fg: #e0d6d1; --color-fg: #e0d6d1;
--color-fg-muted: #6e635e; --color-fg-muted: #6e635e;
--color-secondary-bg: #0d0c0c; --color-secondary-bg: #282015;
--color-secondary-separator: #25201c; --color-secondary-separator: #25201c;
--color-content-bg: #111111; --color-content-bg: #1a1a1a;
--color-content-fg: #f2f2f2; --color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff; --color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373; --color-content-fg-muted: #737373;
--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: #181818; --color-content-bg-focus: #222222;
--color-accent: #e68933; --color-accent: #e68933;
--color-accent-focus: #ffa047; --color-accent-focus: #ffa047;
@ -1237,8 +1237,8 @@ body.layout-single-column {
.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-lines);
color: var(--color-content-fg); 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 .account__section-headline a.active, .layout-single-column .account__section-headline a.active,
@ -1744,6 +1744,7 @@ body.layout-single-column {
/* 📰 Trending stories */ /* 📰 Trending stories */
.layout-single-column .story { .layout-single-column .story {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
transition: background-color .2s;
} }
.layout-single-column .story:not(:last-child) { .layout-single-column .story:not(:last-child) {
border-bottom: 2px solid var(--color-content-secondary-separator); border-bottom: 2px solid var(--color-content-secondary-separator);
@ -1753,7 +1754,7 @@ body.layout-single-column {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.layout-single-column .story:hover { .layout-single-column .story:hover {
background-color: var(--color-accent-bg); background-color: var(--color-content-bg-focus);
} }
.layout-single-column .story__details__publisher, .layout-single-column .story__details__publisher,
.layout-single-column .story__details__shared { .layout-single-column .story__details__shared {

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

@ -39,23 +39,23 @@
--color-bg: #000000; --color-bg: #000000;
--color-fg: #d6d2e0; --color-fg: #d6d2e0;
--color-fg-muted: #655e6e; --color-fg-muted: #655e6e;
--color-secondary-bg: #0c0c0d; --color-secondary-bg: #1e162b;
--color-secondary-separator: #26232e; --color-secondary-separator: #26232e;
--color-content-bg: #111111; --color-content-bg: #1a1a1a;
--color-content-fg: #f2f2f2; --color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff; --color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373; --color-content-fg-muted: #737373;
--color-content-secondary-bg: #1f1b22; --color-content-secondary-bg: #22212f;
--color-content-secondary-separator: rgba(64, 62, 89, 0.4); --color-content-secondary-separator: rgba(64, 62, 89, 0.4);
--color-content-bg-focus: #181818; --color-content-bg-focus: #222222;
--color-accent: #7a7af9; --color-accent: #7a7af9;
--color-accent-focus: #5a47ff; --color-accent-focus: #5a47ff;
--color-accent-bg: #261f3c; --color-accent-bg: #261f3c;
--color-accent-fg: #ffffff; --color-accent-fg: #ffffff;
--color-lines: var(--color-content-secondary-bg); --color-lines: var(--color-content-secondary-separator);
} }
} }
:root { :root {
@ -1237,8 +1237,8 @@ body.layout-single-column {
.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-lines);
color: var(--color-content-fg); 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 .account__section-headline a.active, .layout-single-column .account__section-headline a.active,
@ -1744,6 +1744,7 @@ body.layout-single-column {
/* 📰 Trending stories */ /* 📰 Trending stories */
.layout-single-column .story { .layout-single-column .story {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
transition: background-color .2s;
} }
.layout-single-column .story:not(:last-child) { .layout-single-column .story:not(:last-child) {
border-bottom: 2px solid var(--color-content-secondary-separator); border-bottom: 2px solid var(--color-content-secondary-separator);
@ -1753,7 +1754,7 @@ body.layout-single-column {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.layout-single-column .story:hover { .layout-single-column .story:hover {
background-color: var(--color-accent-bg); background-color: var(--color-content-bg-focus);
} }
.layout-single-column .story__details__publisher, .layout-single-column .story__details__publisher,
.layout-single-column .story__details__shared { .layout-single-column .story__details__shared {

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

@ -39,16 +39,16 @@
--color-bg: #000000; --color-bg: #000000;
--color-fg: #e0d6d1; --color-fg: #e0d6d1;
--color-fg-muted: #6e635e; --color-fg-muted: #6e635e;
--color-secondary-bg: #0d0c0c; --color-secondary-bg: #282015;
--color-secondary-separator: #25201c; --color-secondary-separator: #25201c;
--color-content-bg: #111111; --color-content-bg: #1a1a1a;
--color-content-fg: #f2f2f2; --color-content-fg: #f2f2f2;
--color-content-fg-bold: #ffffff; --color-content-fg-bold: #ffffff;
--color-content-fg-muted: #737373; --color-content-fg-muted: #737373;
--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: #181818; --color-content-bg-focus: #222222;
--color-accent: #e68933; --color-accent: #e68933;
--color-accent-focus: #ffa047; --color-accent-focus: #ffa047;
@ -1237,8 +1237,8 @@ body.layout-single-column {
.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-lines);
color: var(--color-content-fg); 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 .account__section-headline a.active, .layout-single-column .account__section-headline a.active,
@ -1744,6 +1744,7 @@ body.layout-single-column {
/* 📰 Trending stories */ /* 📰 Trending stories */
.layout-single-column .story { .layout-single-column .story {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
transition: background-color .2s;
} }
.layout-single-column .story:not(:last-child) { .layout-single-column .story:not(:last-child) {
border-bottom: 2px solid var(--color-content-secondary-separator); border-bottom: 2px solid var(--color-content-secondary-separator);
@ -1753,7 +1754,7 @@ body.layout-single-column {
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.layout-single-column .story:hover { .layout-single-column .story:hover {
background-color: var(--color-accent-bg); background-color: var(--color-content-bg-focus);
} }
.layout-single-column .story__details__publisher, .layout-single-column .story__details__publisher,
.layout-single-column .story__details__shared { .layout-single-column .story__details__shared {