chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved styling for secondary buttons

Browse source
This commit is contained in:
Niléane 2024-03-13 01:11:01 +01:00
parent f4119f51ae
commit c34c4ebf16
No known key found for this signature in database
3 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
TangerineUI-cherry.css
View file

@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.confirmation-modal__secondary-button, .confirmation-modal__secondary-button,
.mute-modal__cancel-button .mute-modal__cancel-button
):not(:hover) { ):not(:hover) {
background-color: transparent; background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
color: var(--color-accent);
}
.app-body
:is(
.block-modal__cancel-button,
.confirmation-modal__cancel-button,
.confirmation-modal__secondary-button,
.mute-modal__cancel-button
):is(:active, :hover) {
background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
color: var(--color-accent); color: var(--color-accent);
} }
.app-body .app-body
@ -5811,9 +5821,7 @@ a:is(.active,
color: var(--color-accent); color: var(--color-accent);
} }
.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: color-mix(in srgb, var(--color-accent), transparent 70%);
color: var(--color-accent-fg);
outline-color: var(--color-lines-translucent);
} }
.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) {

16
TangerineUI-purple.css
View file

@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.confirmation-modal__secondary-button, .confirmation-modal__secondary-button,
.mute-modal__cancel-button .mute-modal__cancel-button
):not(:hover) { ):not(:hover) {
background-color: transparent; background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
color: var(--color-accent);
}
.app-body
:is(
.block-modal__cancel-button,
.confirmation-modal__cancel-button,
.confirmation-modal__secondary-button,
.mute-modal__cancel-button
):is(:active, :hover) {
background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
color: var(--color-accent); color: var(--color-accent);
} }
.app-body .app-body
@ -5811,9 +5821,7 @@ a:is(.active,
color: var(--color-accent); color: var(--color-accent);
} }
.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: color-mix(in srgb, var(--color-accent), transparent 70%);
color: var(--color-accent-fg);
outline-color: var(--color-lines-translucent);
} }
.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) {

16
TangerineUI.css
View file

@ -5360,7 +5360,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.confirmation-modal__secondary-button, .confirmation-modal__secondary-button,
.mute-modal__cancel-button .mute-modal__cancel-button
):not(:hover) { ):not(:hover) {
background-color: transparent; background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
color: var(--color-accent);
}
.app-body
:is(
.block-modal__cancel-button,
.confirmation-modal__cancel-button,
.confirmation-modal__secondary-button,
.mute-modal__cancel-button
):is(:active, :hover) {
background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
color: var(--color-accent); color: var(--color-accent);
} }
.app-body .app-body
@ -5811,9 +5821,7 @@ a:is(.active,
color: var(--color-accent); color: var(--color-accent);
} }
.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: color-mix(in srgb, var(--color-accent), transparent 70%);
color: var(--color-accent-fg);
outline-color: var(--color-lines-translucent);
} }
.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) {