/** * Post header controls: the ⋯ action tray, the hide flow, the inline feedback * state, and the delete confirmation. * * Everything here borrows the feed's own scale — the 38px circle and #c9c8c3 * hairline of .feed-expand, the card's 20px radius, the --feed-* palette — so * the controls read as part of the card rather than as a component dropped on * top of it. The dialog is portalled to , outside .homefeed-page, so it * uses the global theme tokens instead. * * Logical properties throughout: this feed is Arabic first, and the header must * mirror without a single left/right in the stylesheet. */ /* ------------------------------------------------------------ compact actions */ .byhf-post-actions { position: relative; display: flex; align-items: center; gap: 6px; } .byhf-post-actions__btn { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 1px solid #c9c8c3; border-radius: 50%; background: transparent; color: #5f5e58; cursor: pointer; transition: border-color var(--dur-fast, 200ms) var(--ease, ease), background-color var(--dur-fast, 200ms) var(--ease, ease), color var(--dur-fast, 200ms) var(--ease, ease); } .byhf-post-actions__btn:hover { border-color: #0b3b2e; background: var(--feed-tint, #f5f4f1); color: #0b3b2e; } .byhf-post-actions__btn:focus-visible { outline: 2px solid #0b3b2e; outline-offset: 2px; } .byhf-post-actions__btn[aria-expanded="true"] { border-color: #0b3b2e; background: var(--feed-tint, #f5f4f1); color: #0b3b2e; } .byhf-post-actions__btn svg { inline-size: 15px; block-size: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* The three dots are discs, not strokes. */ .byhf-post-actions__btn svg circle { fill: currentColor; stroke: none; } .byhf-post-actions__tray { display: flex; align-items: center; gap: 6px; opacity: 1; transform: translateX(0); transition: opacity 140ms var(--ease, cubic-bezier(.2, .7, .2, 1)), transform 140ms var(--ease, cubic-bezier(.2, .7, .2, 1)); } .byhf-post-actions__tray[hidden] { display: none; } .byhf-post-actions__btn--tray { inline-size: 32px; block-size: 32px; border-color: #c9c8c3; text-decoration: none; } .byhf-post-actions__btn--tray:hover { border-color: #0b3b2e; background: var(--feed-tint, #f5f4f1); color: #0b3b2e; } .byhf-post-actions__btn--danger:hover { color: var(--error, #a33a3a); } .byhf-post-actions__btn[aria-busy="true"] { opacity: .55; cursor: default; } /* ------------------------------------------------------- footer bookmark */ /* Sits beside the comment count in .homefeed-card__actions and borrows that row's base button styles; only the glyph and the saved state live here. Saved fills with the brand lime — light green — outlined in the accent cut so it still reads on the white card. */ .byhf-save svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .byhf-save.is-saved { color: var(--feed-accent, #567307); } .byhf-save.is-saved svg { fill: var(--lime, #B3F00A); } /* ------------------------------------------------------- inline hidden state */ /* The card keeps its box; only its contents step aside. No layout jump. */ .homefeed-card.is-byhf-hidden > *:not(.byhf-feedback) { display: none; } .homefeed-card.is-byhf-hidden { padding-block: 20px; } .byhf-feedback { display: grid; gap: 12px; animation: byhf-fade-in 140ms var(--ease, cubic-bezier(.2, .7, .2, 1)) both; } @keyframes byhf-fade-in { from { opacity: 0; } to { opacity: 1; } } .byhf-feedback__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; } .byhf-feedback__lede { margin: -6px 0 0; color: var(--feed-muted, rgba(0, 0, 0, .6)); font-size: 13px; line-height: 1.5; } .byhf-feedback__reasons { display: grid; gap: 2px; } .byhf-feedback__reason { display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding: 6px 8px; border-radius: 10px; color: var(--feed-text, rgba(0, 0, 0, .9)); font-size: 14px; line-height: 1.4; cursor: pointer; } .byhf-feedback__reason:hover { background: var(--feed-tint, #f5f4f1); } .byhf-feedback__reason input { inline-size: 17px; block-size: 17px; margin: 0; accent-color: #0b3b2e; flex: 0 0 auto; } .byhf-feedback__reason:focus-within { background: var(--feed-tint, #f5f4f1); } .byhf-feedback__note { display: grid; gap: 6px; } .byhf-feedback__note[hidden] { display: none; } .byhf-feedback__note span { color: var(--feed-muted, rgba(0, 0, 0, .6)); font-size: 13px; } .byhf-feedback__note textarea { inline-size: 100%; min-block-size: 74px; padding: 10px 12px; border: 1px solid var(--feed-line, #e8e7e3); border-radius: 10px; background: var(--feed-surface, #fefefd); color: inherit; font: inherit; font-size: 14px; resize: vertical; } .byhf-feedback__note textarea:focus-visible { outline: none; border-color: #0b3b2e; } .byhf-feedback__count { justify-self: end; color: var(--feed-soft, #a5a39c); font-size: 12px; } .byhf-feedback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .byhf-feedback__btn { min-block-size: 40px; padding-inline: 18px; border: 1px solid #c9c8c3; border-radius: 999px; background: transparent; color: var(--feed-text, rgba(0, 0, 0, .9)); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .byhf-feedback__btn:hover { border-color: #0b3b2e; background: var(--feed-tint, #f5f4f1); } .byhf-feedback__btn:focus-visible { outline: 2px solid #0b3b2e; outline-offset: 2px; } .byhf-feedback__btn--primary { border-color: #0b3b2e; background: #0b3b2e; color: #fafbf7; } .byhf-feedback__btn--primary:hover { border-color: #12513d; background: #12513d; } .byhf-feedback__btn:disabled, .byhf-feedback__btn[aria-busy="true"] { opacity: .55; cursor: default; } /* -------------------------------------------------- delete confirmation */ /* Portalled to : global tokens only, no --feed-* here. */ .byhf-confirm { inline-size: min(360px, calc(100vw - 32px)); padding: var(--s-5, 24px); border: 0; border-radius: var(--r-lg, 18px); background: var(--surface, #fff); color: var(--text, rgba(0, 0, 0, .9)); box-shadow: var(--shadow-modal, 0 30px 80px -20px rgba(11, 59, 46, 0.40)); } .byhf-confirm::backdrop { background: var(--scrim, rgba(11, 59, 46, 0.34)); } .byhf-confirm__title { margin: 0 0 var(--s-2, 8px); font-size: var(--fs-h3, 1.0625rem); font-weight: var(--fw-bold, 600); } .byhf-confirm__body { margin: 0 0 var(--s-5, 24px); color: var(--text-muted, rgba(0, 0, 0, .6)); font-size: var(--fs-body, .875rem); line-height: 1.5; } .byhf-confirm__actions { display: flex; justify-content: flex-end; gap: var(--s-2, 8px); } .byhf-confirm__btn { min-block-size: 40px; padding-inline: var(--s-4, 16px); border: 1px solid var(--line, #e2e4d9); border-radius: var(--r-full, 999px); background: var(--surface, #fff); color: var(--text, rgba(0, 0, 0, .9)); font: inherit; font-size: var(--fs-body, .875rem); font-weight: var(--fw-bold, 600); cursor: pointer; } .byhf-confirm__btn:hover { border-color: var(--ink, #0b3b2e); } .byhf-confirm__btn:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px #eef9d2); outline: none; } .byhf-confirm__btn--danger { border-color: var(--error, #a33a3a); background: var(--error, #a33a3a); color: #fff; } .byhf-confirm__btn--danger:hover { border-color: #8d3030; background: #8d3030; } .byhf-confirm__btn[aria-busy="true"] { opacity: .55; cursor: default; } /* ------------------------------------------------------------- responsive */ /* No hover means no way to reveal a small target, and no pointer to hit one with: on touch the circles stay visible and go back up to thumb size. */ @media (hover: none) { .byhf-post-actions__btn { inline-size: 40px; block-size: 40px; } .byhf-post-actions__btn svg { inline-size: 17px; block-size: 17px; } } @media (max-width: 759px) { .byhf-post-actions { gap: 4px; } .byhf-feedback__actions .byhf-feedback__btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .byhf-feedback { animation: none; } .byhf-post-actions__btn { transition: none; } }