Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 19:22:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): recent changes list: add a hover effect for items

Browse Source
This commit is contained in:
Adorian Doran 2024-12-13 01:19:12 +02:00
parent 6f75932015
commit 1410a6cf7a
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/public/stylesheets/theme-next.css
View File

@ -68,7 +68,8 @@
--timeline-left-gap: 20px; --timeline-left-gap: 20px;
--timeline-right-gap: 20px; --timeline-right-gap: 20px;
--timeline-item-vertical-margin: 4px; --timeline-item-top-margin: 4px;
--timeline-item-bottom-margin: 12px;
--timeline-bullet-size: 10px; --timeline-bullet-size: 10px;
--timeline-bullet-vertical-pos: .75em; --timeline-bullet-vertical-pos: .75em;
--timeline-connector-size: 4px; --timeline-connector-size: 4px;

47
src/public/stylesheets/theme-next/shell.css
View File

@ -1054,17 +1054,13 @@ body .calendar-dropdown-widget .calendar-body a:hover {
margin: var(--bs-modal-padding); margin: var(--bs-modal-padding);
} }
.recent-changes-content > div {
padding-left: var(--timeline-left-gap);
}
/* Date headings */ /* Date headings */
.recent-changes-content > div > b { .recent-changes-content > div > b {
position: sticky; position: sticky;
display: block; display: block;
top: 0; top: 0;
background: var(--modal-background-color); background: var(--modal-background-color);
padding: 10px 0; padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
font-size: 1.25em; font-size: 1.25em;
font-weight: 300; font-weight: 300;
z-index: 10; z-index: 10;
@ -1077,23 +1073,21 @@ body .calendar-dropdown-widget .calendar-body a:hover {
} }
/* Timeline items */ /* Timeline items */
.recent-changes-content ul li,
.recent-changes-content > div > b {
margin: 0;
padding-left: var(--timeline-right-gap);
}
.recent-changes-content ul li { .recent-changes-content ul li {
display: flex; display: flex;
position: relative; position: relative;
color: transparent; /* Hide the "-" character */ margin: 0;
padding-top: var(--timeline-item-vertical-margin); padding-top: var(--timeline-item-top-margin);
padding-bottom: var(--timeline-item-vertical-margin); padding-bottom: var(--timeline-item-bottom-margin);
padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
padding-right: var(--timeline-left-gap);
color: var(--active-item-text-color);
} }
.recent-changes-content ul li span { .recent-changes-content ul li:hover {
/* Ensure spans are not transparent */ border-radius: 8px;
color: var(--active-item-text-color); background: var(--hover-item-background-color);
color: var(--hover-item-text-color);
} }
.recent-changes-content ul li .note-path { .recent-changes-content ul li .note-path {
@ -1106,7 +1100,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
display: inline-block; display: inline-block;
min-width: 80px; min-width: 80px;
vertical-align: top; vertical-align: top;
color: var(--active-item-text-color); color: var(--muted-text-color);
} }
/* Item title & path container */ /* Item title & path container */
@ -1114,6 +1108,17 @@ body .calendar-dropdown-widget .calendar-body a:hover {
display: inline-block; display: inline-block;
} }
/* Item title link */
.recent-changes-content ul li a {
color: currentColor
}
.recent-changes-content ul li a:hover {
text-decoration: underline;
}
/* Item path */ /* Item path */
.recent-changes-content ul li > span:nth-child(2) small { .recent-changes-content ul li > span:nth-child(2) small {
display: block; display: block;
@ -1127,7 +1132,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
position: absolute; position: absolute;
content: ""; content: "";
top: var(--connector-top, 0); top: var(--connector-top, 0);
left: calc((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2); left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
bottom: var(--connector-bottom, 0); bottom: var(--connector-bottom, 0);
width: var(--timeline-connector-size); width: var(--timeline-connector-size);
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0; border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
@ -1154,8 +1159,8 @@ body .calendar-dropdown-widget .calendar-body a:hover {
.recent-changes-content ul li::after { .recent-changes-content ul li::after {
position: absolute; position: absolute;
content: ""; content: "";
top: calc(var(--timeline-item-vertical-margin) + var(--timeline-bullet-vertical-pos)); top: calc(var(--timeline-item-top-margin) + var(--timeline-bullet-vertical-pos));
left: 0; left: var(--timeline-left-gap);
width: var(--timeline-bullet-size); width: var(--timeline-bullet-size);
height: var(--timeline-bullet-size); height: var(--timeline-bullet-size);
border-radius: 50%; border-radius: 50%;