/*-------------------------------------------------------------- This is your custom stylesheet. Add your own styles here to make theme updates easier. To override any styles from other stylesheets, simply copy them into here and edit away. Make sure to respect the media queries! Otherwise you may accidentally add desktop styles to the mobile layout. https://www.w3schools.com/css/css_rwd_mediaqueries.asp --------------------------------------------------------------*/ /*-------------------------------------------------------------- Indie Insights - Discussions / Group Feed redesign Design tokens pulled from Figma (Discussions frame, node 37019:34738) --------------------------------------------------------------*/ :root { --ii-color-paper: #f5f1eb; --ii-color-card-bg: #faf8f5; --ii-color-white: #ffffff; --ii-color-primary: #f07931; --ii-color-primary-soft: #fdece1; --ii-color-accent: #f59e0b; --ii-color-text: #171717; --ii-color-text-muted: #4b5563; --ii-color-text-faint: #a1a1a1; --ii-color-border: #ece7de; --ii-radius: 10px; --ii-radius-sm: 6px; } /* Feed + rail layout ------------------------------------------------ Scoped to .ii-feed-grid (NOT the bare .screen-content, which BuddyBoss reuses on /groups/ and /members/ directories with unrelated content — targeting it directly broke those pages' layout). Uses flexbox with the feed/rail targeted explicitly by selector (not grid auto-placement by source order) so each side is pinned regardless of layout quirks. */ .ii-feed-grid { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 24px; width: 100%; box-sizing: border-box; } .ii-feed-grid > #activity-stream { flex: 1 1 480px; min-width: 0; } .ii-feed-grid > .ii-activity-rail { flex: 0 0 320px; width: 320px; } @media screen and (max-width: 1024px) { .ii-feed-grid > .ii-activity-rail { flex: 1 1 100%; width: 100%; } } /* Composer card ------------------------------------------------------ */ .ii-composer-card { background: var( --ii-color-white ); border: 1px solid var( --ii-color-border ); border-radius: var( --ii-radius ); padding: 16px 20px; margin-bottom: 20px; } /* Filter bar ----------------------------------------------------------- */ .ii-discussions-filterbar { border-bottom: 1px solid var( --ii-color-border ); padding-bottom: 12px; margin-bottom: 16px; } /* Right rail ------------------------------------------------------------ */ .ii-activity-rail { display: flex; flex-direction: column; gap: 16px; } .ii-rail-card { background: var( --ii-color-white ); border: 1px solid var( --ii-color-border ); border-radius: var( --ii-radius ); padding: 16px 18px; } .ii-rail-title { font-size: 14px; font-weight: 600; color: var( --ii-color-text ); margin: 0 0 12px; } .ii-trending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ii-trending-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ii-rail-count { font-size: 13px; color: var( --ii-color-text-faint ); white-space: nowrap; } .ii-rail-promo .ii-badge { margin-bottom: 12px; } .ii-rail-promo-title { font-size: 15px; font-weight: 600; color: var( --ii-color-text ); margin: 0 0 6px; } .ii-rail-promo-description { font-size: 13px; color: var( --ii-color-text-muted ); margin: 0 0 14px; line-height: 1.5; } .ii-rail-promo-link { display: inline-block; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 16px; border: 1px solid var( --ii-color-border ); border-radius: var( --ii-radius-sm ); color: var( --ii-color-text ); font-size: 13px; font-weight: 500; text-decoration: none; } .ii-rail-promo-link:hover { border-color: var( --ii-color-primary ); color: var( --ii-color-primary ); } .ii-badge { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 10px; border-radius: var( --ii-radius-sm ); background: var( --ii-color-primary-soft ); color: var( --ii-color-primary ); } /* Role badge (BuddyBoss Profile Type: Moderator / Retailer / Staff / Founder) */ .ii-role-badge { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 9px; border-radius: var( --ii-radius-sm ); background: #f3f4f6; color: var( --ii-color-text-muted ); margin-inline-start: 6px; vertical-align: middle; } /* Topic tag pill (existing BuddyBoss markup, restyled) */ .activity-topic a { display: inline-block; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var( --ii-radius-sm ); background: var( --ii-color-primary-soft ); color: var( --ii-color-primary ); text-decoration: none; } /* Post action row (like / comment / share - existing .activity-meta markup) */ .activity-meta { display: flex; align-items: center; gap: 24px; border-top: 1px solid var( --ii-color-border ); margin-top: 12px; padding-top: 10px; } /* Strip BuddyBoss's default block/colored button chrome inside the feed (composer + comment reply form are outside #activity-stream, unaffected) so like/comment/reply read as a slim icon+count row, per Figma. */ #activity-stream .button { background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: var( --ii-color-text-muted ) !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important; flex: none !important; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } #activity-stream .button:hover, #activity-stream .button:focus, #activity-stream .button.has-like, #activity-stream .button.has-reaction { color: var( --ii-color-primary ) !important; background: none !important; } #activity-stream .acomment-foot-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; } /* Comment thread ------------------------------------------------------- */ .activity-comments .acomment-content_wrap { background: var( --ii-color-card-bg ); border-radius: var( --ii-radius ); padding: 10px 14px; } .acomments-view-more > a, .acomments-view-more { color: var( --ii-color-primary ); font-weight: 500; font-size: 13px; } /* Inline reply composer (existing .ac-form markup, restyled) */ .bp-ac-form-container .ac-input { background: var( --ii-color-card-bg ); border-radius: 999px; padding: 10px 16px; } .ac-submit-wrap .bp-c-button--primary, .ac-submit-wrap button[type="submit"] { background: var( --ii-color-primary ); border-color: var( --ii-color-primary ); } /* The theme's 'bb-icons' font-face (lined.woff2, the icon font used * throughout the buddypanel/nav) has no font-display set, so text using * these icons is invisible until the font downloads (~240ms swap savings * per PageSpeed Insights). Redeclare the same font-face with swap added -- * this file loads after the parent theme's bb-icons.css, so it wins. */ @font-face { font-family: 'bb-icons'; src: url('../../../buddyboss-theme/assets/icons/fonts/lined.eot?1728559670'); src: url('../../../buddyboss-theme/assets/icons/fonts/lined.eot?1728559670#iefix') format('embedded-opentype'), url('../../../buddyboss-theme/assets/icons/fonts/lined.woff2?1728559670') format('woff2'), url('../../../buddyboss-theme/assets/icons/fonts/lined.woff?1728559670') format('woff'), url('../../../buddyboss-theme/assets/icons/fonts/lined.ttf?1728559670') format('truetype'), url('../../../buddyboss-theme/assets/icons/fonts/lined.svg?1728559670#round-lined') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } /* Header account menu: username stays white by default, but the hover/open * state has a light background, so it needs to switch to black to stay legible. */ .bb-template-v2 .site-header .user-wrap.menu-item-has-children .user-link .user-name { color: #fff; } .bb-template-v2 .site-header .user-wrap.menu-item-has-children:hover .user-link .user-name, .bb-template-v2 .site-header .user-wrap.menu-item-has-children.sfHover .user-link .user-name, .bb-template-v2 .site-header .user-wrap.menu-item-has-children.selected .user-link .user-name, .bb-template-v2 .site-header .user-wrap.menu-item-has-children .user-link:hover .user-name, .bb-template-v2 .site-header .user-wrap.menu-item-has-children .user-link:focus .user-name { color: #000; } /* Shared colored profile-type badge (Founder/Facilitator/Staff/Retailer), * used in the header account menu and reused by the member directory. */ .ii-member-type-badge{display:inline-block;padding:3px 10px;border-radius:9999px;font-size:.6875rem;font-weight:600;white-space:nowrap;} .ii-header-role-row{display:block;margin:4px 0 0;} /* Header trigger (collapsed): name + role badge stacked vertically instead of * side-by-side, so the compact header doesn't feel crowded. */ .ii-header-name-stack{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;} .ii-header-trigger-role{display:block;margin-top:3px;} .ii-header-trigger-role .ii-member-type-badge{font-size:.625rem;padding:2px 8px;} /* Mobile panel header: the logo has white elements that disappear against * the theme's light/cream background, so give it a dark background instead. */ .bb-mobile-panel-header{background-color:#1a1208 !important;} .bb-mobile-panel-header .bb-close-panel, .bb-mobile-panel-header .bb-close-panel i{color:#fff;} /* Sign in / Sign up header buttons: .outline (Sign in) adds a 1px border * that the base .button.small min-height doesn't account for, making it * render taller than Sign up. Force both to an identical box-sized height. */ .bb-header-buttons .button.small{box-sizing:border-box;height:34px;min-height:34px;line-height:normal;display:inline-flex;align-items:center;} /* Activity/news-feed topic filter bar -- was rendering as a bare, unstyled *