diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css index 8bcf6f4d6..a94caaa0c 100644 --- a/app/assets/stylesheets/bubble.css +++ b/app/assets/stylesheets/bubble.css @@ -7,7 +7,7 @@ --bubble-size-default: 4rem; block-size: var(--bubble-size, var(--bubble-size-default)); - color: var(--color-ink); + color: var(--card-content-color); container-type: inline-size; font-size: 1.4rem; font-weight: bold; diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index efa38d521..562c1dcb1 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -470,7 +470,7 @@ .card__collection { background-color: transparent; - color: var(--card-text-color); + color: var(--card-content-color); } .card__header { @@ -478,7 +478,6 @@ padding-block-start: calc(var(--card-padding-block) / 2); } - .card__collection, .card__tags { color: inherit; } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index c340494fd..de83b807c 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -5,6 +5,7 @@ .card { --avatar-size: 2.75em; --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas)); + --card-content-color: color-mix(in srgb, var(--card-color) 30%, var(--color-ink)); --card-text-color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink)); --card-border: 1px solid color-mix(in srgb, var(--card-color) 33%, var(--color-ink-inverted)); --card-header-space: 1ch; @@ -135,7 +136,7 @@ } .card__content { - color: var(--color-ink); + color: var(--card-content-color); contain: inline-size; flex: 2 1 auto; max-inline-size: 100%; @@ -143,9 +144,10 @@ .card__title { --input-border-radius: 0; + --input-color: var(--card-content-color); --lines: 3; - color: var(--color-ink); + color: var(--card-content-color); font-size: var(--text-xx-large); font-weight: 900; line-height: 1.3;