/* === UnityPro Community — RESTORE v14 (scoped) === */ #up-community{--upc-card:#fff;--upc-border:#e6e7eb;--upc-muted:#6b7280;--upc-hover:#fff} #up-community *{box-sizing:border-box} #up-community .upc-grid{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:1080px){#up-community .upc-grid{grid-template-columns:minmax(0,740px) 298px;gap:22px}} /* Put this AFTER the theme CSS, before the HTML if possible */ /* Make this section span the theme grid/flex immediately */ .main-container > #up-community{ grid-column:1 / -1 !important; width:100% !important; } /* Neutralize .main-container on this element so it won’t change later */ #up-community.main-container{ display:block !important; max-width:none !important; margin:0 !important; padding:0 !important; float:none !important; } /* Chips */ #up-community .upc-chips{display:flex;gap:12px;margin:10px 0 14px} #up-community .upc-chip{border:1px solid var(--upc-border);background:#fff;border-radius:9999px;padding:10px 16px;font-weight:700;color:#23262b;cursor:pointer} #up-community .upc-chip.is-active{background:#2f3642;border-color:#2f3642;color:#fff} /* Composer pill */ #up-community .upc-composer-pill{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--upc-border);border-radius:9999px;box-shadow:0 1px 0 rgba(0,0,0,.04);padding:10px 14px} #up-community .upc-pill-input{border:0;padding:8px 12px;border-radius:25px;background: #f0f2f5;outline:none;width:95%;font-size:16px} #up-community .upc-pill-attach{border:0;background:#eef1f5;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#374151;cursor:pointer} #up-community .upc-avatar img.upc-av,#up-community .upc-av{width:32px;height:32px;border-radius:50%;object-fit:cover} /* Composer expanded */ #up-community .upc-composer{border:1px solid var(--upc-border);border-radius:12px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)} #up-community .upc-composer .upc-composer-inner{display:flex;gap:14px;padding:16px} #up-community .upc-composer .upc-av{width:48px;height:48px;border-radius:50%} #up-community .upc-input{width:100%;max-width:650px;border:1px solid var(--upc-border);border-radius:10px;background:#fff;padding:10px 12px;margin-bottom:10px} #up-community .upc-input-sm{max-width:240px} #up-community .upc-btn{border:0;background:#2f3642;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer} #up-community .upc-composer-fields{flex:1 1 auto;min-width:0} #up-community .upc-input{width:100%;max-width:none} #up-community .upc-body,#up-community #upc-body{min-height:180px} /* optional: taller textarea */ /* Welcome card */ #up-community .upc-welcome{background:#fff;border:1px solid var(--upc-border);border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.04);padding:14px;margin-top:15px;margin-bottom:15px;} #up-community .upc-w-row{display:flex;align-items:center;gap:10px} #up-community .upc-spinner{width:16px;height:16px;border-radius:50%;border:2px solid #d1fae5;border-left-color:#10b981} #up-community .upc-w-title{font-weight:800} #up-community .upc-w-list{list-style:none;margin:8px 0 0;padding:0} #up-community .upc-w-list li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--upc-border)} #up-community .upc-dot{width:8px;height:8px;border-radius:50%;background:#6366f1} /* Header visible + pinned */ #up-community .modal-header1{display:none} #up-community .upc-modal .modal-header1{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--upc-border);background:var(--upc-card);position:sticky;top:0;z-index:30} #up-community .upc-modal .modal-header1 .mh-title{font-weight:600;margin:0 auto;color:#353535;} #up-community .upc-modal .modal-header1 .mh-close{font-size:20px !important; background:#e4e6eb;font-weight:400;width:36px;height:36px;padding:0;border:0;box-sizing:border-box;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;color:#545454;line-height:0;flex:0 0 36px;transition:background-color .12s ease} #up-community .upc-modal .modal-header1 .mh-close i{font-size:20px;display:block;pointer-events:none} #up-community .upc-modal .modal-header1 .mh-close:hover{background:#e4e6eb} #up-community .upc-modal .modal-header1 .mh-close:active{background:#d8dadf} #up-community .upc-modal .modal-header1 .mh-close:focus-visible{outline:2px solid #1877f2;outline-offset:2px} #up-community .upc-modal .modal-header1 .mh-edge{width:36px;height:36px;flex:0 0 36px} #up-community .upc-modal .modal-body {background:#fff;padding:8px;width:800px;} /* Modal */ #up-community .upc-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200} #up-community .upc-modal[hidden]{display:none} #up-community .upc-close-outer{position:fixed;top:8px;left:8px;width:28px;height:28px;border-radius:9999px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,0,0,.06);cursor:pointer} /* Modal layout: body scrolls, composer stays fixed at bottom */ #up-community .upc-dialog{padding:10px;background:#fff;max-width:790px;width:100%;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden} #up-community .upc-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto} /* scroller */ #up-community .upc-comments-wrap{overflow:visible} /* avoid nested scroll */ #up-community .upc-reply{flex:0 0 auto;margin:0;border-top:1px solid #eee;background:#fff} @media (max-width:640px){ #up-community .upc-modal{padding:0;margin:0px;align-items:stretch} #up-community .upc-dialog{width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0} } @media (max-width:640px){ #up-community .upc-reply{padding-bottom:calc(12px + env(safe-area-inset-bottom))} } /* Don't show the last-comment preview inside the modal thread view */ .upc-modal .last-cmt-preview { display: none !important; } /* Footer layout stays tight and aligned */ .upc-post .footer{display:flex;align-items:center;gap:8px} /* Avatar strip */ .last-commenters{display:flex;align-items:center;margin-left:6px} .last-commenters .c-ava{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-6px;box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;flex:0 0 auto} .last-commenters .c-ava:first-child{margin-left:0} /* Tooltip bubble */ #upc-tip{position:absolute;z-index:9999;padding:6px 8px;background:#111;color:#fff;font-size:12px;line-height:1;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;display:none} .dotspace {margin-left:5px;margin-right:5px;display:inline-block;font-size:var(--sep-size)!important;line-height:1;opacity:.6} /* Last comment preview chip (under a post footer) */ #up-community .last-cmt-preview[hidden]{display:none!important} #up-community .upc-post > .last-cmt-preview{width:100%; border-top:1px solid #f4f4f4; display:flex; align-items:flex-start; gap:10px; margin:12px 0 0 0 !important; padding:12px 0 0 0 !important;} /* Avatar */ /* Keep avatar visible in flex row */ #up-community .last-cmt-preview .lcp-av{width:28px;height:28px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;display:block;flex:0 0 28px} #up-community .last-cmt-preview .lcp-av-link{display:block;flex:0 0 28px;border-radius:50%;overflow:hidden} /* if avatar is wrapped in a link */ /* Bubble — fill available width of the card */ #up-community .last-cmt-preview .lcp-bubble{min-width:0;background:#f6f7f8; border:1px solid #e8eaee; border-radius:14px; padding:12px 14px; /* max-width:670px; */ flex:1 1 auto; width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px; line-height:1.25;} #up-community .last-cmt-preview .lcp-bubble:hover{background:#fafbfc; border-color:#e4e7eb} /* Name + star + meta */ #up-community .last-cmt-preview .lcp-name{font-weight:600; color:#111827; font-size:14px;} #up-community .last-cmt-preview .fa-star{color:#f59e0b; font-size:14px; margin-top:1px} /* Meta row with adjustable dot spacing/size */ #up-community .lcp-meta{--sep-gap:8px; --sep-size:14px; display:inline-flex; align-items:center; color:#6b7280; font-size:12px} /* Auto-insert "·" between items */ #up-community .lcp-meta .mi+.mi::before{content:'·'; display:inline-block; margin:0 var(--sep-gap); font-size:var(--sep-size); line-height:1; opacity:.6} /* Comment text — wrap instead of single-line ellipsis */ /* Comment text: clamp to one line with ellipsis */ #up-community .last-cmt-preview .lcp-text{display:block;width:100%;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25} .comment-avatars{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;overflow:visible;} .comment-avatars .upc-cmt-ava{display:inline-block;width:23px;height:23px;border-radius:50% !important;/* overflow:hidden REMOVED */border:1px solid rgba(0,0,0,.08);margin-left:-6px;position:relative;} .comment-avatars .upc-cmt-ava:first-child{margin-left:8px;} .comment-avatars .upc-cmt-ava img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;pointer-events:none;} .upc-cmt-ava[data-name]::after{position:absolute;left:50%;top:auto;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;background:rgba(1,1,1,.8);color:#fff;font-size:12px;line-height:1.25;padding:6px 8px;border-radius:12px !important;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;transition:opacity .12s ease;z-index:9999;pointer-events:none;content:attr(data-name);} .upc-cmt-ava[data-name]:hover::after,.upc-cmt-ava[data-name]:focus-visible::after{opacity:1;transform:translateX(-50%);} .last-comment{display:inline-block;margin-left:8px;color:#6b7280;font-size:12px;vertical-align:middle;position:relative;overflow:visible;} .last-comment[data-name]:hover::after, .last-comment[data-name]:focus-visible::after{content:attr(data-name);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-0px); /* was -8px */white-space:nowrap;background:rgba(1,1,1,.8);color:#fff;font-size:12px;line-height:1.25;padding:6px 8px;border-radius:12px !important;box-shadow:0 4px 12px rgba(0,0,0,.2);pointer-events:none;opacity:1;z-index:9999;} /* Stack block next to avatar as a tight column */ #up-community .upc-post .meta > div{display:flex;flex-direction:column;gap:0;line-height:1.1;margin-bottom:10px;} /* Stack name over category and add 15px gap */ #up-community .upc-post .meta .name {margin-top:15px !important} #up-community .upc-post .meta .cat {display:block;margin:0;padding:0} #up-community .upc-post .meta .cat {margin-top:0px !important} /* Keep your styles, but tight line-height */ #up-community .upc-post .meta .name{font-weight:800;color:#252525;font-size:17px;line-height:1.1} #up-community .upc-post .meta .cat{color:var(--upc-muted);font-size:12px;line-height:1.1} /* Feed cards */ #up-community .upc-feed{display:flex;flex-direction:column;gap:14px} #up-community .upc-post{background:var(--upc-card);border:1px solid var(--upc-border);border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.04);padding-top:10px!important; padding:16px;position:relative;transition:background .15s ease} #up-community .upc-post:hover{background:var(--upc-hover); border: 1px solid #d5d5d5;cursor:pointer;box-shadow:2 3px 2 rgba(0,0,0,.04);} /* Keep the meta row inline */ #up-community .upc-post .meta .time{} #up-community .upc-post .meta{display:flex;align-items:center;gap:12px;margin-bottom:0px} #up-community .upc-post .meta .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover} #up-community .upc-post .meta .name{margin-bottom:0px !important;padding-bottom:0px !important;font-weight:800;color:#252525;font-size:17px;} #up-community .upc-post .meta .cat{padding-top:0px !important;color:var(--upc-muted);font-size:14px} #up-community .upc-post .title{font-weight:800;font-size:18px;margin:0 0 6px;line-height:1.35} #up-community .upc-post .body{color:#374151;white-space:pre-wrap;line-height:1.5} #up-community .upc-post .footer{display:flex;align-items:center;gap:16px;margin-top:10px;color:var(--upc-muted)} /* optional new var you can tweak */ #up-community{--upc-modal-border:#cbd5e1} /* modal-only post border */ #up-community .upc-modal .thread .upc-post{border:1px solid #fff;border-radius:8px} /* (optional) subtle hover inside modal */ #up-community .upc-modal .thread .upc-post:hover{border-color:fff} /* Ellipsis */ #up-community .upc-post .kebab{position:absolute;right:10px;top:10px} #up-community .upc-post .kebab-btn{width:32px;height:32px;padding:0;border:0;border-radius:9999px;background:#ffffff;color:#4b5563;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 32px} #up-community .upc-post .kebab-btn svg{width:18px;height:18px;display:block} #up-community .upc-post .kebab-btn:hover{background:#e7ebf2} #up-community .upc-post .kebab-btn:focus-visible{outline:2px solid #94a3b8;outline-offset:2px} #up-community .upc-post .menu{display:none;position:absolute;right:0;top:28px;background:#fff;padding:4px;border:1px solid var(--upc-border);box-shadow:0 12px 30px rgba(0,0,0,.08);min-width:160px;border-radius:10px;z-index:10} #up-community .upc-post .menu.open{display:block} #up-community .upc-post .menu button{font-size:15px;display:block;width:100%;text-align:left;background:#fff;border:0!important;padding:10px 14px;color:#353535;cursor:pointer} #up-community .upc-post .menu button:hover{background:#f5f5f5;border-radius:10px;} /* Sidebar */ #up-community .upc-group,#up-community .upc-leader{background:#fff;border:1px solid var(--upc-border);border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.04)} #up-community .upc-group .upc-cover{background:linear-gradient(180deg,#333,#111);height:120px;border-radius:12px 12px 0 0} #up-community .upc-g-content{padding:14px} #up-community .upc-g-title{font-weight:800;margin-bottom:6px} #up-community .upc-g-sub{color:#4b5563;margin-bottom:10px} #up-community .upc-g-stats{display:flex;gap:16px;margin:8px 0 12px} #up-community .upc-g-stats .num{font-weight:800} #up-community .upc-invite{display:block;text-align:center;border:1px solid var(--upc-border);border-radius:10px;padding:10px 12px;background:#fff} #up-community .upc-leader{padding:14px} #up-community .upc-l-title{font-weight:800;margin-bottom:10px} #up-community .upc-l-list{list-style:none;margin:0;padding:0} #up-community .upc-l-list li{display:grid;grid-template-columns:24px 28px 1fr auto;align-items:center;border-bottom:1px solid var(--upc-border);padding:8px 0} #up-community .upc-l-list .avatar img{width:24px;height:24px;border-radius:50%} /* Filter (left) */ #up-community .upc-cfilter{position:relative;margin:4px 0 10px 0} #up-community .upc-cfilter .cf-btn{font-size:14px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:4px 6px;font-weight:600;color:#454545;cursor:pointer} #up-community .upc-cfilter .cf-btn i{font-size:12px;color:#6b7280} #up-community .upc-cfilter .cf-menu{padding:5px;position:absolute;left:0;top:28px;width:340px;background:#fff;border:1px solid var(--upc-border);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;z-index:50} #up-community .upc-cfilter .cf-menu[hidden]{display:none} #up-community .upc-cfilter .cf-menu::before{content:"";position:absolute;top:-18px;left:22px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-left:1px solid var(--upc-border);border-top:1px solid var(--upc-border)} #up-community .upc-cfilter .cf-menu button{display:block;width:100%;text-align:left;background:#fff;border:0;padding:12px 14px;cursor:pointer} #up-community .upc-cfilter .cf-menu button + button{border-top:0} /* no borders between values */ #up-community .upc-cfilter .cf-menu button:hover{background:#f5f5f5;border-radius:12px} /* hover bg */ #up-community .upc-cfilter .cf-menu .t{font-weight:700;color:#222222;font-size:15px;margin-bottom:3px} #up-community .upc-cfilter .cf-menu .s{color:#545454;font-size:12px;line-height:1.35;font-weight:400;} /* Comments: style */ #up-community .comments{display:flex;flex-direction:column;gap:12px;padding-left:10px;padding-right:10px} #up-community .upc-comment{display:grid;grid-template-columns:40px 1fr;gap:0px;align-items:flex-start;position:relative;} #up-community .upc-comment .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;margin-top:2px} #up-community .upc-comment .c-main{position:relative} .upc-comment .head a.name.upc-user{display:inline!important;width:auto!important;max-width:none!important;flex:0 0 auto!important;position:relative;pointer-events:auto;margin-right:auto;} .upc-comment .head{display:flex;align-items:center;gap:8px;} .upc-comment .head .kebab{flex:0 0 auto;margin-left:12px;} .upc-comment > a.upc-user.lcp-av-link{display:inline-block;} #up-community .upc-comment .name{font-weight:700;color:#111827;font-size:14px;line-height:1} #up-community .upc-comment .bubble{display:inline-block;max-width:700px;background:#f0f2f5;border-radius:14px;padding:5px 10px 5px 10px;margin-top:4px} #up-community .upc-comment .text{white-space:pre-wrap;line-height:1.5;color:#111827;font-size:14px} #up-community .upc-comment .meta{display:flex;gap:12px;align-items:center;margin:6px 0 0 6px;font-size:12px;color:#6b7280} #up-community .upc-comment .meta a{color:#6b7280;text-decoration:none;font-weight:600;cursor:pointer} #up-community .upc-comment .meta a:hover{text-decoration:underline} #up-community .upc-comment .ckebab{border:0;background:transparent;width:28px;height:28px;border-radius:50%;color:#6b7280;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:0;padding:0;box-sizing:border-box} #up-community .upc-comment .ckebab:hover{background-color:#ECEDEF;color:#374151;width:28px;height:28px;border-radius:50%} #up-community .upc-comment .cmenu::before{content:"";position:absolute;top:-8px;right:14px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-left:1px solid #e6e7eb;border-top:1px solid #e6e7eb} #up-community .upc-comment .cmenu button{display:block;width:100%;text-align:left;background:#fff;border:0;padding:10px 14px;color:#111827;cursor:pointer} #up-community .upc-comment .cmenu button + button{border-top:1px solid #f0f0f0} #up-community .upc-comment .cmenu button:hover{background:#f5f5f5} /* === Comment menu stacking fix — anchor to kebab and lift active row === */ /* Base row: create a stacking context */ #up-community .upc-comment{position: relative;z-index: 0;} /* When the menu is visible, lift this row above neighbors (Chrome/Edge/Safari) */ #up-community .upc-comment:has(.head .kebab .cmenu:not([hidden])){z-index: 1000;} /* Anchor the popup to the kebab button instead of the whole row */ #up-community .upc-comment .head .kebab{position: relative; z-index: 1; /* keep kebab above bubble */} #up-community .upc-comment .head .kebab .cmenu{position: absolute;right: 0;top: calc(100% + 6px); min-width: 220px;background: #fff;border: 1px solid #e6e7eb;border-radius: 8px;box-shadow: 0 12px 30px rgba(0,0,0,.12);padding: 6px;z-index: 1001;} #up-community .upc-comment .head .kebab .cmenu[hidden]{ display:none !important; } #up-community .upc-comment .head .kebab .cmenu button{ display:block;width:100%;text-align:left;background:#fff;border:0; padding:10px 14px;color:#353535;cursor:pointer;font-size:15px} #up-community .upc-comment .head .kebab .cmenu button:hover{background:#f3f4f6;border-radius:8px} /* Prevent clipping */ #up-community .comments, #up-community .upc-comment .c-main{ overflow: visible !important; } /* higher than sticky header (30) and post menus (10) */ .upc-modal .upc-comment .head .kebab .cmenu { z-index: 5000; } /* try to avoid clipping (works only if parent allows it) */ .upc-modal .upc-dialog { overflow: visible; } /* removes hard clip */ .upc-modal .upc-dialog-body { overflow-y: visible; } /* but you lose internal scroll */ /* Comment composer */ #up-community .upc-reply{border-top:1px solid #eee;padding:12px 18px;background:#fff;margin-bottom:5px;} #up-community .upc-reply .row{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:flex-start} #up-community .upc-reply .me{width:32px;height:32px;border-radius:50%;object-fit:cover} #up-community .upc-reply .bubble{background:#f3f4f6;border-radius:18px;padding:10px 14px 8px} #up-community .upc-reply .bubble .top{display:flex;align-items:center;gap:10px} #up-community .upc-reply .bubble textarea.reply-input{border:0;background:transparent;outline:none;width:100%;font-size:14px;resize:none;overflow:hidden;line-height:1.4;max-height:160px} #up-community .upc-reply .bubble .send{margin-left:auto;border:0;background:transparent;color:#9ca3af;width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;cursor:pointer} #up-community .upc-reply .bubble .send:hover{color:#6b7280;background:#e9eaec} #up-community .upc-reply .bubble .tools{display:flex;gap:12px;align-items:center;color:#6b7280;margin-top:8px;font-size:14px} /* Edit Comment composer */ #up-community .upc-comment.editing .bubble{display:block;max-width:100%;padding:12px 14px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:14px} #up-community .upc-comment .edit-wrap{display:flex;flex-direction:column;gap:10px} #up-community .upc-comment .editbox{width:100%;min-height:180px;border:1px solid #d1d5db;outline:0;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.6;background:#fff;resize:vertical} #up-community .upc-comment .edit-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px} #up-community .upc-comment .edit-actions .hint{font-size:12px;color:#6b7280} #up-community .upc-comment .edit-actions .btns{display:flex;gap:8px} #up-community .upc-comment .btn{border:1px solid #cfd5dc;background:#fff;border-radius:10px;padding:8px 14px;font-weight:600;color:#374151;cursor:pointer} #up-community .upc-comment .btn.save{background:#1877F2;color:#fff;} #up-community .upc-comment .btn:hover{background:#f5f5f5;color:#353535;} /* Base */ .upc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1rem;min-height:38px;min-width:88px;font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;border-radius:9999px;border:1px solid transparent;cursor:pointer;user-select:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .02s;-webkit-appearance:none;appearance:none} /* CANCEL = light gray */ button#upc-cancel.upc-btn.upc-btn-ghost{background:#F3F4F6!important;border-color:#E5E7EB!important;color:#374151!important} button#upc-cancel.upc-btn.upc-btn-ghost:hover{background:#E5E7EB!important;border-color:#D1D5DB!important} button#upc-cancel.upc-btn.upc-btn-ghost:active{background:#D1D5DB!important;border-color:#CBD5E1!important;transform:translateY(1px)} @media (prefers-color-scheme:dark){ button#upc-cancel.upc-btn.upc-btn-ghost{background:#374151!important;border-color:#4B5563!important;color:#F9FAFB!important} button#upc-cancel.upc-btn.upc-btn-ghost:hover{background:#4B5563!important;border-color:#6B7280!important} button#upc-cancel.upc-btn.upc-btn-ghost:active{background:#6B7280!important;border-color:#9CA3AF!important} } /* POST = Facebook blue (support id OR class `.addpost`) */ button#upc-add.upc-btn,button.upc-btn.addpost{background:#1877F2!important;border-color:#1877F2!important;color:#fff!important} button#upc-add.upc-btn:hover,button.upc-btn.addpost:hover{background:#166FE5!important;border-color:#166FE5!important} button#upc-add.upc-btn:active,button.upc-btn.addpost:active{background:#155DB2!important;border-color:#155DB2!important;transform:translateY(1px)} /* Accessiblity & disabled */ .upc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(24,119,242,.35)} .upc-btn[disabled],.upc-btn[aria-busy="true"]{opacity:.6;cursor:not-allowed;transform:none} /* --- kebab-right patch --- */ #up-community .upc-comment .bubble{ position: relative; } #up-community .upc-comment .head{ display:flex; align-items:center; gap:3px; } #up-community .upc-comment .head .name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #up-community .upc-comment .head .kebab{ flex:0 0 auto; margin-left:8px; position:relative; } #up-community .upc-comment .cmenu[hidden]{ display:none !important; } #up-community .upc-comment .cmenu{ position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:#fff; border:1px solid var(--upc-border,#e5e7eb); border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:6px; z-index:30; } #up-community .upc-comment .cmenu button{ font-size:15px;display:block;width:100%;text-align:left;background:#fff;border:0!important;padding:10px 14px;color:#353535;cursor:pointer} #up-community .upc-comment .cmenu button:hover{ background:#f3f4f6; border-radius:8px; } /* --- end kebab-right patch --- */ /* container for the hoverable time label */ #up-community .time, .upc-modal .time {position: relative;cursor: default;text-decoration: none;} #up-community .time::after,.upc-modal .time::after{content:attr(data-abs);position:absolute;left:0;bottom:100%;transform:translateY(-6px);white-space:nowrap;background:rgba(1,1,1,.8);color:#fff;font-size:12px;line-height:1.25;padding:10px 10px;border-radius:15px !important;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:9999;visibility:hidden} /* show on hover/focus */ #up-community .time:hover::after, #up-community .time:focus-visible::after, .upc-modal .time:hover::after, .upc-modal .time:focus-visible::after {opacity: 1;visibility: visible;transform: translateY(5px);} /* keep tooltip within viewport (basic safeguard) */ #up-community .time, .upc-modal .time {max-width: 100%;} /* reduced motion */ @media (prefers-reduced-motion: reduce) { #up-community .time::after, .upc-modal .time::after { transition: none; } } /* Base button */ .up-like{display:inline-flex;align-items:center;gap:var(--up-like-gap);padding:var(--up-like-pad-y) var(--up-like-pad-x);border-radius:var(--up-like-radius);background:var(--up-like-bg);color:var(--up-like-text);border:0;cursor:pointer;font:inherit;font-size:var(--up-like-font-size);line-height:1;transition:background .12s ease,transform .08s ease,color .12s ease} /* keep things inline in the post footer */ .upc-post .footer{display:inline-flex;align-items:center} /* [👍] 1px [count] 10px [reply/comments] */ .upc-post .footer .up-like+.up-like-count{margin-left:-11px} .upc-post .footer .up-like-count+.reply,.upc-post .footer .up-like-count+.comments-link{margin-left:0px !important} .upc-post .footer .comment-count{font-size:15px;margin-left:0px !important;line-height:1;font-weight:500} /* Keep the meta row inline */ .upc-comment .meta{display:inline-flex;align-items:center} .upc-comment .meta .time{margin-right:10px} .upc-comment .meta .up-like{margin-left:0} .upc-comment .meta .up-like+.up-like-count{margin-left:-10px} .upc-comment .meta .up-like-count+.reply{margin-left:0px} .upc-comment .meta a.like{display:none!important} /* General look */ .up-like{border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;padding:8px;border-radius:50px} .up-like:hover{background:rgba(0,0,0,.05)} .up-like[aria-pressed="true"] .fa-thumbs-up{color:var(--up-like-color,#2563eb)} .up-like-count{font-size:15px;font-weight:500;opacity:.9} /* Icon states */ .up-like .fa-thumbs-up{color:var(--up-like-muted);transition:color .12s ease,transform .08s ease,opacity .12s ease;opacity:.75} /* Liked */ .up-like[aria-pressed="true"] .fa-thumbs-up{color:var(--up-like-color);opacity:1} /* Hover / Active */ .up-like:hover{background:var(--up-like-bg-hover)} .up-like:hover .fa-thumbs-up{opacity:1} .up-like[aria-pressed="true"]:hover .fa-thumbs-up{color:var(--up-like-color-hover)} /* Focus ring */ .up-like:focus-visible{outline:var(--up-like-ring);outline-offset:2px} /* Extra focus styling (button background + icon) */ .up-like:focus-visible .fa-thumbs-up{color:var(--up-like-color-hover);opacity:1} .up-like:focus-visible{background:transparent!important} /* Tiny pulse on click (JS adds .pulse briefly) */ .up-like.pulse{transform:scale(1.04)} /* Count */ .up-like .count{font-weight:600;} /* Optional size variants */ .up-like.up-like--sm{--up-like-pad-y:4px;--up-like-pad-x:8px;--up-like-font-size:12px} .up-like.up-like--lg{--up-like-pad-y:8px;--up-like-pad-x:12px;--up-like-font-size:14px} /* Dark mode (if you use it) */ @media (prefers-color-scheme: dark){:root{--up-like-text:#e5e7eb;--up-like-muted:#9ca3af;--up-like-bg-hover:rgba(37,99,235,.15)}} /* ===== Category Pills Bar (clean) ===== */ #up-community .upc-catbar{display:flex;flex-direction:column;gap:10px;margin:12px 0 6px;padding:8px 10px;border-radius:10px;background:#f3f5f7} #up-community .upc-firstline{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px} #up-community .upc-pillbox{display:flex;flex-wrap:wrap;gap:12px;min-width:0} #up-community .upc-pill{border:1px solid rgba(0,0,0,.08);background:#fff;color:#353535;border-radius:999px;padding:9px 16px;font-size:15px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.03);transition:background .15s ease,color .15s ease,border-color .15s ease} #up-community .upc-pill:hover{background:#eef0f2} #up-community .upc-pill.active{background:#2b2f36;color:#fff;border-color:#2b2f36} #up-community .upc-pill.more{white-space:nowrap} #up-community .upc-extra-inline{display:flex;flex-wrap:wrap;gap:12px} #up-community .upc-extra-inline[hidden]{display:none!important} /* trigger (pill) */ .upc-select-wrap{position:relative;display:inline-block} .upc-dd-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 36px 10px 14px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font:600 14px/20px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111827;box-shadow:0 1px 0 rgba(0,0,0,.03);cursor:pointer} .upc-dd-btn:hover{border-color:#f5f5f5} .upc-dd-btn:focus{outline:none;border-color:#f5f5f5;box-shadow:0 0 0 3px rgba(167,139,250,.2)} /* caret */ .upc-select-wrap::after{content:"";position:absolute;right:14px;top:50%;width:10px;height:6px;transform:translateY(-50%);pointer-events:none;background:no-repeat 50%/10px 6px url("data:image/svg+xml;utf8,")} .upc-select-wrap[data-open="1"]::after{transform:translateY(-50%) rotate(180deg)} /* dropdown panel */ .upc-dd{position:absolute;z-index:50;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.10);padding:8px;animation:upcFade .12s ease} @keyframes upcFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} /* items */ .upc-dd .upc-item{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:10px;font:600 15px/20px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2937;cursor:pointer} .upc-dd .upc-item:hover,.upc-dd .upc-item[aria-selected="true"]{background:#f5f5f5} .upc-dd .upc-item .dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb} /* hide native select but keep it accessible to forms */ #upc-compose-category{position:absolute;opacity:0;pointer-events:none;height:0;width:0} /* ===== Catbar (clean layout) ===== */ #up-community .upc-firstline{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } #up-community .upc-pillbox{ display:flex; flex-wrap:wrap; gap:12px; } #up-community .upc-pill.more{ margin-left:auto; white-space:nowrap; } #up-community .upc-extra-inline{ display:flex; flex-wrap:wrap; gap:12px; } #up-community .upc-extra-inline[hidden]{ display:none!important; } /* Hidden post bar */ .upc-card.upc-hidden{display:flex;align-items:center;padding:10px 12px;margin:8px 0;border:1px solid #e5e7eb;border-radius:12px;background:#fff;} .upc-hidden .uph-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;} .upc-hidden .uph-left{display:flex;flex-direction:column;} .upc-hidden .uph-title{font-weight:600;color:#111827;line-height:1.2;} .upc-hidden .uph-sub{font-size:13px;color:#6b7280;margin-top:2px;line-height:1.2;} .upc-hidden .uph-undo{appearance:none;border:0;background:#e5e7eb;padding:6px 12px;border-radius:8px;color:#353535;font-weight:600;cursor:pointer;} .upc-hidden .uph-undo:hover{filter:brightness(0.97);} @media (prefers-color-scheme: dark){ .upc-card.upc-hidden{background:#111827;border-color:#1f2937;} .upc-hidden .uph-title{color:#e5e7eb;} .upc-hidden .uph-sub{color:#9ca3af;} .upc-hidden .uph-undo{background:#374151;color:#e5e7eb;} } /* Inline post editor */ .upc-inline-editor{margin-top:10px;padding:10px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb;} .upc-inline-editor .ipe-fields{display:flex;flex-direction:column;gap:8px;} .upc-inline-editor .ipe-title{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;} .upc-inline-editor .ipe-body{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;min-height:90px;font-size:14px;resize:vertical;} .upc-inline-editor .ipe-actions{display:flex;gap:8px;margin-top:8px;} .upc-inline-editor .ipe-actions .ipe-save{background:#1877F2;color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;} .upc-inline-editor .ipe-actions .ipe-save[aria-busy="true"]{opacity:0.7;cursor:progress;} .upc-inline-editor .ipe-actions .ipe-cancel{color:#353535 !important; background:#e5e7eb;border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;} @media (prefers-color-scheme: dark){ .upc-inline-editor{background:#111827;border-color:#1f2937;} .upc-inline-editor .ipe-title,.upc-inline-editor .ipe-body{border-color:#374151;background:#0b1220;color:#e5e7eb;} .upc-inline-editor .ipe-cancel{background:#374151;color:#353535 !important;} } /* ===== Modal actions (Cancel | Yes, Delete) ===== */ :root{ --upc-text:#111; --upc-muted:#6b7280; --upc-yellow:#bd1206; /* base */ --upc-yellow-hover:#b33229;/* hover */ --upc-yellow-press:#e5d25d;/* active */ --upc-ring:2px solid rgba(17,17,17,.35); } .upc-modal .upc-actions{display:flex;gap:14px;justify-content:flex-end;align-items:center} /* Base */ .upc-btn{font:600 14px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; border:0; cursor:pointer; border-radius:8px; transition:background .15s ease, box-shadow .15s ease, transform .02s ease} /* Cancel (gray text link style) */ .upc-btn-cancel{background:transparent !important;color:#454545 !important;padding:0 6px;height:40px} .upc-btn-cancel:hover{color:var(--upc-text)} .upc-btn-cancel:focus-visible{outline:var(--upc-ring);outline-offset:2px;border-radius:8px} /* Yes, Delete (pale yellow primary) */ .upc-btn-danger{background:var(--upc-yellow);color:#fff;padding:10px 16px;height:40px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05)} .upc-btn-danger:hover{background:var(--upc-yellow-hover)} .upc-btn-danger:active{background:var(--upc-yellow-press);transform:translateY(0.5px)} .upc-btn-danger:focus-visible{outline:var(--upc-ring);outline-offset:2px} /* Disabled states */ .upc-btn[disabled], .upc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} /* ===== UPC Confirm Modal ===== */ .upc-confirm[aria-hidden="true"]{display:none} .upc-confirm{position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;} .upc-c-overlay{position:absolute; inset:0; background:rgba(0,0,0,.5);} .upc-c-dialog{position:relative; min-width:320px; max-width:90vw; background:#fff; border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);} .upc-c-head{ margin-bottom:8px; } .upc-c-title{ margin:0; font-size:18px; line-height:1.3; } .upc-c-body{ color:#374151; margin:10px 0 16px; } .upc-c-actions{ display:flex; gap:8px; justify-content:flex-end; } .upc-c-actions .btn{ padding:8px 12px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font:inherit; } .upc-c-actions .btn.danger{ background:#ef4444; color:#fff; border-color:#ef4444; } .upc-c-actions .btn:focus{ outline:2px solid #2563eb; outline-offset:2px; } /* === Report modal specifics === */ #up-community .upc-modal .modal-headerR{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:0px solid var(--upc-border);background:var(--upc-card);position:sticky;top:0;z-index:30} #up-community .modal-innerR{padding:15px;background:#fff;max-width:590px;width:100%;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden} #up-community .upc-modal .upc-report-reasons{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding:6px 2px} #up-community .upc-modal .upc-radio{display:flex;align-items:center;gap:8px;font-size:17px} #up-community .upc-modal .modal-actions .upc-btn.primary{background:#1877f2!important;color:#fff!important} #up-community .upc-modal .upc-btn.upc-btn-ghost{background:#F3F4F6!important;border-color:#E5E7EB!important;color:#374151!important} #up-community .upc-modal .modal-headerR .mh-closeR{font-size:20px !important; background:transparent;font-weight:400;width:36px;height:36px;padding:0;border:0;box-sizing:border-box;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;color:transparent;line-height:0;flex:0 0 36px;transition:background-color .12s ease} #up-community .upc-modal .modal-headerR .mh-edgeR{} /* --- Toasts (bottom-left) --- */ .upc-toast{ position:fixed; left:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:10000; } .upc-toast{ background:#1f2937; color:#fff; border-radius:10px; padding:12px 14px; min-width:220px; max-width:360px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 8px 22px rgba(0,0,0,.28); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; } .upc-toast.show{ opacity:1; transform:none; } .upc-toast .close{ background:transparent; border:0; color:#fff; font-size:18px; line-height:1; cursor:pointer; padding:0 4px 0 12px; opacity:.85; } .upc-toast .close:hover{ opacity:1; } .upc-toast.err{background:#dc2626}