change reply hover
This commit is contained in:
parent
7a2d1e7a07
commit
c81a75cd1f
|
@ -581,19 +581,66 @@ onUnmounted(() => {
|
||||||
> .reply {
|
> .reply {
|
||||||
border-top: solid 0.5px var(--divider);
|
border-top: solid 0.5px var(--divider);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&:not(:last-child) {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
@media (pointer: coarse) {
|
@media (pointer: coarse) {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .reply, .reply-to, .reply-to-more {
|
// Hover
|
||||||
transition: background-color 0.25s ease-in-out;
|
.reply :deep(.main), .reply-to, .reply-to-more, :deep(.more) {
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -12px -24px;
|
||||||
|
bottom: -0px;
|
||||||
|
background: var(--panelHighlight);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .2s;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
&.reply-to, &.reply-to-more {
|
||||||
|
&::before {
|
||||||
|
inset: 0px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.reply-to-more:first-of-type::before {
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -9999px;
|
||||||
|
background: var(--modalBg);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity .2s;
|
||||||
|
}
|
||||||
|
&.more::before {
|
||||||
|
inset: 0 !important;
|
||||||
|
}
|
||||||
|
&:hover, &:focus-within {
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// @media (pointer: coarse) {
|
||||||
|
// &:has(.button:focus-within) {
|
||||||
|
// z-index: 2;
|
||||||
|
// --X13: transparent;
|
||||||
|
// &::after {
|
||||||
|
// opacity: 1;
|
||||||
|
// backdrop-filter: var(--modalBgFilter);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--panelHighlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.max-width_500px {
|
&.max-width_500px {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
|
Loading…
Reference in New Issue