https://ibb.co/8n4qwBMC
.IndexPage .DiscussionListItem {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
margin-bottom: 12px !important;
}
/* REVERSE & FASTER */
.IndexPage .DiscussionListItem {
position: relative;
}
/* Remove Flarum hover */
.IndexPage .DiscussionListItem:hover {
background-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
/* Lines first (fast) /
.IndexPage .DiscussionListItem::before,
.IndexPage .DiscussionListItem::after {
content: "";
position: absolute;
border: 1px solid transparent;
border-radius: 0.5rem;
transition: all 0.3s ease; / Faster: 0.3s */
pointer-events: none;
opacity: 0;
}
.IndexPage .DiscussionListItem::before {
top: -1px;
left: -1px;
right: 100%;
bottom: 100%;
border-top-color: #03a9f4;
border-left-color: #03a9f4;
}
.IndexPage .DiscussionListItem::after {
top: 100%;
left: 100%;
right: -1px;
bottom: -1px;
border-bottom-color: #03a9f4;
border-right-color: #03a9f4;
}
/* Lines show immediately on hover /
.IndexPage .DiscussionListItem:hover::before,
.IndexPage .DiscussionListItem:hover::after {
opacity: 1;
transition: all 0.3s ease; / Fast */
}
.IndexPage .DiscussionListItem:hover::before {
right: -1px;
bottom: -1px;
}
.IndexPage .DiscussionListItem:hover::after {
top: -1px;
left: -1px;
}
/* Border appears AFTER lines /
.IndexPage .DiscussionListItem:hover {
border-color: #03a9f4 !important;
transition: border-color 0.3s ease 0.2s !important; / 0.2s delay */
}
.IndexPage .DiscussionListItem:hover {
box-shadow: 0 0 8px rgba(3, 169, 244, 0.3) !important;
}
/* TARGET ONLY SIDENAV DROPDOWN */
.IndexPage .sideNav .Dropdown-menu {
background-color: #fafdff !important;
border: 1px solid #e1e4e8 !important;
border-radius: 0.5rem !important;
padding-left: 15px !important;
width: 200px !important;
min-width: 200px !important;
}
.IndexPage-newDiscussion {
width: 200px !important;
min-width: 200px !important;
}
