Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-01 04:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): create a timeline for the "Recent Changes" list

Browse Source
This commit is contained in:
Adorian Doran 2024-12-06 01:33:23 +02:00
parent 8f9c555bcb
commit cf5e98bff5
1 changed files with 98 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,13 @@
--menu-padding-size: 8px;
--menu-item-icon-vert-offset: 0;
--more-accented-background-color: var(--card-background-hover-color);
--more-accented-background-color: var(--card-background-hover-color);
--timeline-left-gap: 20px;
--timeline-right-gap: 20px;
--timeline-bullet-size: 10px;
--timeline-bullet-vertical-pos: .75em;
--timeline-connector-size: 4px;
/* Theme capabilities */
--tab-note-icons: true;
@ -194,6 +200,11 @@
--calendar-day-hover-background: var(--active-item-background-color);
--calendar-day-highlight-background: #80808024;
--timeline-bullet-color: gray;
--timeline-bullet-hover-color: white;
--timeline-connector-color: #464646;
--timeline-connector-active-color: #47403b;
--tooltip-background-color: rgba(255, 255, 255, 0.85);
--tooltip-foreground-color: #000000ba;
--tooltip-shadow-color: rgba(0, 0, 0, .15);
@ -332,6 +343,11 @@
--calendar-day-hover-background: var(--active-item-background-color);
--calendar-day-highlight-background: #8080805a;
--timeline-bullet-color: gray;
--timeline-bullet-hover-color: white;
--timeline-connector-color: #464646;
--timeline-connector-active-color: #47403b;
--tooltip-background-color: rgba(67, 67, 67, 0.86);
--tooltip-foreground-color: #ffffffeb;
--tooltip-shadow-color: rgba(0, 0, 0, 0.4);
@ -1200,6 +1216,85 @@ body .calendar-dropdown-widget .calendar-body a:hover {
padding-top: 12px;
}
/*
* Recent changes list
*/
.recent-changes-content > div {
padding-left: var(--timeline-left-gap);
}
/* Date headings */
.recent-changes-content > div > b {
display: block;
padding: 10px 0;
font-size: 1.25em;
font-weight: 300;
color: white;
}
.recent-changes-content ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Timeline items */
.recent-changes-content ul li,
.recent-changes-content > div > b {
position: relative;
margin: 0;
padding-left: var(--timeline-right-gap);
}
/* Timeline connector */
.recent-changes-content ul li::before,
.recent-changes-content > div > b::before {
position: absolute;
content: "";
top: var(--connector-top, 0);
left: calc((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2);
bottom: var(--connector-bottom, 0);
width: var(--timeline-connector-size);
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
background: var(--timeline-connector-color);
transition: background-color 400ms ease-in-out;
}
.recent-changes-content > div:hover {
--timeline-connector-color: var(--timeline-connector-active-color);
}
/* The first item of the timeline */
.recent-changes-content > div:first-child > *:first-child {
--connector-top: 50%;
--connector-radius: calc(var(--timeline-connector-size) / 2);
}
/* The last item of the timeline */
.recent-changes-content > div:last-child li:last-child {
--connector-bottom: 50%;
}
/* Timeline bullet */
.recent-changes-content ul li::after {
position: absolute;
content: "";
top: var(--timeline-bullet-vertical-pos);
left: 0;
width: var(--timeline-bullet-size);
height: var(--timeline-bullet-size);
border-radius: 50%;
background: var(--timeline-bullet-color);
transform: translateY(-50%);
}
/* Hovered timeline bullet */
.recent-changes-content ul li:hover::after {
background: var(--timeline-bullet-hover-color);
}
/*
* TEXT NOTES
*/
@ -1486,4 +1581,5 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
.note-list.grid-view .ck-content figure.image {
width: 25%;
}
}