Restore outline on secondary buttons
This commit is contained in:
parent
5561740571
commit
56843e29d4
3 changed files with 24 additions and 0 deletions
|
@ -5737,12 +5737,20 @@ a:is(.active,
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
|
outline: 1px solid var(--color-accent-lines);
|
||||||
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
||||||
background-color: var(--color-accent-focus);
|
background-color: var(--color-accent-focus);
|
||||||
color: var(--color-accent-fg);
|
color: var(--color-accent-fg);
|
||||||
outline-color: var(--color-lines-translucent);
|
outline-color: var(--color-lines-translucent);
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.app-body .button.button-secondary,
|
||||||
|
.app-body .button.button-tertiary {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.app-body .sign-in-banner .button,
|
.app-body .sign-in-banner .button,
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary) {
|
.app-body .button:is(.button-secondary, .button-tertiary) {
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
|
|
|
@ -5737,12 +5737,20 @@ a:is(.active,
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
|
outline: 1px solid var(--color-accent-lines);
|
||||||
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
||||||
background-color: var(--color-accent-focus);
|
background-color: var(--color-accent-focus);
|
||||||
color: var(--color-accent-fg);
|
color: var(--color-accent-fg);
|
||||||
outline-color: var(--color-lines-translucent);
|
outline-color: var(--color-lines-translucent);
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.app-body .button.button-secondary,
|
||||||
|
.app-body .button.button-tertiary {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.app-body .sign-in-banner .button,
|
.app-body .sign-in-banner .button,
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary) {
|
.app-body .button:is(.button-secondary, .button-tertiary) {
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
|
|
|
@ -5737,12 +5737,20 @@ a:is(.active,
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: var(--color-accent-bg);
|
background-color: var(--color-accent-bg);
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
|
outline: 1px solid var(--color-accent-lines);
|
||||||
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
.app-body .button:is(.button-secondary, .button-tertiary):hover {
|
||||||
background-color: var(--color-accent-focus);
|
background-color: var(--color-accent-focus);
|
||||||
color: var(--color-accent-fg);
|
color: var(--color-accent-fg);
|
||||||
outline-color: var(--color-lines-translucent);
|
outline-color: var(--color-lines-translucent);
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.app-body .button.button-secondary,
|
||||||
|
.app-body .button.button-tertiary {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.app-body .sign-in-banner .button,
|
.app-body .sign-in-banner .button,
|
||||||
.app-body .button:is(.button-secondary, .button-tertiary) {
|
.app-body .button:is(.button-secondary, .button-tertiary) {
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
|
|
Loading…
Reference in a new issue