natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change reply hover

This commit is contained in:
Freeplay 2023-02-25 00:19:39 -05:00
parent 7a2d1e7a07
commit c81a75cd1f
1 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/client/src/components/MkNoteDetailed.vue
View File

@ -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;
&:hover { &::before {
background-color: var(--panelHighlight); 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);
// }
// }
// }
} }
&.max-width_500px { &.max-width_500px {
font-size: 0.9em; font-size: 0.9em;