feat: add coloured calendar system indicators
Add a selectable single-dot or per-system indicator mode. Date systems now carry configurable colours; results are cached per displayed month and invalidated when paths/settings change. Refine calendar hierarchy, spacing, hover, and today states.
This commit is contained in:
+60
-20
@@ -58,29 +58,34 @@
|
||||
|
||||
.waypoint-calendar {
|
||||
font-size: var(--font-ui-small);
|
||||
padding: 8px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 10px;
|
||||
background: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
.waypoint-calendar-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.waypoint-calendar-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
font-size: var(--font-ui-medium);
|
||||
font-weight: var(--font-semibold);
|
||||
padding: 4px 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.waypoint-calendar-breadcrumb .waypoint-clickable {
|
||||
color: var(--text-muted);
|
||||
cursor: var(--cursor-link, pointer);
|
||||
padding: 1px 4px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
transition: color 80ms, background-color 80ms;
|
||||
}
|
||||
|
||||
.waypoint-calendar-breadcrumb .waypoint-clickable:hover {
|
||||
@@ -90,23 +95,25 @@
|
||||
|
||||
.waypoint-calendar .waypoint-separator {
|
||||
color: var(--text-faint);
|
||||
margin: 0 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.waypoint-calendar-today-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.waypoint-calendar-today-group button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: var(--cursor-link, pointer);
|
||||
padding: 2px 6px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
transition: color 80ms, background-color 80ms;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.waypoint-calendar-today-group button:hover {
|
||||
@@ -121,30 +128,34 @@
|
||||
.waypoint-calendar table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px 3px;
|
||||
}
|
||||
|
||||
.waypoint-calendar th,
|
||||
.waypoint-calendar td {
|
||||
text-align: center;
|
||||
padding: 4px 2px;
|
||||
padding: 0;
|
||||
font-size: var(--font-ui-small);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.waypoint-calendar th {
|
||||
padding-bottom: 2px;
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-faint);
|
||||
font-size: calc(var(--font-ui-small) * 0.85);
|
||||
font-size: calc(var(--font-ui-small) * 0.78);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-weeknum {
|
||||
font-size: calc(var(--font-ui-small) * 0.75);
|
||||
width: 18px;
|
||||
font-size: calc(var(--font-ui-small) * 0.72);
|
||||
color: var(--text-faint);
|
||||
font-weight: var(--font-light);
|
||||
cursor: var(--cursor-link, pointer);
|
||||
padding: 2px 0;
|
||||
border-radius: 4px;
|
||||
transition: color 80ms, background-color 80ms;
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-weeknum:hover {
|
||||
@@ -154,42 +165,71 @@
|
||||
|
||||
.waypoint-calendar .waypoint-day {
|
||||
cursor: var(--cursor-link, pointer);
|
||||
min-height: var(--wp-cal-cell-size, 32px);
|
||||
padding: 2px 0;
|
||||
height: var(--wp-cal-cell-size, 32px);
|
||||
box-sizing: border-box;
|
||||
padding: 2px 0 7px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
transition: color 80ms, background-color 80ms, box-shadow 80ms;
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-day:hover {
|
||||
background-color: var(--background-modifier-active-hover);
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-day.other-month {
|
||||
opacity: 0.35;
|
||||
color: var(--text-faint);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-day.today {
|
||||
color: var(--text-accent);
|
||||
border: 1px solid var(--text-accent);
|
||||
font-weight: var(--font-semibold);
|
||||
box-shadow: inset 0 0 0 1px var(--text-accent);
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-day.today:hover {
|
||||
background-color: var(--background-modifier-active-hover);
|
||||
}
|
||||
|
||||
/* Single-dot mode preserves the pre-date-systems indicator. */
|
||||
.waypoint-calendar .waypoint-day.has-note::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 3px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--text-faint);
|
||||
margin: 0 auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.waypoint-calendar .waypoint-day.today.has-note::after {
|
||||
background-color: var(--text-accent);
|
||||
}
|
||||
|
||||
/* Colour-by-system mode: one dot per matching system, in Settings order. */
|
||||
.waypoint-day-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.waypoint-day-indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--waypoint-indicator-color);
|
||||
box-shadow: 0 0 0 1px var(--background-primary);
|
||||
}
|
||||
|
||||
/* ── Recent Files ── */
|
||||
|
||||
.waypoint-recent-filter {
|
||||
|
||||
Reference in New Issue
Block a user