Tweaked input style on logged out interaction modals
This commit is contained in:
parent
94f4f53cf6
commit
6c8338c9e0
3 changed files with 12 additions and 15 deletions
|
|
@ -3888,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .copypaste input,
|
.app-body .copypaste input,
|
||||||
.app-body .interaction-modal__login__input {
|
.app-body .interaction-modal__login__input {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-lines);
|
||||||
background-color: var(--color-accent-lines);
|
background-color: var(--color-content-secondary-bg);
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -3900,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login__input input::placeholder {
|
.app-body .interaction-modal__login__input input::placeholder {
|
||||||
color: var(--color-accent);
|
color: var(--color-content-fg-muted);
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
box-shadow: 0 0 0 2px var(--color-accent);
|
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login .search__popout {
|
.app-body .interaction-modal__login .search__popout {
|
||||||
border-color: var(--color-lines);
|
border-color: var(--color-lines);
|
||||||
|
|
@ -3914,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
padding: 8px 18px;
|
padding: 8px 18px;
|
||||||
}
|
}
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
background-color: hsla(0, 0%, 79.5%, 0.7);
|
background-color: hsla(0, 0%, 23.5%, 0.7);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
|
|
|
||||||
|
|
@ -3888,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .copypaste input,
|
.app-body .copypaste input,
|
||||||
.app-body .interaction-modal__login__input {
|
.app-body .interaction-modal__login__input {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-lines);
|
||||||
background-color: var(--color-accent-lines);
|
background-color: var(--color-content-secondary-bg);
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -3900,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login__input input::placeholder {
|
.app-body .interaction-modal__login__input input::placeholder {
|
||||||
color: var(--color-accent);
|
color: var(--color-content-fg-muted);
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
box-shadow: 0 0 0 2px var(--color-accent);
|
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login .search__popout {
|
.app-body .interaction-modal__login .search__popout {
|
||||||
border-color: var(--color-lines);
|
border-color: var(--color-lines);
|
||||||
|
|
@ -3914,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
padding: 8px 18px;
|
padding: 8px 18px;
|
||||||
}
|
}
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
background-color: hsla(0, 0%, 79.5%, 0.7);
|
background-color: hsla(0, 0%, 23.5%, 0.7);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
|
|
|
||||||
|
|
@ -3888,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
}
|
}
|
||||||
.app-body .copypaste input,
|
.app-body .copypaste input,
|
||||||
.app-body .interaction-modal__login__input {
|
.app-body .interaction-modal__login__input {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-lines);
|
||||||
background-color: var(--color-accent-lines);
|
background-color: var(--color-content-secondary-bg);
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -3900,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login__input input::placeholder {
|
.app-body .interaction-modal__login__input input::placeholder {
|
||||||
color: var(--color-accent);
|
color: var(--color-content-fg-muted);
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
box-shadow: 0 0 0 2px var(--color-accent);
|
|
||||||
}
|
}
|
||||||
.app-body .interaction-modal__login .search__popout {
|
.app-body .interaction-modal__login .search__popout {
|
||||||
border-color: var(--color-lines);
|
border-color: var(--color-lines);
|
||||||
|
|
@ -3914,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||||
padding: 8px 18px;
|
padding: 8px 18px;
|
||||||
}
|
}
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
background-color: hsla(0, 0%, 79.5%, 0.7);
|
background-color: hsla(0, 0%, 23.5%, 0.7);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.app-body .modal-root__overlay {
|
.app-body .modal-root__overlay {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue