/* ========================================================================= Template 2 — WFG theme ------------------------------------------------------------------------- Loaded after app.css when a site's `theme` setting is "wfg". Every rule here MUST be scoped under `.theme-wfg` so it only affects WFG sites and never leaks into the WCG (default) layout. This is the place for WFG's design/layout divergences; add more as the theme grows. ========================================================================= */ /* Collapsible header search: the shared desktop search JS sets an inline width on focus (tuned for the inline WCG input). Inside the WFG dropdown panel we always want the input to fill the panel, so override it. */ .theme-wfg #nav-search-panel #nav-search-input { width: 100% !important; } /* ========================================================================= Feed cards — modern, compact, elevated ------------------------------------------------------------------------- The homepage activity feed shares one `.feed-card` wrapper across all event types (see HomeController). WFG restyles it into a premium social feed: away from flat borders towards soft depth, a subtle hover lift, a tighter vertical rhythm around the post text, and refined avatars/buttons. Everything is scoped under `.theme-wfg` so WCG (default) is untouched. ========================================================================= */ /* The card sits on the page with layered depth and a soft, light-gray hairline border, and reacts subtly on hover. */ .theme-wfg .feed-card { border-color: #f3f4f6; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -6px rgba(15, 23, 42, .12); transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1); } .theme-wfg .feed-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 34px -12px rgba(79, 70, 229, .22); } /* Tighten the vertical rhythm so the post text reads as one cohesive block rather than floating in empty space. (`.px-4.pt-4` = header, `.px-4.pb-2:not(.pt-4)` = the body/content row.) */ .theme-wfg .feed-card > .px-4.pt-4 { padding-top: .9rem; padding-bottom: .15rem; } .theme-wfg .feed-card > .px-4.pb-2:not(.pt-4) { padding-bottom: .55rem; } .theme-wfg .feed-card .feed-body-preview { line-height: 1.55; margin-top: .15rem; } /* Seamless: drop ALL internal horizontal dividers (border-t / border-b / divide-y) inside feed cards so the sections flow together as one block. */ .theme-wfg .feed-card .border-t { border-top-color: transparent; } .theme-wfg .feed-card .border-b { border-bottom-color: transparent; } .theme-wfg .feed-card .divide-y > * { border-top-color: transparent; } .theme-wfg .feed-card .border-t.mt-2 { margin-top: .35rem; } /* Avatar: a soft white ring + shadow so the person lifts off the card. */ .theme-wfg .feed-card .flex.items-center.gap-3 > a:first-child :where(img, span, div) { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 23, 42, .18); } /* ------------------------------------------------------------------------- Action bar — individual pill buttons ------------------------------------------------------------------------- Every Like / Comment button becomes a rounded pill. On the full-width action bars (the flex-1 buttons on photo / review / thread cards) each pill gets a #f1f3f4 fill and the two pills split the row evenly with a 12px gap. Hover tints: Like -> soft red, Comment -> soft blue. ------------------------------------------------------------------------- */ .theme-wfg .feed-card .like-btn, .theme-wfg .feed-card .toggle-comments, .theme-wfg .feed-card .review-like-btn, .theme-wfg .feed-card .review-toggle-comments { border-radius: 9999px; transition: background-color .15s ease, color .15s ease; } /* Full-width action bars: filled pills, equal width, 12px gap (6px each side). */ .theme-wfg .feed-card .like-btn.flex-1, .theme-wfg .feed-card .toggle-comments.flex-1, .theme-wfg .feed-card .review-like-btn.flex-1, .theme-wfg .feed-card .review-toggle-comments.flex-1 { background-color: #f1f3f4; } .theme-wfg .feed-card .like-btn.flex-1, .theme-wfg .feed-card .review-like-btn.flex-1 { margin-right: 6px; } .theme-wfg .feed-card .toggle-comments.flex-1, .theme-wfg .feed-card .review-toggle-comments.flex-1 { margin-left: 6px; } /* Hover states (apply to both the full-width pills and the compact count rows). */ .theme-wfg .feed-card .like-btn:hover, .theme-wfg .feed-card .review-like-btn:hover { background-color: #fee2e2; color: #dc2626; } .theme-wfg .feed-card .toggle-comments:hover, .theme-wfg .feed-card .review-toggle-comments:hover { background-color: #dbeafe; color: #2563eb; } /* ========================================================================= Seamless sidebar widgets + "Start a new discussion" quick-post bar ------------------------------------------------------------------------- Match the feed: soft light-gray outer border, no internal dividers, and a pill-shaped quick-post input. ========================================================================= */ /* Soft outer border on the homepage sidebar widget cards. */ .theme-wfg #feed-sidebar .border-gray-200 { border-color: #f3f4f6; } /* Drop internal dividers inside sidebar widgets (headers + list rows). */ .theme-wfg #feed-sidebar .border-b { border-bottom-color: transparent; } .theme-wfg #feed-sidebar .border-t { border-top-color: transparent; } .theme-wfg #feed-sidebar .divide-y > * { border-top-color: transparent; } /* "Start a new discussion..." quick-post bar: soft card border + pill input. */ .theme-wfg .rounded-xl:has(> .flex > a[href="/forum/new-topic"]) { border-color: #f3f4f6; } .theme-wfg a[href="/forum/new-topic"].rounded-full { background-color: #f1f3f4; } .theme-wfg a[href="/forum/new-topic"].rounded-full:hover { background-color: #e5e7eb; }