Tweaked background colors in the compose field
This commit is contained in:
parent
5710a66d98
commit
3293ff16f6
3 changed files with 25 additions and 6 deletions
|
@ -941,11 +941,13 @@ body.app-body {
|
||||||
.app-body .navigation-bar {
|
.app-body .navigation-bar {
|
||||||
border-radius: 8px 8px 0 0;
|
border-radius: 8px 8px 0 0;
|
||||||
padding: 23px 15px 22px 18px;
|
padding: 23px 15px 22px 18px;
|
||||||
background-color: var(--color-content-secondary-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-top: 1px solid var(--color-lines);
|
border-top: 1px solid var(--color-lines);
|
||||||
border-left: 1px solid var(--color-lines);
|
border-left: 1px solid var(--color-lines);
|
||||||
border-right: 1px solid var(--color-lines);
|
border-right: 1px solid var(--color-lines);
|
||||||
transition: border-color .2s;
|
transition:
|
||||||
|
background-color .2s,
|
||||||
|
border-color .2s;
|
||||||
}
|
}
|
||||||
.app-body .navigation-bar strong {
|
.app-body .navigation-bar strong {
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
|
@ -975,6 +977,10 @@ body.app-body {
|
||||||
.app-body .compose-form__highlightable:focus-within {
|
.app-body .compose-form__highlightable:focus-within {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||||
|
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||||
|
background-color: var(--color-content-secondary-bg);
|
||||||
|
}
|
||||||
.app-body .compose-form__highlightable.active {
|
.app-body .compose-form__highlightable.active {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
@ -1229,6 +1235,7 @@ body.app-body {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--color-lines);
|
border: 1px solid var(--color-lines);
|
||||||
background-color: var(--color-content-bg);
|
background-color: var(--color-content-bg);
|
||||||
|
transition: all .2s;
|
||||||
}
|
}
|
||||||
.app-body .poll__option input[type=text]:focus {
|
.app-body .poll__option input[type=text]:focus {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
|
|
|
@ -941,11 +941,13 @@ body.app-body {
|
||||||
.app-body .navigation-bar {
|
.app-body .navigation-bar {
|
||||||
border-radius: 8px 8px 0 0;
|
border-radius: 8px 8px 0 0;
|
||||||
padding: 23px 15px 22px 18px;
|
padding: 23px 15px 22px 18px;
|
||||||
background-color: var(--color-content-secondary-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-top: 1px solid var(--color-lines);
|
border-top: 1px solid var(--color-lines);
|
||||||
border-left: 1px solid var(--color-lines);
|
border-left: 1px solid var(--color-lines);
|
||||||
border-right: 1px solid var(--color-lines);
|
border-right: 1px solid var(--color-lines);
|
||||||
transition: border-color .2s;
|
transition:
|
||||||
|
background-color .2s,
|
||||||
|
border-color .2s;
|
||||||
}
|
}
|
||||||
.app-body .navigation-bar strong {
|
.app-body .navigation-bar strong {
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
|
@ -975,6 +977,10 @@ body.app-body {
|
||||||
.app-body .compose-form__highlightable:focus-within {
|
.app-body .compose-form__highlightable:focus-within {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||||
|
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||||
|
background-color: var(--color-content-secondary-bg);
|
||||||
|
}
|
||||||
.app-body .compose-form__highlightable.active {
|
.app-body .compose-form__highlightable.active {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -941,11 +941,13 @@ body.app-body {
|
||||||
.app-body .navigation-bar {
|
.app-body .navigation-bar {
|
||||||
border-radius: 8px 8px 0 0;
|
border-radius: 8px 8px 0 0;
|
||||||
padding: 23px 15px 22px 18px;
|
padding: 23px 15px 22px 18px;
|
||||||
background-color: var(--color-content-secondary-bg);
|
background-color: var(--color-content-bg);
|
||||||
border-top: 1px solid var(--color-lines);
|
border-top: 1px solid var(--color-lines);
|
||||||
border-left: 1px solid var(--color-lines);
|
border-left: 1px solid var(--color-lines);
|
||||||
border-right: 1px solid var(--color-lines);
|
border-right: 1px solid var(--color-lines);
|
||||||
transition: border-color .2s;
|
transition:
|
||||||
|
background-color .2s,
|
||||||
|
border-color .2s;
|
||||||
}
|
}
|
||||||
.app-body .navigation-bar strong {
|
.app-body .navigation-bar strong {
|
||||||
color: var(--color-content-fg);
|
color: var(--color-content-fg);
|
||||||
|
@ -975,6 +977,10 @@ body.app-body {
|
||||||
.app-body .compose-form__highlightable:focus-within {
|
.app-body .compose-form__highlightable:focus-within {
|
||||||
border-color: var(--color-accent);
|
border-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||||
|
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||||
|
background-color: var(--color-content-secondary-bg);
|
||||||
|
}
|
||||||
.app-body .compose-form__highlightable.active {
|
.app-body .compose-form__highlightable.active {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue