/* ═══════════════════════════════════════════════════════════════════════ OSIGC White-Label & Design Refresh — Cal.com Injected via Nginx sub_filter in /etc/nginx/conf.d/cal.osigc.com.conf ─────────────────────────────────────────────────────────────────────── Strategy: • Cal.com runs from a prebuilt Docker image — we cannot modify the source. All refinements happen here, overriding the two parallel theme systems Cal.com ships with: 1. Legacy `--cal-*` tokens (older components) 2. shadcn-style `--*` tokens (newer components: Button, Dialog, Popover, Card, Sidebar, Input) • Light mode only. Dark mode is preserved by scoping every rule under `:root:not(.dark)` or `html:not(.dark)`. Inside `` none of these selectors match, so Cal.com's dark theme is untouched. • Higher specificity than `:root,:host` and `.dark` (both 0,0,1,0); `:root:not(.dark)` is (0,0,2,0) so it wins on light mode without needing `!important` on CSS vars. • `!important` is only used where Cal.com itself uses `!important` (e.g. `.bg-default { background:#fffc !important }`). • Rollback: restore /opt/osigc/dashboard/static/calcom-override.css from the .bak-* sibling file. No nginx reload needed — sub_filter re-evaluates on every response. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 1. WHITE-LABEL — Hide "Cal.com" branding everywhere (existing behaviour) ═══════════════════════════════════════════════════════════════════════ */ a[href*="cal.com/docs"], a[href*="cal.com/blog"], a[href*="go.cal.com"], footer a[href*="cal.com"], [data-testid="powered-by-calcom"], a[href*="cal.com"]:has(> svg), .text-muted:has(a[href*="cal.com"]) { display: none !important; } /* ── Hide the "¿Necesitas ayuda? / Need help?" troubleshooter button that only the logged-in owner sees on their own booking page. It renders as: Need help? We target its href (which is stable across Cal.com versions) and hide both the link and any Tooltip wrapper that contains it. ── */ a[href*="/availability/troubleshoot"], button[href*="/availability/troubleshoot"], [data-testid="troubleshooter-button"], [data-state="delayed-open"]:has(> a[href*="/availability/troubleshoot"]), [data-state="closed"]:has(> a[href*="/availability/troubleshoot"]), [data-radix-popper-content-wrapper]:has(a[href*="/availability/troubleshoot"]) { display: none !important; } /* ── Hide the 12h / 24h TimeFormat toggle on booking pages. Cal.com renders it as a Radix ToggleGroup with two buttons whose `value` attributes are the literal format strings `h:mma` (12h) and `HH:mm` (24h). Matching both values inside the same parent identifies the toggle unambiguously across languages. Paired with a localStorage init script injected via nginx sub_filter that forces `timeOption.is24hClock=true` before Cal.com's bundle boots, the booking page always displays 24h times and the selector is never visible. ── */ button[value="HH:mm"], button[value="h:mma"], [role="group"]:has(> button[value="HH:mm"]):has(> button[value="h:mma"]), [role="radiogroup"]:has(> button[value="HH:mm"]):has(> button[value="h:mma"]), div:has(> button[value="HH:mm"]):has(> button[value="h:mma"]) { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ 2. DESIGN TOKENS — Light mode override (dark mode untouched) ─────────────────────────────────────────────────────────────────────── Specificity: `:root:not(.dark)` = (0,0,2,0) Cal.com's base: `:root,:host` = (0,0,1,0) Cal.com's dark: `.dark` = (0,0,1,0) So our rule wins in light mode; in dark mode `:not(.dark)` fails to match `` and Cal.com's `.dark` rules apply. ═══════════════════════════════════════════════════════════════════════ */ :root:not(.dark) { /* ── Surfaces (legacy --cal-*) ── Key fix: --cal-bg-subtle drives the body background via the `body class="bg-subtle"` class, so we use it as the app background. Cards (`.bg-default`) become truly white below. */ --cal-bg: #ffffff; /* Card / panel solid white */ --cal-bg-subtle: #f3f4f6; /* App / page background (gray-100) */ --cal-bg-muted: #f9fafb; /* Secondary surfaces (gray-50) */ --cal-bg-emphasis: #e5e7eb; /* Emphasis / hover surface (gray-200) */ --cal-bg-inverted: #111827; /* Inverted / high-contrast */ /* ── Borders ── Keeping `--cal-border` at Tailwind gray-300 which is already crisp. Bump the `muted` band so panels read clearly. */ --cal-border-emphasis: #9ca3af; /* gray-400 */ --cal-border: #d1d5db; /* gray-300 — primary divider */ --cal-border-subtle: #e5e7eb; /* gray-200 */ --cal-border-muted: #e5e7eb; /* gray-200 (was #eeeff2, too faint) */ --cal-border-booker: #d1d5db; /* align booker grid with panels */ /* ── Typography ── Canonical Tailwind gray scale for consistent hierarchy. All pass WCAG AA against white and gray-100 backgrounds. */ --cal-text-emphasis: #111827; /* gray-900 — headings */ --cal-text: #374151; /* gray-700 — body */ --cal-text-subtle: #4b5563; /* gray-600 — secondary */ --cal-text-muted: #6b7280; /* gray-500 — tertiary / meta */ --cal-text-inverted: #ffffff; /* ── Brand (primary action blue) ── Replaces Cal.com's dark navy #1d2735. Matches Tailwind blue-600 which is restrained, premium, and passes contrast on white. */ --cal-bg-brand: #2563eb; /* blue-600 — primary CTA */ --cal-bg-brand-emphasis: #1d4ed8; /* blue-700 — hover */ --cal-bg-brand-muted: #eff6ff; /* blue-50 — subtle tint */ --cal-bg-primary: #2563eb; --cal-bg-primary-emphasis: #1d4ed8; --cal-bg-primary-muted: #eff6ff; --cal-brand: #2563eb; --cal-brand-emphasis: #1d4ed8; --cal-brand-subtle: #93c5fd; /* blue-300 */ --cal-brand-text: #ffffff; --cal-brand-accent: #ffffff; } /* ═══════════════════════════════════════════════════════════════════════ 3. SHADCN TOKENS — Light mode (used by newer primitives) ─────────────────────────────────────────────────────────────────────── Cal.com's newer Button / Dialog / Popover / Card / Sidebar / Input components read these names, not `--cal-*`. We align them so both systems produce a coherent visual. ═══════════════════════════════════════════════════════════════════════ */ :root:not(.dark) { /* Canvas */ --background: #f3f4f6; /* app bg */ --foreground: #111827; /* gray-900 */ /* Cards / popovers / dialogs — solid white with proper contrast */ --card: #ffffff; --card-foreground: #111827; --popover: #ffffff; --popover-foreground: #111827; /* Primary = brand blue (was zinc-800) */ --primary: #2563eb; --primary-foreground: #ffffff; /* Secondary / muted / accent — soft neutral for subtle UI */ --secondary: #f3f4f6; --secondary-foreground: #374151; --muted: #f3f4f6; --muted-foreground: #6b7280; --accent: #eff6ff; /* blue-50 for selected/hover accent */ --accent-foreground: #1d4ed8; /* blue-700 */ /* Destructive */ --destructive: #ef4444; /* red-500 */ --destructive-foreground: #ffffff; /* Borders & inputs — crisp gray-300 instead of 12% black */ --border: #d1d5db; --input: #d1d5db; /* Focus ring — subtle brand blue */ --ring: #93c5fd; /* blue-300 */ /* Sidebar — slightly lighter than app bg for hierarchy */ --sidebar: #f9fafb; /* gray-50 */ --sidebar-foreground: #374151; --sidebar-primary: #2563eb; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #eff6ff; /* blue-50 for active item bg */ --sidebar-accent-foreground: #1d4ed8; /* blue-700 for active item text */ --sidebar-border: #e5e7eb; /* gray-200 */ --sidebar-ring: #93c5fd; } /* ═══════════════════════════════════════════════════════════════════════ 4. CLASS-LEVEL FIXES — where Cal.com uses `!important` we must too ─────────────────────────────────────────────────────────────────────── Cal.com ships `.bg-default { background:#fffc !important }` which is a translucent 80% white. That translucency is the main source of the "washed out" feel because there's no solid surface anchor. We force it to a solid white in light mode only. ═══════════════════════════════════════════════════════════════════════ */ html:not(.dark) .bg-default { background-color: #ffffff !important; } /* Ensure the page body has the correct app background even if the `bg-subtle` utility loses specificity to something else. */ html:not(.dark) body { background-color: #f3f4f6; } /* ═══════════════════════════════════════════════════════════════════════ 5. COMPONENT POLISH — Phase 1 only, no layout changes ─────────────────────────────────────────────────────────────────────── Small, safe refinements that lift the perceived quality without touching Cal.com's internals. Every rule here is scoped to light mode via `html:not(.dark)`. ═══════════════════════════════════════════════════════════════════════ */ /* ── Cards & panels — subtle, restrained shadow for clearer separation ── */ html:not(.dark) .bg-default, html:not(.dark) [data-testid="dialog-content"], html:not(.dark) [role="dialog"] > div[class*="rounded"] { box-shadow: 0 1px 2px 0 rgb(17 24 39 / 4%), 0 1px 3px 0 rgb(17 24 39 / 6%); } /* ── Dialogs / modals — slightly stronger elevation ── */ html:not(.dark) [role="dialog"][data-state="open"] > div[class*="bg-default"], html:not(.dark) [data-radix-popper-content-wrapper] > [role="dialog"] { box-shadow: 0 10px 15px -3px rgb(17 24 39 / 8%), 0 4px 6px -4px rgb(17 24 39 / 6%); } /* ── Popovers / dropdowns — solid white, crisp border, subtle shadow ── */ html:not(.dark) [data-radix-popper-content-wrapper] [role="menu"], html:not(.dark) [data-radix-popper-content-wrapper] [role="listbox"], html:not(.dark) [data-radix-popper-content-wrapper] [role="tooltip"] { background-color: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgb(17 24 39 / 8%), 0 2px 4px -2px rgb(17 24 39 / 4%); } /* ── Inputs — crisp border + visible focus ring ── */ html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), html:not(.dark) textarea, html:not(.dark) select { border-color: #d1d5db; background-color: #ffffff; transition: border-color 120ms ease, box-shadow 120ms ease; } html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus, html:not(.dark) textarea:focus, html:not(.dark) select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 15%); outline: none; } /* ── Keyboard focus visible on all interactive elements ── */ html:not(.dark) a:focus-visible, html:not(.dark) button:focus-visible, html:not(.dark) [role="button"]:focus-visible, html:not(.dark) [role="tab"]:focus-visible, html:not(.dark) [role="menuitem"]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px; } /* ── Primary buttons — legacy brand utilities force old color with `!important`, so we must match specificity + force ── Also forces WHITE text on any interactive element whose background is brand/primary blue. Cal.com's booking page in particular composes buttons with `.bg-brand-default` for the background and inherits the text color from `.text-emphasis` (gray-900), which renders as dark gray on blue and becomes unreadable. We solve it at three levels: 1. The element itself gets `color: #ffffff` 2. Descendants (icons, spans, svgs) inherit via `*` 3. Hover state keeps white text */ html:not(.dark) [class*="bg-brand-default"], html:not(.dark) button[data-testid="new-event-type"], html:not(.dark) .bg-brand, html:not(.dark) button[class*="bg-primary"], html:not(.dark) a[class*="bg-brand"], html:not(.dark) a[class*="bg-primary"], html:not(.dark) [role="button"][class*="bg-brand"], html:not(.dark) [role="button"][class*="bg-primary"], html:not(.dark) [data-testid="confirm-book-button"], html:not(.dark) [data-testid="confirm-reschedule-button"], html:not(.dark) [data-testid="confirm-cancel-button"] { background-color: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } /* Force every descendant (span, svg, icon, text) to inherit the white */ html:not(.dark) [class*="bg-brand-default"] *, html:not(.dark) button[data-testid="new-event-type"] *, html:not(.dark) .bg-brand *, html:not(.dark) button[class*="bg-primary"] *, html:not(.dark) a[class*="bg-brand"] *, html:not(.dark) a[class*="bg-primary"] *, html:not(.dark) [role="button"][class*="bg-brand"] *, html:not(.dark) [role="button"][class*="bg-primary"] *, html:not(.dark) [data-testid="confirm-book-button"] *, html:not(.dark) [data-testid="confirm-reschedule-button"] *, html:not(.dark) [data-testid="confirm-cancel-button"] * { color: #ffffff !important; fill: #ffffff !important; } html:not(.dark) [class*="bg-brand-default"]:hover, html:not(.dark) button[data-testid="new-event-type"]:hover, html:not(.dark) .bg-brand:hover, html:not(.dark) button[class*="bg-primary"]:hover, html:not(.dark) a[class*="bg-brand"]:hover, html:not(.dark) a[class*="bg-primary"]:hover, html:not(.dark) [role="button"][class*="bg-brand"]:hover, html:not(.dark) [role="button"][class*="bg-primary"]:hover, html:not(.dark) [data-testid="confirm-book-button"]:hover, html:not(.dark) [data-testid="confirm-reschedule-button"]:hover { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; } html:not(.dark) [class*="bg-brand-default"]:hover *, html:not(.dark) button[class*="bg-primary"]:hover *, html:not(.dark) .bg-brand:hover *, html:not(.dark) [role="button"][class*="bg-brand"]:hover *, html:not(.dark) [role="button"][class*="bg-primary"]:hover * { color: #ffffff !important; fill: #ffffff !important; } /* Standalone text-brand utility (blue text on white bg, e.g. links) */ html:not(.dark) [class*="text-brand"]:not([class*="bg-brand"]):not([class*="bg-primary"]) { color: #2563eb !important; } /* ── Sidebar active item — blue accent instead of dark navy ── */ html:not(.dark) [data-testid="vertical-tab-event-types"][aria-current="page"], html:not(.dark) [data-testid^="vertical-tab-"][aria-current="page"], html:not(.dark) a[aria-current="page"] { background-color: #eff6ff !important; /* blue-50 */ color: #1d4ed8 !important; /* blue-700 */ border-color: #2563eb !important; } /* ── Shell sidebar border crispness (inherits from existing override) ── */ html:not(.dark) [data-testid="shell-sidebar"] { border-color: #e5e7eb !important; background-color: #f9fafb; } /* ── Calendar / booker cells — subtle border and clear hover ── */ html:not(.dark) [data-testid="day"], html:not(.dark) button[data-testid="time"] { border-color: #e5e7eb; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } html:not(.dark) [data-testid="day"]:hover:not([disabled]), html:not(.dark) button[data-testid="time"]:hover:not([disabled]) { background-color: #eff6ff; border-color: #2563eb; color: #1d4ed8; } html:not(.dark) [data-testid="day"][aria-pressed="true"], html:not(.dark) button[data-testid="time"][aria-pressed="true"] { background-color: #2563eb; border-color: #2563eb; color: #ffffff; } /* ── Tables / list containers — restrained row separators ── */ html:not(.dark) table tbody tr { border-color: #e5e7eb; } html:not(.dark) table tbody tr:hover { background-color: #f9fafb; } /* ── Typography pass — slightly stronger headings where Cal.com relies on default Tailwind weights that feel too light ── */ html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3 { color: #111827; letter-spacing: -0.01em; } /* ── Links in body text — brand blue, underline on hover ── */ html:not(.dark) .prose a, html:not(.dark) p a, html:not(.dark) [class*="text-default"] a { color: #2563eb; text-decoration: none; } html:not(.dark) .prose a:hover, html:not(.dark) p a:hover, html:not(.dark) [class*="text-default"] a:hover { text-decoration: underline; } /* ── Scrollbars — match the new neutral palette (WebKit only) ── */ html:not(.dark) ::-webkit-scrollbar { width: 10px; height: 10px; } html:not(.dark) ::-webkit-scrollbar-track { background: #f3f4f6; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; border: 2px solid #f3f4f6; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* ═══════════════════════════════════════════════════════════════════════ 6. PRINT — Restore defaults for print output ═══════════════════════════════════════════════════════════════════════ */ @media print { html:not(.dark) body { background: #ffffff; } }