/* * public/custom.css — PolyMech per-tenant style overrides * * HOW IT LOADS * ───────────────────────────────────────────────────────────────────────────── * Vite copies public/ → dist/ verbatim (no content hash). index.html links * this file last, so rules here win over all Tailwind utilities — no !important. * * DEPLOYMENT (per-tenant, no rebuild) * ───────────────────────────────────────────────────────────────────────────── * npm run build * cp tenants/acme/custom.css dist/custom.css * # serve dist/ — done * * Set Cache-Control: no-cache on /custom.css at CDN/proxy if you hot-swap. * * DEVELOPMENT * ───────────────────────────────────────────────────────────────────────────── * Edit and save — the Vite dev server reloads it instantly (no HMR restart). * * Full class reference: docs/user-styles.md * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ HOME WIDGET (HomeWidget.tsx) ═══════════════════════════════════════════════════════════════════════════ Class map ───────────────────────────────────────────────────────────────────────── .pm-home-widget — outermost wrapper (bg, padding, radius) .pm-home-widget__mobile — mobile layout shell .pm-home-widget__desktop — desktop layout shell (no sidebar) .pm-home-widget__desktop--with-sidebar — desktop layout shell (with sidebar) .pm-home-widget__toolbar — sort-bar + layout-toggle row (both breakpoints) .pm-home-widget__toolbar--mobile — toolbar on mobile only .pm-home-widget__toolbar--desktop — toolbar on desktop only .pm-home-widget__sort-bar — Latest / Top / Categories toggles cluster .pm-home-widget__layout-toggles — Grid / Large / List toggle group .pm-home-widget__heading — feed section heading (h1–h4) .pm-home-widget__sidebar — resizable category tree panel .pm-home-widget__feed — area that contains the active feed view ───────────────────────────────────────────────────────────────────────── */ /* .pm-home-widget { background: transparent; border-radius: 0; padding: 0; } */ /* .pm-home-widget__toolbar { border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.5rem; } */ /* .pm-home-widget__heading { font-size: 1.5rem; font-weight: 800; } */ /* .pm-home-widget__sidebar { background: hsl(var(--muted)); } */ /* ═══════════════════════════════════════════════════════════════════════════ PHOTO GRID (PhotoGrid.tsx / MediaGrid) ═══════════════════════════════════════════════════════════════════════════ Class map ───────────────────────────────────────────────────────────────────────── .pm-photo-grid — outermost wrapper .pm-photo-grid__loading — full-width loading state .pm-photo-grid__empty — empty / no-items state .pm-photo-grid__dropzone — drag-and-drop upload target area .pm-photo-grid__section — group wrapper (one per category bucket) .pm-photo-grid__section-title — h2 label above each group .pm-photo-grid__grid — CSS grid holding cards .pm-photo-grid__item — individual card wrapper (video items only) .pm-photo-grid__loader — infinite-scroll sentinel + spinner ───────────────────────────────────────────────────────────────────────── */ /* .pm-photo-grid__grid { gap: 0.5rem; } */ /* .pm-photo-grid__section-title { text-transform: uppercase; letter-spacing: 0.05em; } */ /* .pm-photo-grid__dropzone { border-color: hsl(var(--primary)); } */ /* ═══════════════════════════════════════════════════════════════════════════ PAGE CARD (PageCard.tsx) ═══════════════════════════════════════════════════════════════════════════ Class map ───────────────────────────────────────────────────────────────────────── .pm-page-card — root element (both variants) .pm-page-card--grid — grid variant modifier .pm-page-card--feed — feed variant modifier .pm-page-card__image — image / thumbnail wrapper .pm-page-card__content — content area below image (feed variant) .pm-page-card__meta — author + actions row (feed variant) .pm-page-card__author — UserAvatarBlock wrapper .pm-page-card__actions — like / comment buttons wrapper .pm-page-card__text — title + description wrapper (feed variant) .pm-page-card__info — info bar below image (grid variant) .pm-page-card__title — card title element .pm-page-card__description — card description element ───────────────────────────────────────────────────────────────────────── */ /* .pm-page-card { border-radius: 0.75rem; overflow: hidden; } */ /* .pm-page-card__image { aspect-ratio: 4/3; } */ /* .pm-page-card__info { background: hsl(var(--card)); } */ /* .pm-page-card__title { font-size: 0.875rem; font-weight: 600; } */ /* .pm-page-card__description { display: none; } */ /* ═══════════════════════════════════════════════════════════════════════════ MOBILE FEED (MobileFeed.tsx) ═══════════════════════════════════════════════════════════════════════════ Class map ───────────────────────────────────────────────────────────────────────── .pm-mobile-feed — root wrapper .pm-mobile-feed__loading — loading spinner container .pm-mobile-feed__error — error message container .pm-mobile-feed__empty — empty-state container .pm-mobile-feed__group-header — sticky group label (search results) .pm-mobile-feed__item — per-post wrapper (intersection observer) ───────────────────────────────────────────────────────────────────────── */ /* .pm-mobile-feed { max-width: 42rem; margin-inline: auto; } */ /* .pm-mobile-feed__group-header { background: hsl(var(--background)); } */ /* .pm-mobile-feed__item { border-bottom: 1px solid hsl(var(--border)); } */ /* ═══════════════════════════════════════════════════════════════════════════ COMPACT RENDERER (CompactRenderer.tsx — post detail view) ═══════════════════════════════════════════════════════════════════════════ Class map ───────────────────────────────────────────────────────────────────────── .pm-compact-renderer — outermost wrapper .pm-compact-renderer__mobile-header — top bar shown on mobile / portrait .pm-compact-renderer__body — flex shell around the grid .pm-compact-renderer__grid — 1-col (mobile) / 2-col (desktop) grid .pm-compact-renderer__media — left column: gallery / video player .pm-compact-renderer__details — right column: metadata, comments ───────────────────────────────────────────────────────────────────────── */ /* .pm-compact-renderer__media { background: #000; } */ /* .pm-compact-renderer__details { padding: 1rem; } */ /* .pm-compact-renderer__mobile-header { background: hsl(var(--card)); } */ /* ═══════════════════════════════════════════════════════════════════════════ GALLERY WIDGET (GalleryWidgetView.tsx) ═══════════════════════════════════════════════════════════════════════════ .pm-gallery-widget — root wrapper (aspect-video by default) .pm-gallery-widget__viewer — inner Gallery component container .pm-gallery-widget__loading — loading spinner state .pm-gallery-widget__empty — empty / fallback state ───────────────────────────────────────────────────────────────────────── */ /* .pm-gallery-widget { border-radius: 1rem; overflow: hidden; } */ /* .pm-gallery-widget { aspect-ratio: 4/3; } */ /* ═══════════════════════════════════════════════════════════════════════════ TABS WIDGET (TabsWidget.tsx) ═══════════════════════════════════════════════════════════════════════════ .pm-tabs-widget — root wrapper .pm-tabs-widget__empty — no-tabs placeholder .pm-tabs-widget__bar — tab button strip .pm-tabs-widget__tab — individual tab button .pm-tabs-widget__tab--active — active tab modifier .pm-tabs-widget__content — canvas content area ───────────────────────────────────────────────────────────────────────── */ /* .pm-tabs-widget__bar { background: hsl(var(--muted)); } */ /* .pm-tabs-widget__tab--active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } */ /* ═══════════════════════════════════════════════════════════════════════════ HTML WIDGET (HtmlWidget.tsx) ═══════════════════════════════════════════════════════════════════════════ .pm-html-widget — root container (dangerouslySetInnerHTML) .pm-html-widget__loading — skeleton loading state .pm-html-widget__error — error message .pm-html-widget__empty — no-content placeholder ───────────────────────────────────────────────────────────────────────── */ /* .pm-html-widget { padding: 1.5rem; background: hsl(var(--card)); border-radius: 0.75rem; } */ /* ═══════════════════════════════════════════════════════════════════════════ MARKDOWN TEXT WIDGET (MarkdownTextWidget.tsx) ═══════════════════════════════════════════════════════════════════════════ .pm-markdown-widget — root Card (view mode) .pm-markdown-widget__content — CardContent holding rendered markdown .pm-markdown-widget__empty — empty state card ───────────────────────────────────────────────────────────────────────── */ /* .pm-markdown-widget { border: none; box-shadow: none; background: transparent; } */ /* .pm-markdown-widget__content { font-size: 1rem; line-height: 1.75; } */ /* ═══════════════════════════════════════════════════════════════════════════ VIDEO BANNER / HERO (VideoBannerWidgetView.tsx) ═══════════════════════════════════════════════════════════════════════════ .pm-video-banner — root wrapper .pm-video-banner__bg — background image container .pm-video-banner__video —