add hover effect

This commit is contained in:
Tienson Qin
2026-04-25 16:41:00 +08:00
parent fe651961e4
commit ac884716f3

View File

@@ -1072,8 +1072,18 @@ html.is-mac {
.bottom-property-pill {
@apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 h-6 max-w-full text-base;
background-color: var(--ls-secondary-background-color);
box-shadow: inset 0 0 0 1px var(--ls-border-color);
box-shadow: none;
position: relative;
overflow: hidden;
}
.bottom-property-pill::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow: inset 0 0 0 1px var(--ls-border-color);
pointer-events: none;
}
.bottom-property-pill.bottom-property-pill-wrap {
@@ -1085,6 +1095,10 @@ html.is-mac {
.bottom-property-pill-focusable:focus {
outline: none;
box-shadow: none;
}
.bottom-property-pill-focusable:focus::after {
box-shadow: inset 0 0 0 1px var(--ls-link-text-color);
}
@@ -1108,6 +1122,11 @@ html.is-mac {
@apply min-w-0;
}
.bottom-property-content .property-value-inner[data-type="node"] .jtrigger:hover .page-ref,
.bottom-property-content .property-value-inner[data-type="node"] .jtrigger:focus-visible .page-ref {
color: var(--ls-link-text-hover-color);
}
.bottom-property-pill .property-key-inner {
@apply flex items-center min-w-0;
}
@@ -1147,10 +1166,10 @@ html.is-mac {
@apply inline-flex items-center justify-end pr-0 py-2 px-2 border-0 cursor-pointer opacity-0 pointer-events-none;
position: absolute;
right: -10px;
top: 0;
height: 100%;
top: 1px;
height: calc(100% - 2px);
color: var(--ls-primary-text-color);
background: linear-gradient(to left, var(--ls-primary-background-color) 65%, transparent);
background: linear-gradient(to left, var(--ls-secondary-background-color) 65%, transparent);
}
.bottom-property-pill:hover .bottom-property-edit-icon,