/** * Calmgr Widget Scoped Styles * All styles are scoped under .calmgr to avoid clashing with Ghost theme. * Uses the Ghost theme's CSS custom properties where available so the widget * automatically inherits the site's fonts, colors, and radius tokens. */ /** * Dark-mode-aware proxy tokens. * Each --calmgr-* variable chains Ghost's theme variable first, then falls * back to a sensible light-mode default. The @media block overrides only the * fallback portion so Ghost's own dark variables still win when present. * Defined on :root so they reach .calmgr-modal* nodes appended to . */ :root { --calmgr-bg: var(--color-background, #ffffff); --calmgr-bg-100: var(--color-background-100, #f3f3f3); --calmgr-bg-200: var(--color-background-200, #ededed); --calmgr-bg-300: var(--color-background-300, #dadada); --calmgr-border: var(--color-border, hsla(0,0%,50%,.2)); --calmgr-contrast: var(--color-contrast, #000000); --calmgr-fg: var(--color-foreground, #4d4d4d); --calmgr-secondary: var(--color-secondary, #757575); --calmgr-mute: var(--color-mute, #b2b2b2); /* tooltip tag pill — not covered by Ghost's theme variables */ --calmgr-tag-label: #444444; --calmgr-tag-border: #cccccc; } @media (prefers-color-scheme: dark) { :root { --calmgr-bg: var(--color-background, #1c1c1e); --calmgr-bg-100: var(--color-background-100, #2c2c2e); --calmgr-bg-200: var(--color-background-200, #3a3a3c); --calmgr-bg-300: var(--color-background-300, #48484a); --calmgr-border: var(--color-border, hsla(0,0%,100%,.12)); --calmgr-contrast: var(--color-contrast, #ffffff); --calmgr-fg: var(--color-foreground, #e5e5e7); --calmgr-secondary: var(--color-secondary, #aeaeb2); --calmgr-mute: var(--color-mute, #636366); --calmgr-tag-label: #d0d0d0; --calmgr-tag-border: hsla(0,0%,100%,.15); /* Override FullCalendar's hardcoded light-mode defaults */ --fc-page-bg-color: var(--color-background, #1c1c1e); --fc-border-color: hsla(0,0%,100%,.12); --fc-neutral-bg-color: var(--color-background-100, #2c2c2e); --fc-today-bg-color: rgba(142, 12, 20, 0.15); } } .calmgr { width: 100%; box-sizing: border-box; font-family: var(--font-family-body, inherit); } .calmgr * { box-sizing: border-box; } /** * Tag Filter Chips */ .calmgr #calmgr-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .calmgr .calmgr-chip { padding: 4px 14px; border: 1px solid var(--calmgr-border); border-radius: 2rem; background-color: var(--calmgr-bg-100); color: var(--calmgr-secondary); cursor: pointer; font-size: var(--font-small, 0.875rem); font-weight: var(--font-weight-medium, 500); font-family: var(--font-family-button, inherit); transition: background-color 0.1s, color 0.1s, border-color 0.1s; white-space: nowrap; min-height: 2rem; display: inline-flex; align-items: center; gap: 0; } .calmgr .calmgr-chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; opacity: 0.7; } .calmgr .calmgr-chip:hover { background-color: var(--calmgr-bg-200); color: var(--calmgr-contrast); border-color: var(--calmgr-bg-300); } .calmgr .calmgr-chip.active { background-color: var(--chip-color-bg, var(--calmgr-bg-200)); border-color: var(--chip-color, var(--calmgr-border)); color: var(--chip-color, var(--calmgr-contrast)); font-weight: var(--font-weight-semibold, 600); } .calmgr .calmgr-chip.active .calmgr-chip-dot { opacity: 1; } .calmgr .calmgr-chip.active:hover { filter: brightness(0.95); } .calmgr .calmgr-chip:active { transform: scale(0.97); } /** * Calendar Container */ .calmgr .fc { width: 100%; font-family: var(--font-family-body, inherit); color: var(--calmgr-contrast); } /** * FullCalendar Toolbar — prev/next/today + title + view switcher */ .calmgr .fc-header-toolbar { margin-bottom: 1.25rem !important; gap: 0.5rem; } /* All toolbar buttons share the base pill style */ .calmgr .fc-button, .calmgr .fc-button-primary { padding: 0.25rem 0.875rem !important; min-height: 2rem !important; font-family: var(--font-family-button, inherit) !important; font-size: var(--font-small, 0.875rem) !important; font-weight: var(--font-weight-semibold, 600) !important; line-height: 1.5 !important; color: var(--calmgr-secondary) !important; background-color: var(--calmgr-bg-100) !important; border: 1px solid var(--calmgr-border) !important; border-radius: 2rem !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; transition: background-color 0.1s, color 0.1s !important; outline-offset: 2px; } .calmgr .fc-button:hover, .calmgr .fc-button-primary:hover { color: var(--calmgr-contrast) !important; background-color: var(--calmgr-bg-200) !important; border-color: var(--calmgr-bg-300) !important; } .calmgr .fc-button:focus-visible, .calmgr .fc-button-primary:focus-visible { outline: 2px solid var(--ghost-accent-color, #2C98AF); } /* Active view button (e.g. "Month" when in month view) */ .calmgr .fc-button-primary:not(:disabled).fc-button-active { color: var(--calmgr-accent-text, #fff) !important; background-color: var(--ghost-accent-color, #2C98AF) !important; border-color: var(--ghost-accent-color, #2C98AF) !important; } /* Today button — distinct accent outline style when not disabled */ .calmgr .fc-today-button:not(:disabled) { color: var(--ghost-accent-color, #2C98AF) !important; background-color: transparent !important; border-color: var(--ghost-accent-color, #2C98AF) !important; } .calmgr .fc-today-button:not(:disabled):hover { color: var(--calmgr-accent-text, #fff) !important; background-color: var(--ghost-accent-color, #2C98AF) !important; } /* Disabled today button (we're already on today's month) */ .calmgr .fc-today-button:disabled { opacity: 0.4 !important; cursor: default !important; } /* Prev / next buttons — icon-only, square-ish pill */ .calmgr .fc-prev-button, .calmgr .fc-next-button { padding: 0.25rem 0.6rem !important; } /* Remove double-border between grouped buttons */ .calmgr .fc-button-group .fc-button + .fc-button { border-left: 0 !important; border-radius: 2rem !important; } .calmgr .fc-button-group .fc-button:first-child { border-radius: 2rem !important; } /* Month/year title */ .calmgr .fc-toolbar-title { font-family: var(--font-family-headings, inherit) !important; font-size: 1.5rem !important; font-weight: 700 !important; color: var(--calmgr-contrast) !important; line-height: 1.2 !important; letter-spacing: -0.01em; } /** * Day-of-week column headers */ .calmgr .fc-col-header { border-bottom: 1px solid var(--calmgr-border); } .calmgr .fc-col-header-cell { background: transparent !important; border: none !important; padding: 0.5rem 0 !important; } .calmgr .fc-col-header-cell-cushion { font-family: var(--font-family-body, inherit) !important; font-size: var(--font-x-small, 0.75rem) !important; font-weight: var(--font-weight-semibold, 600) !important; color: var(--calmgr-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; padding: 0 !important; } /** * Day cells */ .calmgr .fc-daygrid-day-number { font-family: var(--font-family-body, inherit); font-size: var(--font-small, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--calmgr-fg); text-decoration: none !important; padding: 6px 8px !important; } .calmgr .fc-daygrid-day-number:hover { color: var(--calmgr-contrast); } /* Today's cell — inset border highlight */ .calmgr .fc-day-today { background-color: transparent !important; box-shadow: inset 0 0 0 2px #8E0C14 !important; } /* Today's day number — white on brand red, circular badge */ .calmgr .fc-day-today .fc-daygrid-day-number { background-color: #8E0C14 !important; color: #fff !important; font-weight: var(--font-weight-bold, 700) !important; width: 26px; height: 26px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; margin: 4px 4px 0 0; } /* Other month days — slightly faded but still legible */ .calmgr .fc-day-other .fc-daygrid-day-number { color: var(--calmgr-secondary) !important; } /** * Event cards — solid fill with tag color, contrasting text */ .calmgr .fc-event { border: 1px solid var(--tag-border-color, transparent) !important; border-radius: var(--radius-2, 8px) !important; cursor: pointer; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.08)), var(--tag-color, var(--ghost-accent-color, #2C98AF)) !important; } .calmgr .fc-event:hover { filter: brightness(1.08); } .calmgr .fc-event.calmgr-event-past { opacity: 0.45; } .calmgr .fc-event-main { padding: 0 !important; background: transparent !important; position: relative; /* anchors the signup badge to the full tile width */ } .calmgr .calmgr-event-inner { display: flex; flex-direction: column; padding: 4px 6px; gap: 1px; min-width: 0; } .calmgr .calmgr-event-title { font-weight: var(--font-weight-semibold, 600); font-size: 13px; color: var(--tag-text-color, #ffffff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .calmgr .calmgr-event-time { font-size: 11px; color: var(--tag-text-color, #ffffff); opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /** * My Signups bar — upcoming events the member has signed up for, rendered as * compact tiles that reuse the calendar event-card styling. */ #calmgr-mysignups { margin-bottom: 12px; } .calmgr-mysignups-label { font-size: 12px; font-weight: var(--font-weight-semibold, 600); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px; } .calmgr-mysignups-row { display: flex; flex-wrap: wrap; gap: 8px; } .calmgr-mysignups-item { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 150px; max-width: 240px; } .calmgr-mysignups-date { font-family: var(--font-family-body, inherit); font-size: var(--font-small, 0.875rem); font-weight: var(--font-weight-medium, 500); color: var(--calmgr-fg); padding: 0 2px 4px; } .calmgr-mysignups-tile { position: relative; /* anchors the signup badge, matching .fc-event-main */ border: 1px solid var(--tag-border-color, transparent); border-radius: var(--radius-2, 8px); cursor: pointer; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.08)), var(--tag-color, var(--ghost-accent-color, #2C98AF)); } .calmgr-mysignups-tile:hover { filter: brightness(1.08); } .calmgr-mysignups-tile.calmgr-event-past { opacity: 0.45; } /** * Hover Tooltip */ .calmgr-tooltip { position: fixed; z-index: 9999; width: 280px; background: var(--calmgr-bg); border: 1px solid var(--calmgr-border); border-radius: var(--radius-3, 10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08); padding: 12px 14px; font-family: var(--font-family-body, inherit); font-size: 13px; color: var(--calmgr-fg); pointer-events: auto; } .calmgr-tooltip-title { font-family: var(--font-family-headings, inherit); font-weight: 700; font-size: 15px; color: var(--calmgr-contrast); line-height: 1.3; margin-bottom: 3px; } .calmgr-tooltip-time { font-size: 12px; color: var(--calmgr-secondary); margin-bottom: 8px; } .calmgr-tooltip-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .calmgr-tooltip-tag { display: inline-block; padding: 2px 8px; border-radius: 2rem; font-size: 11px; font-weight: var(--font-weight-semibold, 600); font-family: var(--font-family-button, inherit); border: 1px solid var(--calmgr-tag-border); color: var(--calmgr-tag-label); background: var(--calmgr-bg-100); white-space: nowrap; } .calmgr-tooltip-signup { font-size: 12px; font-weight: var(--font-weight-semibold, 600); color: var(--ghost-accent-color, #2C98AF); margin-bottom: 8px; } .calmgr-tooltip-desc { font-size: 12px; color: var(--calmgr-secondary); line-height: 1.5; word-break: break-word; } .calmgr-tooltip-desc a { color: var(--ghost-accent-color, #2C98AF); text-decoration: underline; text-decoration-thickness: 0.075em; text-underline-offset: 0.15em; word-break: break-all; } .calmgr-tooltip-desc a:hover { text-decoration-color: transparent; } /** * Responsive */ @media (max-width: 768px) { .calmgr .fc-toolbar-title { font-size: 1.2rem !important; } .calmgr .fc-daygrid-day-number { font-size: 12px; } .calmgr .calmgr-event-title { font-size: 11px; } .calmgr .calmgr-event-time { font-size: 10px; } } @media (max-width: 480px) { .calmgr .fc-header-toolbar { flex-wrap: wrap; } .calmgr .fc-toolbar-chunk:nth-child(2) { order: -1; width: 100%; text-align: center; } } /** * Event Detail Modal * Appended to document.body, so intentionally not scoped under .calmgr */ .calmgr-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; } .calmgr-modal { background: var(--calmgr-bg); border-radius: var(--radius-3, 10px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1); width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; font-family: var(--font-family-body, inherit); font-size: 14px; color: var(--calmgr-fg); } .calmgr-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; position: sticky; top: 0; background: var(--calmgr-bg); border-bottom: 1px solid var(--calmgr-border); z-index: 1; } .calmgr-modal-title { font-family: var(--font-family-headings, inherit); font-size: 1.25rem; font-weight: 700; color: var(--calmgr-contrast); line-height: 1.3; margin: 0; flex: 1; } .calmgr-modal-close { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--calmgr-border); background: var(--calmgr-bg-100); color: var(--calmgr-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0; transition: background-color 0.1s, color 0.1s; margin-top: 2px; } .calmgr-modal-close:hover { background: var(--calmgr-bg-200); color: var(--calmgr-contrast); } .calmgr-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; } .calmgr-modal-tags { display: flex; flex-wrap: wrap; gap: 5px; } .calmgr-modal-desc { font-size: 14px; color: var(--calmgr-fg); line-height: 1.6; word-break: break-word; } .calmgr-modal-desc a { color: var(--ghost-accent-color, #2C98AF); text-decoration: underline; text-decoration-thickness: 0.075em; text-underline-offset: 0.15em; word-break: break-all; } .calmgr-modal-desc a:hover { text-decoration-color: transparent; } .calmgr-modal-section { display: flex; flex-direction: column; gap: 4px; } .calmgr-modal-section-label { font-size: 11px; font-weight: var(--font-weight-bold, 700); color: var(--calmgr-secondary); letter-spacing: 0.08em; text-transform: uppercase; } .calmgr-modal-when-text { font-size: 14px; font-weight: var(--font-weight-medium, 500); color: var(--calmgr-contrast); line-height: 1.4; } .calmgr-modal-where-address { font-size: 14px; color: var(--calmgr-contrast); line-height: 1.4; } .calmgr-modal-directions { font-size: 13px; color: var(--ghost-accent-color, #2C98AF); text-decoration: underline; text-decoration-thickness: 0.075em; text-underline-offset: 0.15em; width: fit-content; } .calmgr-modal-directions:hover { text-decoration-color: transparent; } .calmgr-modal-map { height: 220px; border-radius: var(--radius-2, 8px); overflow: hidden; margin-top: 4px; background: var(--calmgr-bg-100); } .calmgr-modal-map-loading { display: flex; align-items: center; justify-content: center; color: var(--calmgr-mute); font-size: 13px; } .calmgr-modal-map-loading::after { content: 'Loading map\2026'; } .calmgr-modal-actions { padding-top: 12px; border-top: 1px solid var(--calmgr-border); display: flex; gap: 8px; } .calmgr-modal-ical { padding: 6px 16px; border-radius: 2rem; border: 1px solid var(--ghost-accent-color, #2C98AF); background: transparent; color: var(--ghost-accent-color, #2C98AF); font-family: var(--font-family-button, inherit); font-size: var(--font-small, 0.875rem); font-weight: var(--font-weight-semibold, 600); cursor: pointer; transition: background-color 0.1s, color 0.1s; } .calmgr-modal-ical:hover { background: var(--ghost-accent-color, #2C98AF); color: #fff; } /* --- Signups --- */ .calmgr-signup { padding: 12px; border-radius: var(--radius-2, 8px); background: var(--calmgr-bg-100); border: 1px solid var(--calmgr-border); gap: 8px; } .calmgr-signup-counts { font-size: 14px; font-weight: var(--font-weight-medium, 500); color: var(--calmgr-contrast); line-height: 1.4; } .calmgr-signup-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .calmgr-signup-status { font-size: 13px; font-weight: var(--font-weight-semibold, 600); color: var(--ghost-accent-color, #2C98AF); } .calmgr-signup-btn { padding: 6px 16px; border-radius: 2rem; border: 1px solid var(--ghost-accent-color, #2C98AF); background: var(--ghost-accent-color, #2C98AF); color: var(--calmgr-accent-text, #fff); font-family: var(--font-family-button, inherit); font-size: var(--font-small, 0.875rem); font-weight: var(--font-weight-semibold, 600); cursor: pointer; transition: opacity 0.1s, background-color 0.1s, color 0.1s; } .calmgr-signup-btn:hover { opacity: 0.85; } .calmgr-signup-btn:disabled { opacity: 0.5; cursor: default; } .calmgr-signup-cancel { background: transparent; color: var(--calmgr-secondary); border-color: var(--calmgr-border); } .calmgr-signup-cancel:hover { background: var(--calmgr-bg-200); opacity: 1; } .calmgr-signup-login { font-size: 13px; color: var(--ghost-accent-color, #2C98AF); text-decoration: underline; text-decoration-thickness: 0.075em; text-underline-offset: 0.15em; width: fit-content; } .calmgr-signup-note { font-size: 12px; color: var(--calmgr-secondary); min-height: 0; } .calmgr-signup-note.calmgr-signup-error { color: #d9534f; } /* Tile badge for signup-enabled events. The badge is anchored to the tile box (.fc-event-main in the calendar, .calmgr-mysignups-tile in the bar), not to this content wrapper, so it sits at a consistent inset from the tile's right edge regardless of title length. padding-right keeps the title clear of it. */ .calmgr-event-inner--signup { padding-right: 20px; } .calmgr-event-badge { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; color: var(--tag-text-color, #fff); opacity: 0.9; } .calmgr-event-badge svg { width: 13px; height: 13px; display: block; } @media (max-width: 480px) { .calmgr-modal-map { height: 180px; } } /* Link cards */ .calmgr-link-cards { display: flex; flex-direction: column; gap: 10px; } .calmgr-link-card { display: block; border: 1px solid var(--calmgr-border); border-radius: var(--radius-2, 8px); overflow: hidden; text-decoration: none; color: inherit; background: var(--calmgr-bg-100); transition: border-color 0.15s, box-shadow 0.15s; } .calmgr-link-card:hover { border-color: var(--ghost-accent-color, #2C98AF); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .calmgr-link-card-image { display: block; width: 100%; height: 140px; object-fit: cover; background: var(--calmgr-bg-200); } .calmgr-link-card-text { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 3px; } .calmgr-link-card-title { font-size: 13px; font-weight: var(--font-weight-semibold, 600); color: var(--calmgr-contrast); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .calmgr-link-card-domain { font-size: 11px; color: var(--calmgr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calmgr-link-card-loading { height: 68px; border: 1px solid var(--calmgr-border); border-radius: var(--radius-2, 8px); background: linear-gradient( 90deg, var(--calmgr-bg-100) 25%, var(--calmgr-bg-200) 50%, var(--calmgr-bg-100) 75% ); background-size: 200% 100%; animation: calmgr-shimmer 1.5s infinite; } @keyframes calmgr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 480px) { .calmgr-link-card-image { height: 110px; } }