/* ======================================== Story comments (INSIGHTS-563) Loaded only by Views/Story.cshtml. Replaces the legacy `.chat` rules in style_he.css / style_en.css. Those were not merely dated: they hardcode writing direction per stylesheet — `.chat__items { direction: rtl }` in the Hebrew file and `direction: ltr` in the English one, plus `flex-direction: row-reverse` on the composer — so every layout decision had to be made twice and kept in step by hand. Everything here uses logical properties instead (margin-inline, inset-inline, text-align: start), so one rule serves Hebrew, English and Arabic, and the section inherits direction from like the rest of the newer CSS does. Tokens come from partials/tokens.css, which master.cshtml loads globally. ======================================== */ .story-comments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hp-border); } /* ---------- header ---------- */ .story-comments__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .story-comments__title { font-family: 'FbMetali', sans-serif; font-size: 24px; line-height: 1.2; font-weight: 500; color: var(--hp-text); margin: 0; } .story-comments__count { font-size: 13px; font-weight: 600; line-height: 1; color: var(--hp-text-secondary); background: #f3f0ea; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-pill); padding: 5px 11px; font-variant-numeric: tabular-nums; } /* ---------- list ---------- */ .story-comments__list { display: flex; flex-direction: column; gap: 4px; } .story-comments__item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hp-border); } .story-comments__item:last-child { border-bottom: none; } .story-comments__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #f3f0ea; } .story-comments__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .story-comments__body { flex: 1; min-width: 0; } .story-comments__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .story-comments__author { font-size: 15px; font-weight: 600; color: var(--hp-text); } .story-comments__date { font-size: 13px; color: var(--hp-text-secondary); font-variant-numeric: tabular-nums; } /* The comment itself. `overflow-wrap` rather than `word-break` so a long URL wraps without also chopping ordinary words mid-letter in Hebrew. */ .story-comments__text { font-size: 15.5px; line-height: 1.7; color: var(--hp-text); margin: 0; white-space: pre-wrap; overflow-wrap: break-word; } /* ---------- delete ---------- */ /* Pushed to the far end of the meta row whichever direction the page runs. */ .story-comments__delete-wrap { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; } .story-comments__delete, .story-comments__cancel { font: inherit; font-size: 13px; line-height: 1; padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--hp-text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .story-comments__delete:hover, .story-comments__cancel:hover { background: #f3f0ea; color: var(--hp-text); } /* Armed state. Only turns red once it will actually delete something — a permanently red button beside every one of your own comments reads as a warning about the comment rather than an available action. */ .story-comments__delete--armed { background: rgba(217, 122, 122, .14); border-color: #d97a7a; color: #8f3535; font-weight: 600; } .story-comments__delete--armed:hover { background: rgba(217, 122, 122, .22); color: #8f3535; } .story-comments__delete:disabled { opacity: .5; cursor: default; } .story-comments__delete:focus-visible, .story-comments__cancel:focus-visible, .story-comments__send:focus-visible { outline: 2px solid var(--hp-green-border); outline-offset: 2px; } /* ---------- empty state ---------- */ .story-comments__empty { font-size: 15px; color: var(--hp-text-secondary); padding: 18px 0; margin: 0; } /* ---------- composer ---------- */ .story-comments__composer { display: flex; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hp-border); } .story-comments__field { flex: 1; min-width: 0; } /* Fixed height, no resize handle: the box used to grow on every keystroke, which moved the send button under the cursor mid-sentence. */ .story-comments__input { display: block; width: 100%; min-height: 84px; resize: none; font: inherit; font-size: 15.5px; line-height: 1.6; color: var(--hp-text); background: #fff; border: 1px solid var(--hp-border); border-radius: 12px; padding: 12px 14px; text-align: start; } .story-comments__input:focus { outline: none; border-color: var(--hp-green-border); box-shadow: 0 0 0 3px rgba(101, 217, 133, .18); } .story-comments__input::placeholder { color: #9a9a9a; } .story-comments__actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .story-comments__hint { font-size: 12.5px; color: var(--hp-text-secondary); margin: 0; } /* Sits at the end of the row in both directions. */ .story-comments__send { margin-inline-start: auto; flex: none; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; padding: 11px 24px; border-radius: 10px; border: 1px solid var(--hp-green-border); background: var(--hp-green); color: var(--hp-text); cursor: pointer; transition: filter .15s ease; } .story-comments__send:hover:not(:disabled) { filter: brightness(.96); } .story-comments__send:disabled { opacity: .55; cursor: default; } .story-comments__error { font-size: 13.5px; margin: 8px 0 0; color: #8f3535; } /* Not an error — the "waiting for approval" confirmation reuses the same slot, because a second element that is empty most of the time is a second thing to keep in sync. */ .story-comments__error--ok { color: #1f6b39; } /* ---------- signed out ---------- */ .story-comments__signin { margin: 20px 0 0; padding: 16px 18px; background: #f7f5f1; border: 1px solid var(--hp-border); border-radius: 12px; font-size: 15px; color: var(--hp-text-secondary); } .story-comments__signin a { color: var(--hp-text); font-weight: 600; } /* ---------- narrow ---------- */ @media (max-width: 768px) { .story-comments { margin-top: 28px; } .story-comments__title { font-size: 20px; } .story-comments__avatar { width: 32px; height: 32px; } /* The send button takes the full row rather than being squeezed next to the hint, which is the first thing to break at this width. */ .story-comments__actions { flex-wrap: wrap; } .story-comments__send { width: 100%; margin-inline-start: 0; } }