593 lines
11 KiB
CSS
593 lines
11 KiB
CSS
.event-calendar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.event-calendar .group {
|
|
text-align: center;
|
|
width: 36px;
|
|
height: 26px;
|
|
margin: 0 4px 4px 0;
|
|
border-top: 10px solid rgba(255, 140, 140, 1);
|
|
border-right: 1px solid rgba(20, 20, 20, 0.7);
|
|
border-bottom: 1px solid rgba(20, 20, 20, 0.7);
|
|
border-left: 1px solid rgba(20, 20, 20, 0.2);
|
|
border-radius: 4px;
|
|
color: black;
|
|
background-color: aliceblue;
|
|
}
|
|
|
|
.event-calendar .group.month-0 {
|
|
border-top: 10px solid rgb(176, 224, 230); /* January - icy blue */
|
|
}
|
|
|
|
.event-calendar .group.month-1 {
|
|
border-top: 10px solid rgb(173, 216, 230); /* February - pale winter blue */
|
|
}
|
|
|
|
.event-calendar .group.month-2 {
|
|
border-top: 10px solid rgb(144, 238, 144); /* March - early spring green */
|
|
}
|
|
|
|
.event-calendar .group.month-3 {
|
|
border-top: 10px solid rgb(60, 179, 113); /* April - fresh growth green */
|
|
}
|
|
|
|
.event-calendar .group.month-4 {
|
|
border-top: 10px solid rgb(255, 182, 193); /* May - soft blossom pink */
|
|
}
|
|
|
|
.event-calendar .group.month-5 {
|
|
border-top: 10px solid rgb(255, 160, 122); /* June - warm peach */
|
|
}
|
|
|
|
.event-calendar .group.month-6 {
|
|
border-top: 10px solid rgb(255, 0, 183); /* July - deep pink */
|
|
}
|
|
|
|
.event-calendar .group.month-7 {
|
|
border-top: 10px solid rgb(255, 38, 0); /* August - hot red-orange */
|
|
}
|
|
|
|
.event-calendar .group.month-8 {
|
|
border-top: 10px solid rgb(255, 215, 0); /* September - golden transition */
|
|
}
|
|
|
|
.event-calendar .group.month-9 {
|
|
border-top: 10px solid rgb(210, 105, 30); /* October - autumn brown/orange */
|
|
}
|
|
|
|
.event-calendar .group.month-10 {
|
|
border-top: 10px solid rgb(128, 0, 128); /* November - deep purple */
|
|
}
|
|
|
|
.event-calendar .group.month-11 {
|
|
border-top: 10px solid rgb(220, 20, 60); /* December - festive red */
|
|
}
|
|
|
|
.event-calendar .group.highlight {
|
|
border-top: 10px solid rgba(255, 223, 65, 1);
|
|
}
|
|
|
|
.event-calendar .group .icon {
|
|
font-size: 15px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.event-calendar .group .icon.primary {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.event-calendar .group .hover-card {
|
|
display: none;
|
|
width: 30vw;
|
|
text-align: center;
|
|
background-color: #fcff7f;
|
|
border-radius: 4px;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.event-calendar .group .hover-card .event {
|
|
border-top: 1px solid black;
|
|
padding: 0 2vw 0 2vw;
|
|
}
|
|
|
|
.event-calendar .group .hover-card .month-year {
|
|
background-color: black;
|
|
color: aliceblue;
|
|
margin: 0;
|
|
padding: 5px 0 5px;
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
.event-calendar .group .hover-card .event .date {
|
|
}
|
|
|
|
.event-calendar .group .hover-card .event .title {
|
|
font-size: 2.7vw;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.event-calendar .group .hover-card .event .text {
|
|
}
|
|
|
|
.event-calendar .group:hover {
|
|
cursor: pointer;
|
|
border-top: 10px solid rgba(255, 140, 140, 1);
|
|
border-right: 1px solid rgba(20, 20, 20, 1);
|
|
border-bottom: 1px solid rgba(20, 20, 20, 1);
|
|
border-left: 1px solid rgba(20, 20, 20, 1);
|
|
}
|
|
|
|
.event-calendar .group:hover .hover-card {
|
|
display: block;
|
|
position: fixed;
|
|
top: 5vh;
|
|
right: 5vw;
|
|
}
|
|
|
|
/* --- GTD Calendar (fork) --- */
|
|
|
|
.gtd-calendar-placeholder .gtd-calendar-loading {
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.gtd-calendar-error {
|
|
border: 1px solid #c0392b;
|
|
border-radius: 4px;
|
|
padding: 0.5em 0.75em;
|
|
color: #c0392b;
|
|
}
|
|
|
|
.gtd-calendar-debug {
|
|
border: 1px dashed currentColor;
|
|
border-radius: 6px;
|
|
padding: 0.75em 1em;
|
|
}
|
|
|
|
.gtd-calendar-debug-meta {
|
|
font-size: 0.85em;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.gtd-calendar-debug-events li {
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
.gtd-calendar-clickable {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.gtd-calendar-warning {
|
|
font-size: 0.85em;
|
|
color: #b9770e;
|
|
margin: 0.15em 0;
|
|
}
|
|
|
|
.gtd-calendar-debug-events li {
|
|
border-radius: 4px;
|
|
padding: 0.1em 0.4em;
|
|
}
|
|
|
|
/* Phase 3: calendar grid + unscheduled section */
|
|
|
|
.gtd-calendar-title {
|
|
margin: 0.2em 0 0.5em 0;
|
|
}
|
|
|
|
.gtd-calendar-empty {
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.gtd-calendar .gtd-calendar-clickable {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.event-calendar .group .hover-card .event.gtd-calendar-clickable:hover {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.gtd-unscheduled {
|
|
margin-top: 0.75em;
|
|
border-top: 1px dashed currentColor;
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.gtd-unscheduled-title {
|
|
margin: 0 0 0.3em 0;
|
|
font-size: 0.95em;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.gtd-unscheduled-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gtd-unscheduled-list li {
|
|
display: inline-block;
|
|
border: 1px solid rgba(20, 20, 20, 0.4);
|
|
border-radius: 4px;
|
|
padding: 0.1em 0.5em;
|
|
margin: 0 0.3em 0.3em 0;
|
|
background-color: aliceblue;
|
|
color: black;
|
|
}
|
|
|
|
.gtd-unscheduled-list li:hover {
|
|
border-color: rgba(20, 20, 20, 1);
|
|
}
|
|
|
|
.gtd-calendar-debug-meta {
|
|
font-size: 0.8em;
|
|
opacity: 0.6;
|
|
margin: 0.5em 0 0 0;
|
|
}
|
|
|
|
/* view: month-grid */
|
|
|
|
.gtd-month-grid-label {
|
|
margin: 0 0 0.3em 0;
|
|
}
|
|
|
|
.gtd-month-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-head {
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
opacity: 0.8;
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-cell {
|
|
min-height: 4.5em;
|
|
border: 1px solid rgba(128, 128, 128, 0.35);
|
|
border-radius: 4px;
|
|
padding: 0.15em 0.25em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-cell.outside {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-cell.today {
|
|
border: 2px solid rgba(255, 200, 0, 0.95);
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-day {
|
|
display: block;
|
|
text-align: right;
|
|
font-size: 0.75em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.gtd-month-grid .gtd-grid-chip {
|
|
font-size: 0.72em;
|
|
border-radius: 3px;
|
|
padding: 0 0.3em;
|
|
margin-bottom: 2px;
|
|
color: black;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* gtd-kanban board */
|
|
|
|
.gtd-kanban {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.gtd-kanban-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.gtd-kanban-column {
|
|
border: 1px solid rgba(128, 128, 128, 0.35);
|
|
border-radius: 6px;
|
|
background-color: rgba(128, 128, 128, 0.06);
|
|
min-height: 3em;
|
|
}
|
|
|
|
.gtd-kanban-column-header {
|
|
font-weight: bold;
|
|
font-size: 0.85em;
|
|
padding: 0.4em 0.6em;
|
|
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.gtd-kanban-cards {
|
|
padding: 0.4em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4em;
|
|
}
|
|
|
|
.gtd-list-more-control {
|
|
position: relative;
|
|
align-self: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
margin: 0.15em 0;
|
|
}
|
|
|
|
.gtd-list-more {
|
|
font: inherit;
|
|
font-size: 0.82em;
|
|
line-height: 1.3;
|
|
padding: 0.3em 0.7em;
|
|
border: 1px solid rgba(128, 128, 128, 0.55);
|
|
border-radius: 4px;
|
|
background-color: rgba(128, 128, 128, 0.1);
|
|
color: var(--joplin-color, inherit);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gtd-list-more:hover {
|
|
background-color: rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
.gtd-list-more:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.gtd-list-more-tooltip {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.35em);
|
|
z-index: 10;
|
|
width: max-content;
|
|
max-width: 16em;
|
|
transform: translateX(-50%);
|
|
padding: 0.3em 0.5em;
|
|
border: 1px solid rgba(128, 128, 128, 0.55);
|
|
border-radius: 4px;
|
|
background-color: var(--joplin-background-color, white);
|
|
color: var(--joplin-color, black);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
font-size: 0.78em;
|
|
line-height: 1.3;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.12s ease-in-out;
|
|
}
|
|
|
|
.gtd-list-more-control:hover .gtd-list-more-tooltip,
|
|
.gtd-list-more-control:focus-within .gtd-list-more-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.gtd-kanban-card {
|
|
border: 1px solid rgba(128, 128, 128, 0.4);
|
|
border-radius: 4px;
|
|
padding: 0.35em 0.5em;
|
|
background-color: aliceblue;
|
|
color: black;
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.gtd-kanban-card:hover {
|
|
border-color: rgba(20, 20, 20, 0.9);
|
|
}
|
|
|
|
.gtd-kanban-card-title {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gtd-kanban-card-detail {
|
|
font-size: 0.85em;
|
|
opacity: 0.7;
|
|
margin-top: 0.15em;
|
|
}
|
|
|
|
/* When card-detail is "hover", the detail line is hidden until hover. */
|
|
.gtd-kanban-card-hover .gtd-kanban-card-detail {
|
|
display: none;
|
|
}
|
|
|
|
.gtd-kanban-card-hover:hover .gtd-kanban-card-detail {
|
|
display: block;
|
|
}
|
|
|
|
/* Unscheduled sub-sections (todos / notes split) */
|
|
.gtd-unscheduled-group + .gtd-unscheduled-group {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
/* gtd-matrix (Eisenhower) */
|
|
|
|
.gtd-matrix-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr 1fr;
|
|
gap: 6px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.gtd-matrix-axis {
|
|
font-size: 0.78em;
|
|
font-weight: bold;
|
|
opacity: 0.75;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 0.2em 0.3em;
|
|
writing-mode: initial;
|
|
}
|
|
|
|
.gtd-matrix-quadrant {
|
|
border: 1px solid rgba(128, 128, 128, 0.35);
|
|
border-radius: 6px;
|
|
min-height: 4em;
|
|
}
|
|
|
|
.gtd-matrix-do-first {
|
|
background-color: rgba(220, 60, 60, 0.08);
|
|
border-color: rgba(220, 60, 60, 0.5);
|
|
}
|
|
|
|
.gtd-matrix-schedule {
|
|
background-color: rgba(60, 140, 220, 0.08);
|
|
border-color: rgba(60, 140, 220, 0.5);
|
|
}
|
|
|
|
.gtd-matrix-delegate {
|
|
background-color: rgba(230, 160, 40, 0.08);
|
|
border-color: rgba(230, 160, 40, 0.5);
|
|
}
|
|
|
|
.gtd-matrix-eliminate {
|
|
background-color: rgba(128, 128, 128, 0.06);
|
|
border-color: rgba(128, 128, 128, 0.4);
|
|
}
|
|
|
|
/* gtd-gantt */
|
|
|
|
/* Inline badge shown in item notes (a gtd-gantt block with a project). */
|
|
.gtd-gantt-badge {
|
|
display: inline-block;
|
|
font-size: 0.8em;
|
|
font-family: monospace;
|
|
padding: 0.1em 0.45em;
|
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
|
border-radius: 10px;
|
|
background-color: rgba(128, 128, 128, 0.12);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.gtd-gantt-empty {
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
|
|
.gtd-gantt-scroll {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
border: 1px solid rgba(128, 128, 128, 0.25);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.gtd-gantt-grid {
|
|
display: grid;
|
|
align-items: center;
|
|
row-gap: 4px;
|
|
padding-bottom: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.gtd-gantt-corner {
|
|
grid-column: 1;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 3;
|
|
background-color: rgba(128, 128, 128, 0.12);
|
|
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
|
|
height: 100%;
|
|
}
|
|
|
|
.gtd-gantt-tick {
|
|
font-size: 0.75em;
|
|
font-weight: bold;
|
|
opacity: 0.75;
|
|
padding: 0.25em 0.4em;
|
|
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
|
|
border-left: 1px solid rgba(128, 128, 128, 0.2);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gtd-gantt-project-header {
|
|
grid-column: 1 / -1;
|
|
position: sticky;
|
|
left: 0;
|
|
font-weight: bold;
|
|
font-size: 0.82em;
|
|
padding: 0.3em 0.5em;
|
|
margin-top: 0.2em;
|
|
background-color: rgba(128, 128, 128, 0.08);
|
|
}
|
|
|
|
.gtd-gantt-row-label {
|
|
grid-column: 1;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 2;
|
|
font-size: 0.82em;
|
|
padding: 0 0.5em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
background-color: var(--joplin-background-color, white);
|
|
max-width: 160px;
|
|
}
|
|
|
|
.gtd-gantt-bar {
|
|
height: 1.5em;
|
|
border-radius: 3px;
|
|
font-size: 0.78em;
|
|
line-height: 1.5em;
|
|
padding: 0 0.4em;
|
|
color: black;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.gtd-gantt-bar:hover {
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.gtd-gantt-milestone-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gtd-gantt-milestone {
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
color: rgb(200, 120, 20);
|
|
}
|
|
|
|
.gtd-gantt-milestone:hover {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.gtd-gantt-milestone-done {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* Vertical "today" marker spanning the body rows. */
|
|
.gtd-gantt-today {
|
|
pointer-events: none;
|
|
border-left: 2px solid rgba(220, 60, 60, 0.7);
|
|
z-index: 1;
|
|
align-self: stretch;
|
|
height: 100%;
|
|
}
|