From 7718c030c56e46bfc2bf5774f14127f0d416cb8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Sat, 31 Aug 2024 21:37:47 +0200 Subject: [PATCH] Improved contrast on poll results --- TangerineUI-cherry.css | 16 ++++++++-------- TangerineUI-lagoon.css | 16 ++++++++-------- TangerineUI-purple.css | 16 ++++++++-------- TangerineUI.css | 16 ++++++++-------- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 46d327f..3ece57d 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -1956,7 +1956,7 @@ body.app-body { overflow: hidden; } .app-body :is(.status, .detailed-status) .poll__option { - border: 1px solid var(--color-lines); + border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); font-weight: 500; padding: 8px; @@ -2025,6 +2025,7 @@ body.app-body { position: absolute; right: 3px; height: 20px; + color: var(--color-accent); } .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; @@ -2032,7 +2033,7 @@ body.app-body { } .app-body .poll__chart { background: var(--color-lines); - opacity: .5; + opacity: .8; height: auto; border-radius: 8px 0 0 8px; position: absolute; @@ -2042,27 +2043,26 @@ body.app-body { } @media (prefers-color-scheme: dark) { .app-body .poll__chart { - opacity: .65; + opacity: 1; } } .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { - background: var(--color-confirm-bg); - opacity: 1; + background: var(--color-confirm); + opacity: .5; } .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; - color: var(--color-accent); } .app-body .poll__option:has(.poll__voted) + .poll__chart { - background-color: var(--color-accent-bg); + background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { - border-color: var(--color-confirm-bg); + border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); color: var(--color-content-fg); background-color: transparent; background-size: 20px; diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css index 56b06c5..8d5890a 100644 --- a/TangerineUI-lagoon.css +++ b/TangerineUI-lagoon.css @@ -1956,7 +1956,7 @@ body.app-body { overflow: hidden; } .app-body :is(.status, .detailed-status) .poll__option { - border: 1px solid var(--color-lines); + border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); font-weight: 500; padding: 8px; @@ -2025,6 +2025,7 @@ body.app-body { position: absolute; right: 3px; height: 20px; + color: var(--color-accent); } .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; @@ -2032,7 +2033,7 @@ body.app-body { } .app-body .poll__chart { background: var(--color-lines); - opacity: .5; + opacity: .8; height: auto; border-radius: 8px 0 0 8px; position: absolute; @@ -2042,27 +2043,26 @@ body.app-body { } @media (prefers-color-scheme: dark) { .app-body .poll__chart { - opacity: .65; + opacity: 1; } } .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { - background: var(--color-confirm-bg); - opacity: 1; + background: var(--color-confirm); + opacity: .5; } .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; - color: var(--color-accent); } .app-body .poll__option:has(.poll__voted) + .poll__chart { - background-color: var(--color-accent-bg); + background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { - border-color: var(--color-confirm-bg); + border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); color: var(--color-content-fg); background-color: transparent; background-size: 20px; diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index d519287..bf09aaa 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1956,7 +1956,7 @@ body.app-body { overflow: hidden; } .app-body :is(.status, .detailed-status) .poll__option { - border: 1px solid var(--color-lines); + border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); font-weight: 500; padding: 8px; @@ -2025,6 +2025,7 @@ body.app-body { position: absolute; right: 3px; height: 20px; + color: var(--color-accent); } .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; @@ -2032,7 +2033,7 @@ body.app-body { } .app-body .poll__chart { background: var(--color-lines); - opacity: .5; + opacity: .8; height: auto; border-radius: 8px 0 0 8px; position: absolute; @@ -2042,27 +2043,26 @@ body.app-body { } @media (prefers-color-scheme: dark) { .app-body .poll__chart { - opacity: .65; + opacity: 1; } } .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { - background: var(--color-confirm-bg); - opacity: 1; + background: var(--color-confirm); + opacity: .5; } .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; - color: var(--color-accent); } .app-body .poll__option:has(.poll__voted) + .poll__chart { - background-color: var(--color-accent-bg); + background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { - border-color: var(--color-confirm-bg); + border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); color: var(--color-content-fg); background-color: transparent; background-size: 20px; diff --git a/TangerineUI.css b/TangerineUI.css index 469fe89..6fde6cf 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1956,7 +1956,7 @@ body.app-body { overflow: hidden; } .app-body :is(.status, .detailed-status) .poll__option { - border: 1px solid var(--color-lines); + border: 1px solid var(--color-lines-translucent); color: var(--color-content-fg); font-weight: 500; padding: 8px; @@ -2025,6 +2025,7 @@ body.app-body { position: absolute; right: 3px; height: 20px; + color: var(--color-accent); } .app-body .poll__option:has(+ .poll__chart.leading) .poll__voted { right: 28px; @@ -2032,7 +2033,7 @@ body.app-body { } .app-body .poll__chart { background: var(--color-lines); - opacity: .5; + opacity: .8; height: auto; border-radius: 8px 0 0 8px; position: absolute; @@ -2042,27 +2043,26 @@ body.app-body { } @media (prefers-color-scheme: dark) { .app-body .poll__chart { - opacity: .65; + opacity: 1; } } .app-body .poll__chart.leading, .app-body .muted .poll__chart.leading, .app-body .poll__option:has(.poll__voted) + .poll__chart.leading { - background: var(--color-confirm-bg); - opacity: 1; + background: var(--color-confirm); + opacity: .5; } .app-body .poll__option:has(.poll__voted) { border-color: var(--color-accent); background-color: transparent; - color: var(--color-accent); } .app-body .poll__option:has(.poll__voted) + .poll__chart { - background-color: var(--color-accent-bg); + background-color: color-mix(in srgb, var(--color-accent), transparent 70%); opacity: 1; } .app-body .poll__option:has(+ .poll__chart.leading), .app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) { - border-color: var(--color-confirm-bg); + border-color: color-mix(in srgb, var(--color-confirm), transparent 30%); color: var(--color-content-fg); background-color: transparent; background-size: 20px;