diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css index ec1676ea..7171bd39 100644 --- a/packages/console/app/src/routes/index.css +++ b/packages/console/app/src/routes/index.css @@ -797,15 +797,29 @@ body { border-radius: 6px; border: 1px solid var(--color-border-weak); padding: 20px; - display: flex; - flex-direction: column; - gap: 12px; width: 100%; + /* Use color, not -moz-text-fill-color, for normal text */ + color: var(--color-text-strong); + @media (max-width: 30rem) { padding-bottom: 80px; } + &:not(:focus) { + color: var(--color-text-strong); + } + + &::placeholder { + color: var(--color-text-weak); + opacity: 1; + } + + /* Optional legacy */ + &::-moz-placeholder { + color: var(--color-text-weak); + opacity: 1; + } } input:focus { diff --git a/packages/console/app/src/routes/zen/index.css b/packages/console/app/src/routes/zen/index.css index 823da272..88ca0762 100644 --- a/packages/console/app/src/routes/zen/index.css +++ b/packages/console/app/src/routes/zen/index.css @@ -113,6 +113,8 @@ body { } + + [data-component="container"] { max-width: 67.5rem; margin: 0 auto; @@ -516,14 +518,29 @@ body { border-radius: 6px; border: 1px solid var(--color-border-weak); padding: 20px; - display: flex; - flex-direction: column; - gap: 12px; width: 100%; + /* Use color, not -moz-text-fill-color, for normal text */ + color: var(--color-text-strong); + @media (max-width: 30rem) { padding-bottom: 80px; } + + &:not(:focus) { + color: var(--color-text-strong); + } + + &::placeholder { + color: var(--color-text-weak); + opacity: 1; + } + + /* Optional legacy */ + &::-moz-placeholder { + color: var(--color-text-weak); + opacity: 1; + } } input:focus {