joplin-plugin-my-calendar 1.2.3

package/dist/ui/mycalendar.css

@@ -0,0 +1,724 @@
+/* src/ui/mycalendar.css */
+
+html, body {
+    height: 100%;
+    margin: 0;
+    overflow: auto;
+}
+
+/* TODO:[1]: parent --scrollbar-size is invisible inside of iframe, and size is 7px always. How to solve that? */
+body::-webkit-scrollbar, select::-webkit-scrollbar {
+    width: var(--scrollbar-size, 7px);
+    height: var(--scrollbar-size, 7px);
+}
+
+body::-webkit-scrollbar-corner, select::-webkit-scrollbar-corner {
+    background: none;
+}
+
+body::-webkit-scrollbar-track, select::-webkit-scrollbar-track {
+    border: none;
+}
+
+body::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color);
+    border-radius: calc(var(--scrollbar-size, 7px) * 0.7);
+}
+
+body::-webkit-scrollbar-track:hover, select::-webkit-scrollbar-track:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+body::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-color-hover);
+}
+
+:root {
+    --scrollbar-thumb-color: var(--joplin-scrollbar-thumb-color);
+    --scrollbar-thumb-color-hover: var(--joplin-scrollbar-thumb-color-hover);
+    --mc-default-event-color: #1470d9;
+    --mc-past-opacity: 0.45;
+    /* Subtle weekend highlight (theme-aware) */
+    --mc-weekend-head-bg: color-mix(in srgb, var(--joplin-background-color3) 70%, transparent);
+    --mc-weekend-cell-bg: color-mix(in srgb, var(--joplin-background-color3) 45%, transparent);
+
+}
+
+/*#joplin-plugin-content-root {*/
+/*    min-width: 315px;*/
+/*}*/
+
+
+/* Outer container that will actually scroll */
+#mc-cal-scroll {
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+#cal-root {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    gap: 8px;
+    color: var(--joplin-color);
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 8px 8px 12px;
+    box-sizing: border-box;
+}
+
+#mc-toolbar {
+    display: flex;
+    align-items: center;
+}
+
+.mc-toolbar-inner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.mc-btn {
+    padding: 4px 8px;
+    border: 1px solid var(--joplin-divider-color);
+    background: var(--joplin-background-color2);
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.mc-title {
+    margin-left: 4px;
+    font-weight: 700;
+    flex: 1;
+}
+
+#mc-grid {
+    border: 1px solid var(--joplin-divider-color);
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Full-cover overlay */
+#mc-grid .mc-grid-loader {
+    position: absolute;
+    inset: 0;
+    display: none; /* shown via .mc-loading */
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--joplin-background-color) 70%, transparent);
+    backdrop-filter: blur(1px);
+    z-index: 10;
+}
+
+/* Show loader when grid is loading */
+#mc-grid.mc-loading .mc-grid-loader {
+    display: flex;
+}
+
+/* Rotating spinner (Joplin-themed) */
+#mc-grid .mc-grid-spinner {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 3px solid color-mix(in srgb, var(--joplin-color) 20%, transparent);
+    border-top-color: var(--joplin-color);
+    animation: mc-spin 900ms linear infinite;
+}
+
+@keyframes mc-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (pointer: coarse) and (hover: none) {
+    #mc-grid .mc-grid-spinner {
+        width: 34px;
+        height: 34px;
+        border-width: 4px;
+    }
+}
+
+.mc-grid-head, .mc-grid-body {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px;
+}
+
+.mc-grid-head {
+    background: var(--joplin-background-color3);
+}
+
+/* Week day name */
+.mc-grid-head-cell {
+    font-size: 11px;
+    font-weight: bold;
+    padding: 6px 8px;
+    text-align: center;
+    border-right: 1px solid var(--joplin-divider-color);
+}
+
+.mc-grid-head-cell:last-child {
+    border-right: none;
+}
+
+/*****/
+/* --- Responsive grid width fix (320px -> 200px) --- */
+
+/* Make #mc-grid a size container so we can scale based on its own width */
+#mc-grid {
+    container-type: inline-size;
+
+    /* Defaults (>= ~320px) */
+    --mc-grid-gap: 4px;
+    --mc-head-font: 12px;
+    --mc-head-pad-y: 6px;
+    --mc-head-pad-x: 4px;
+
+    --mc-cell-pad-y: 4px;
+    --mc-cell-pad-x: 4px;
+    --mc-daynum-font: 12px;
+    --mc-count-font: 14px;
+
+    --mc-radius: 8px;
+}
+
+/* Critical: allow columns to shrink below min-content (prevents header “forcing” width) */
+.mc-grid-head,
+.mc-grid-body {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: var(--mc-grid-gap);
+}
+
+/* Ensure header cells can shrink and don’t overflow the grid */
+.mc-grid-head-cell {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font-size: var(--mc-head-font);
+    padding: var(--mc-head-pad-y) var(--mc-head-pad-x);
+}
+
+/* Same shrink behavior for day cells */
+.mc-grid-body .mc-cell {
+    min-width: 0;
+    padding: var(--mc-cell-pad-y) var(--mc-cell-pad-x);
+}
+
+/* Scale typography inside cells */
+.mc-daynum {
+    font-size: var(--mc-daynum-font);
+}
+
+.mc-count {
+    font-size: var(--mc-count-font);
+}
+
+/* Optional: keep borders visually consistent at tiny widths */
+#mc-grid {
+    border-radius: var(--mc-radius);
+}
+
+/* --- Container-based scaling: 320px -> 200px --- */
+@container (max-width: 320px) {
+    #mc-grid {
+        /* cqw = 1% of container width */
+        --mc-grid-gap: clamp(2px, 1cqw, 4px);
+
+        --mc-head-font: clamp(10px, 3.6cqw, 12px);
+        --mc-head-pad-y: clamp(3px, 1.6cqw, 6px);
+        --mc-head-pad-x: clamp(4px, 2.2cqw, 8px);
+
+        --mc-cell-pad-y: clamp(2px, 1.4cqw, 4px);
+        --mc-cell-pad-x: clamp(3px, 2.0cqw, 6px);
+
+        --mc-daynum-font: clamp(10px, 3.6cqw, 12px);
+        --mc-count-font: clamp(11px, 4.2cqw, 14px);
+
+        --mc-radius: clamp(6px, 2.6cqw, 8px);
+    }
+
+    /* Slightly reduce border thickness perception at very tight widths */
+    .mc-grid-head-cell {
+        padding: var(--mc-head-pad-y) var(--mc-head-pad-x);
+    }
+}
+
+/* Extra-tight: below ~240px make weekday labels shorter if you ever localize to longer strings */
+@container (max-width: 240px) {
+    .mc-grid-head-cell {
+        letter-spacing: -0.1px;
+    }
+}
+
+/*****/
+
+.mc-grid-body .mc-cell {
+    /*position: relative;*/
+    /*min-height: 50px;*/
+    border-right: 1px solid var(--joplin-divider-color);
+    border-top: 1px solid var(--joplin-divider-color);
+    padding: 4px 6px;
+    overflow: hidden;
+}
+
+/* Highlight weekends inside the current month only (keep .mc-out styling as-is) */
+.mc-grid-body .mc-cell.mc-weekend:not(.mc-out) {
+    background: var(--mc-weekend-cell-bg);
+}
+
+.mc-grid-body .mc-cell:nth-child(7n) {
+    border-right: none;
+}
+
+.mc-daynum {
+    font-size: 12px;
+    opacity: 0.8;
+    margin-bottom: 2px;
+}
+
+.mc-dots {
+    position: absolute;
+    left: 6px;
+    bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.mc-more {
+    font-size: 11px;
+    opacity: 0.7;
+}
+
+.mc-out {
+    background: var(--joplin-background-color3);
+}
+
+.mc-today {
+    outline: 2px solid var(--joplin-color);
+    outline-offset: -2px;
+}
+
+.mc-selected {
+    box-shadow: inset 0 0 0 2px var(--joplin-color);
+}
+
+/* Past days in the month grid */
+.mc-cell.mc-past {
+    opacity: var(--mc-past-opacity);
+}
+
+/* Keep selection slightly more readable even if the day is in the past */
+.mc-cell.mc-past.mc-selected {
+    opacity: 0.7;
+}
+
+.mc-events-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+#mc-events-day-label {
+    opacity: 0.8;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+#mc-events, #mc-import {
+    border: 1px solid var(--joplin-divider-color);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.mc-events-header, .mc-import-header {
+    background: var(--joplin-background-color3);
+    padding: 6px 10px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+#mc-events-list {
+    list-style: none;
+    margin: 0;
+    padding: 8px 6px;
+}
+
+.mc-event {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.mc-event:hover {
+    background: var(--joplin-background-color3)
+}
+
+.mc-color {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.mc-time {
+    opacity: 0.7;
+    font-size: 12px;
+}
+
+.mc-empty {
+    opacity: 0.7;
+    padding: 6px;
+}
+
+
+/* The container of strips in the cell */
+.mc-bars {
+    /*position: absolute;*/
+    left: 4px;
+    right: 4px;
+    bottom: 6px;
+    display: block;
+    grid-auto-rows: 4px;
+    gap: 2px;
+    z-index: 2;
+}
+
+.mc-bar {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--mc-default-event-color);
+    opacity: 0.95;
+    margin-bottom: 1px;
+}
+
+/* Badge-chiller is up to the right */
+.mc-count {
+    /*position: absolute;*/
+    top: 2px;
+    right: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 1;
+    padding: 2px 4px;
+    border-radius: 6px;
+    background: var(--joplin-background-color3);
+    border: 1px solid var(--joplin-divider-color);
+    opacity: 0.85;
+    z-index: 3;
+}
+
+.mc-dots {
+    display: none;
+}
+
+.mc-calendar-nav-btn {
+    color: var(--joplin-color) !important; /* make the text white */
+    background: transparent; /* The background is transparent */
+    border: none;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.mc-calendar-nav-btn:hover {
+    color: var(--joplin-color) !important; /* lighter when creeping */
+}
+
+/* --- Events panel layout: list scroll + import at bottom --- */
+
+
+/* --- Import block inside day events --- */
+
+/* --- Import form loader overlay (same style as grid loader) --- */
+#mc-ics-import-form {
+    position: relative;
+}
+
+/* Full-cover overlay */
+#mc-ics-import-form .mc-grid-loader {
+    position: absolute;
+    inset: 0;
+    display: none; /* shown via .mc-loading */
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--joplin-background-color) 70%, transparent);
+    backdrop-filter: blur(1px);
+    z-index: 10;
+    border-radius: 8px;
+}
+
+/* Show loader when form is loading */
+#mc-ics-import-form.mc-loading .mc-grid-loader {
+    display: flex;
+}
+
+/* Spinner (reuse same look) */
+#mc-ics-import-form .mc-grid-spinner {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 3px solid color-mix(in srgb, var(--joplin-color) 20%, transparent);
+    border-top-color: var(--joplin-color);
+    animation: mc-spin 900ms linear infinite;
+}
+
+#mc-import > summary {
+    cursor: pointer;
+    font-weight: 600;
+    user-select: none;
+    list-style: none;
+}
+
+/* Removes the standard summary marker in some browsers (optional) */
+#mc-import > summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Container to be scrolled */
+#mc-import-body {
+    margin: 0;
+    max-height: 260px; /* choose the height that suits you */
+    padding: 8px 6px; /* so that the scroll does not "stick" to the content */
+}
+
+/* Very important for <input type="file"> in flex-line: otherwise it can inflate the width */
+#mc-import-body input[type="file"] {
+    max-width: 100%;
+    min-width: 0;
+}
+
+.mc-setting-select-control {
+    display: inline-block;
+    color: var(--joplin-color);
+    font-family: var(--joplin-font-family);
+    background-color: var(--joplin-background-color);
+    padding: 4px 6px;
+    border-radius: 3px;
+    border-color: var(--joplin-border-color4);
+}
+
+.mc-setting-btn {
+    color: var(--joplin-color);
+    background-color: var(--joplin-background-color);
+    align-items: center;
+    border-radius: 3px;
+    border: 1px solid var(--joplin-border-color4);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    height: 26px;
+    justify-content: center;
+    max-height: 26px;
+    min-height: 26px;
+    min-width: 76px;
+    opacity: 1;
+    padding: 0 14px;
+    user-select: none;
+    width: auto;
+}
+
+.mc-event {
+    /* ... */
+    transition: opacity 150ms ease-in-out;
+    flex-wrap: wrap;
+}
+
+/* Past/ended events in the day list */
+.mc-event.mc-event-past {
+    opacity: var(--mc-past-opacity);
+}
+
+/* thin 24h timeline under the event */
+.mc-event-timeline {
+    position: relative;
+    flex: 0 0 100%;
+    height: 2px;
+    /*margin-top: 4px;*/
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--joplin-color) 18%, transparent);
+    overflow: hidden;
+}
+
+/* event segment (start..end) */
+.mc-event-timeline .mc-event-timeline-seg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: 999px;
+    opacity: 0.9;
+}
+
+/* dot “now” */
+.mc-event-timeline .mc-event-timeline-now {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--joplin-color);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--joplin-background-color) 65%, transparent);
+}
+
+/* slightly mute the timeline for past events */
+.mc-event.mc-event-past .mc-event-timeline {
+    opacity: 0.65;
+}
+
+/* --- ICS Import Styles --- */
+#mc-imp-log {
+    margin-top: 8px;
+    padding: 6px;
+    border: 1px dashed var(--joplin-divider-color);
+    max-height: 220px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+}
+
+.mc-import-section-header {
+    font-weight: 600;
+    margin-top: 10px;
+    margin-bottom: 6px;
+}
+
+.mc-import-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin: 8px 0;
+}
+
+.mc-import-row-label {
+    font-weight: 600;
+}
+
+.mc-import-options {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 8px 0;
+}
+
+.mc-import-option-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.mc-import-color-picker-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 24px;
+}
+
+.mc-import-color-picker-label {
+    opacity: 0.85;
+}
+
+#mc-ics-import-form {
+    margin: 0;
+    padding: 0;
+}
+
+#mc-ics-export-link {
+    margin-top: 10px;
+}
+
+.mc-export-link-row {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.mc-export-link-btn {
+    text-decoration: none;
+}
+
+.mc-flex-1 {
+    flex: 1;
+}
+
+.mc-w-100 {
+    width: 100%;
+}
+
+
+@media (pointer: coarse) and (hover: none) {
+    #mc-import {
+        display: none !important;
+    }
+
+    /* Stretch the entire width of the panel, drop the fields */
+    #cal-root {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        min-width: 0 !important;
+        box-sizing: border-box;
+    }
+
+    /* A little denser to spread the items on the phones */
+    .mc-toolbar-inner {
+        gap: 6px;
+    }
+
+    .mc-grid-head {
+        gap: 2px;
+    }
+
+    /* Weekend columns (Sat/Sun) */
+    .mc-grid-head-cell.mc-weekend {
+        background: var(--mc-weekend-head-bg);
+    }
+
+    .mc-grid-body {
+        gap: 2px;
+    }
+
+    .mc-cell {
+        padding: 6px;
+    }
+
+    .mc-daynum {
+        font-size: 12px;
+    }
+
+    .mc-events-header, .mc-import-header {
+        font-weight: normal;
+        font-size: 12px;
+    }
+
+    .mc-title {
+        font-size: 12px;
+        font-weight: normal;
+    }
+
+    /* Weekday header: smaller + bolder + less padding so "Mon/Wed" fits */
+    .mc-grid-head-cell {
+        font-size: 11px;
+        font-weight: Bold;
+        padding: 6px 4px;
+
+        /* Avoid "M..." / "W..." on mobile when it mostly fits */
+        text-overflow: clip;
+    }
+
+    /* Keep weekend header highlight as you already have */
+    .mc-grid-head-cell.mc-weekend {
+        background: var(--mc-weekend-head-bg);
+    }
+}