contact messages: trigger hover follows the navbar tab idiom
The filled button now hovers like nitro's accent nav tab: text --ink (falling back to --bg on themes without it) switching to the bright --tab-hover with the same text-shadow glow, instead of the invented fill shift.
This commit is contained in:
1 parent
78b1fbc16e
commit
f3c288c76c
1 file changed
+7
-7
@@ -881,16 +881,16 @@ article {
|
||||
/* {contact: Label} directive: the button opening the visitor contact
|
||||
panel (docs/messages.md). A standalone accent button in the article
|
||||
flow; .has-unread (set by contact-main) marks a new admin reply.
|
||||
Filled with the accent (text in --bg, the pairing the accent is
|
||||
designed to contrast with); hover nudges the fill toward the page
|
||||
text color — a subtle shift that works in either color scheme — and
|
||||
keyboard focus gets an outline instead of a restyle. */
|
||||
Filled with the accent and hovered like the accent-filled navbar tab:
|
||||
text in --ink (nitro; --bg elsewhere), hover switches to the bright
|
||||
--tab-hover with the same glow (text-shadow, which fades dimmer, so
|
||||
the color stays bright). */
|
||||
.contact-trigger {
|
||||
position: relative;
|
||||
margin: 0.3em 0.1em;
|
||||
padding: 0.35em 1.1em;
|
||||
font: inherit;
|
||||
color: var(--bg);
|
||||
color: var(--ink, var(--bg));
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 1.2em;
|
||||
@@ -898,8 +898,8 @@ article {
|
||||
}
|
||||
|
||||
.contact-trigger:hover {
|
||||
background: color-mix(in srgb, var(--accent) 85%, var(--text));
|
||||
border-color: color-mix(in srgb, var(--accent) 85%, var(--text));
|
||||
color: var(--tab-hover, var(--bg));
|
||||
text-shadow: 0 0 0.1em;
|
||||
}
|
||||
|
||||
.contact-trigger:focus-visible {
|
||||
|
||||
Reference in new issue
Block a user