/** * Logline Engine front-end styles. Deliberately small and theme-neutral: the * plugin owns behaviour/layout of its own components, the theme owns chrome. * Uses CSS custom properties so a theme can retheme without overriding rules. * * @package LoglineEngine */ .logline-single, .logline-archive, .logline-profile, .logline-list-page, .logline-tips-page { --le-gap: 1rem; /* Inherit the theme's brand accent when it sets one; otherwise fall back. */ --le-accent: var(--brand-accent, #2563eb); --le-accent-contrast: var(--brand-accent-contrast, #fff); --le-border: var(--brand-border, #d9dde1); --le-muted: var(--brand-muted, #5a6472); max-width: 44rem; margin: 0 auto; padding: var(--le-gap); } /* Logline Doctor brand green (a "hospital" cue). --le-doctor is used for icons, outlines and text: a deep green in light, a brighter one in dark so it stays legible on the dark card. Filled buttons use the deep green + white directly (white reads on it in both themes). */ :root { --le-doctor: #157f5f; --le-doctor-fill: #157f5f; --le-doctor-fill-hover: #0f6349; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --le-doctor: #3aad82; } } :root[data-theme="dark"] { --le-doctor: #3aad82; } /* Vote control ---------------------------------------------------------- */ .logline-vote { flex: 0 0 auto; } .logline-vote-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15em; min-width: 3rem; padding: 0.4rem 0.5rem; border: 1px solid var(--le-border); border-radius: 8px; background: var(--brand-card, #fff); color: var(--le-muted); font: inherit; line-height: 1.1; text-decoration: none; cursor: pointer; } .logline-vote-btn .logline-vote-icon { font-size: 1.1em; } .logline-vote-btn .logline-vote-score { font-weight: 600; color: var(--brand-text, #16202b); } .logline-vote-btn:hover, .logline-vote-btn:focus-visible { border-color: var(--le-accent); color: var(--le-accent); } .logline-vote-btn.is-voted { border-color: var(--le-accent); background: var(--le-accent); color: var(--le-accent-contrast); } .logline-vote-btn.is-voted .logline-vote-score { color: var(--le-accent-contrast); } .logline-vote-static { cursor: default; } /* Single logline -------------------------------------------------------- */ .logline-header { display: flex; gap: var(--le-gap); align-items: flex-start; } .logline-title { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.3; } .logline-byline { margin: 0; color: var(--le-muted); font-size: 0.9rem; } /* Author name links to the member's profile. Accent colour + hover underline so it clearly reads as clickable. */ .logline-author { color: var(--le-accent); font-weight: 600; text-decoration: none; } .logline-author:hover, .logline-author:focus-visible { text-decoration: underline; } /* Authorless content: a plain, non-linked label. */ .logline-author.is-former { color: var(--le-muted); font-weight: 400; } .logline-review-own, .logline-review-login, .logline-review-closed { color: var(--le-muted); font-style: italic; } .logline-review-own-hint { margin: 0 0 0.75rem; color: var(--le-muted); font-size: 0.92rem; } /* "Improve instead of deleting" modal. */ .logline-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 12, 20, 0.6); /* The modal is appended to , outside the plugin containers that scope these tokens, so redeclare them here. */ --le-accent: var(--brand-accent, #2563eb); --le-accent-contrast: var(--brand-accent-contrast, #fff); --le-border: var(--brand-border, #d9dde1); --le-muted: var(--brand-muted, #5a6472); } .logline-modal { max-width: 30rem; width: 100%; background: var(--brand-card, #fff); border: 1px solid var(--le-border); border-radius: var(--brand-radius, 12px); box-shadow: 0 20px 60px rgba(6, 12, 20, 0.4); padding: 1.5rem; } .logline-modal-title { margin: 0 0 0.5rem; font-size: 1.2rem; } .logline-modal-body { margin: 0 0 1.25rem; color: var(--le-muted); } .logline-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .logline-modal-delete { font: inherit; font-weight: 600; background: transparent; border: 0; color: var(--brand-accent-2, #b00858); cursor: pointer; padding: 0.5rem; text-decoration: underline; } .logline-modal-delete:hover { color: var(--brand-accent-2-hover, #8c0446); } /* Styled confirm dialog (replaces native window.confirm). Uses the modal shell above; the confirm button reads as destructive, actions align right. */ .logline-confirm .logline-modal-actions { justify-content: flex-end; } .logline-confirm-ok { font: inherit; font-size: 0.85rem; font-weight: 700; color: #fff; background: #b3261e; border: 1px solid #b3261e; border-radius: 8px; padding: 0.4rem 0.95rem; cursor: pointer; } .logline-confirm-ok:hover, .logline-confirm-ok:focus-visible { background: #8f1d17; border-color: #8f1d17; color: #fff; } /* "Review now" CTA — sits at the bottom-right of the logline card. */ .logline-card-review { margin: 0.6rem 0 0; text-align: right; } .logline-review-now { display: inline-block; font-size: 0.85rem; font-weight: 700; text-decoration: none; padding: 0.35rem 0.85rem; border-radius: 999px; /* Magenta — the site's call-to-action colour (post + review). Fixed hex, NOT the theme accent token, so it stays the exact same magenta in dark mode. */ background: #b00858; color: #fff; } .logline-review-now:hover, .logline-review-now:focus-visible { background: #8c0446; color: #fff; } /* Author actions (edit / close / delete) + inline edit form. */ .logline-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; padding-top: 1rem; border-top: 1px solid var(--le-border); } .logline-action { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--le-muted); background: transparent; border: 1px solid var(--le-border); border-radius: 8px; padding: 0.35rem 0.8rem; cursor: pointer; } .logline-action:hover { color: var(--le-accent); border-color: var(--le-accent); } .logline-delete-btn:hover { color: #b3261e; border-color: #b3261e; } /* Follow / favourite bar. */ .logline-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0; } .logline-social-btn { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.4rem 0.9rem; border: 1px solid var(--le-border); border-radius: 999px; background: var(--brand-card, #fff); color: var(--le-muted); cursor: pointer; } .logline-social-btn[aria-pressed="true"] { border-color: var(--le-accent); color: var(--le-accent); } .logline-favorite-btn[aria-pressed="true"] { color: var(--brand-accent-2, #b00858); border-color: var(--brand-accent-2, #b00858); } .logline-social-btn .lbl-on { display: none; } .logline-social-btn[aria-pressed="true"] .lbl-off { display: none; } .logline-social-btn[aria-pressed="true"] .lbl-on { display: inline; } .logline-follow-count:not(:empty) { margin-left: 0.15rem; font-variant-numeric: tabular-nums; opacity: 0.8; } .logline-social-login { color: var(--le-muted); margin: 1.25rem 0; } /* Follow control on the member profile header. */ .profile-follow { margin: 0.85rem 0 0; } .profile-follower-count { color: var(--le-muted); } .logline-edit-form { margin: 0 0 1.5rem; } .logline-edit-form textarea, .logline-edit-form input[type="text"] { width: 100%; padding: 0.6rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; box-sizing: border-box; } .logline-edit-cancel { font: inherit; background: transparent; border: 0; color: var(--le-muted); text-decoration: underline; cursor: pointer; } .logline-byline time::before, .logline-views::before { content: " · "; } .logline-level { font-weight: 700; } /* The level links to the members at that level; keep its level colour and add a hover underline so it reads as clickable. */ .logline-level-link { text-decoration: none; } .logline-level-link:hover, .logline-level-link:focus-visible { text-decoration: underline; } /* Per-level colours, tuned to stay legible (bold text) on both the light and the dark background — the raw brand level colours (e.g. Singularity #000, Summitry #bababa) fail on one background or the other. */ .logline-level--penpusher { color: #3e7391; } .logline-level--logliner { color: #157f5f; } .logline-level--samurai { color: #9a6100; } .logline-level--mentor { color: #b00858; } .logline-level--overlord { color: #3f77a8; } .logline-level--summitry { color: #5f6b78; } .logline-level--singularity { color: #16202b; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logline-level--penpusher { color: #7cb3d6; } :root:not([data-theme="light"]) .logline-level--logliner { color: #45c79c; } :root:not([data-theme="light"]) .logline-level--samurai { color: #e0a437; } :root:not([data-theme="light"]) .logline-level--mentor { color: #ef6fa6; } :root:not([data-theme="light"]) .logline-level--overlord { color: #82b2da; } :root:not([data-theme="light"]) .logline-level--summitry { color: #aab6c2; } :root:not([data-theme="light"]) .logline-level--singularity { color: #dfe7ee; } } :root[data-theme="dark"] .logline-level--penpusher { color: #7cb3d6; } :root[data-theme="dark"] .logline-level--logliner { color: #45c79c; } :root[data-theme="dark"] .logline-level--samurai { color: #e0a437; } :root[data-theme="dark"] .logline-level--mentor { color: #ef6fa6; } :root[data-theme="dark"] .logline-level--overlord { color: #82b2da; } :root[data-theme="dark"] .logline-level--summitry { color: #aab6c2; } :root[data-theme="dark"] .logline-level--singularity { color: #dfe7ee; } .logline-body { margin: var(--le-gap) 0 2rem; } /* Category row with a flush-right "More details" disclosure. The optional synopsis stays collapsed and expands full-width below the row, so the first review sits high on the page. */ .logline-subhead { position: relative; margin: var(--le-gap) 0 1.5rem; min-height: 1.6em; } .logline-subhead .logline-categories { margin: 0; padding-right: 8rem; /* clear the flush-right toggle */ } .logline-details { margin: 0; } .logline-details-toggle { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-weight: 600; color: var(--le-accent); list-style: none; } /* Hide the native disclosure triangle; use our own caret. */ .logline-details-toggle::-webkit-details-marker { display: none; } .logline-details-toggle::before { content: "\25B8"; /* ▸ */ display: inline-block; transition: transform 0.15s ease; } .logline-details[open] > .logline-details-toggle::before { transform: rotate(90deg); } /* Label swaps "More details" -> "Hide" on open (CSS only, no JS). */ .logline-details-less { display: none; } .logline-details[open] .logline-details-more { display: none; } .logline-details[open] .logline-details-less { display: inline; } .logline-details > .logline-body { margin-top: 0.75rem; } /* When a logline has details but no category, the disclosure is the first row item, so reserve the toggle's line with padding (padding doesn't collapse the way a margin would) — otherwise the flush-right toggle overlaps the synopsis. */ .logline-subhead > .logline-details:first-child { padding-top: 1.9rem; } /* Reviews --------------------------------------------------------------- */ .logline-reviews h2 { padding-bottom: 0.4rem; border-bottom: 2px solid var(--le-border); } .logline-review { display: flex; gap: var(--le-gap); padding: var(--le-gap) 0; border-bottom: 1px solid var(--le-border); } .logline-review.is-accepted { /* Translucent green tint so it reads on both light and dark backgrounds. */ background: rgba(30, 175, 136, 0.12); border-left: 3px solid #1eaf88; padding-left: 0.75rem; } /* A deep-linked review (arrived via ?r=#review-): briefly highlight it so, however far down the list it sits, it's obvious which one was meant. */ .logline-review:target { background: var(--le-surface-2, rgba(72, 128, 160, 0.1)); border-left: 3px solid var(--le-accent, #3e7391); padding-left: 0.75rem; scroll-margin-top: 5rem; animation: logline-review-flash 1.6s ease-out 1; } @keyframes logline-review-flash { 0%, 40% { background: var(--le-surface-2, rgba(72, 128, 160, 0.22)); } 100% { background: var(--le-surface-2, rgba(72, 128, 160, 0.1)); } } .logline-review-main { flex: 1 1 auto; min-width: 0; } .logline-review-meta { margin-bottom: 0.4rem; color: var(--le-muted); font-size: 0.85rem; } .logline-review-meta time::before { content: " · "; } .logline-accepted-badge { margin-left: 0.4rem; color: #1a8a68; font-weight: 700; } .logline-review-body { overflow-wrap: break-word; } .logline-accept-btn { margin-top: 0.5rem; padding: 0.3rem 0.7rem; border: 1px solid var(--le-border); border-radius: 6px; background: var(--brand-card, #fff); color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; } .logline-accept-btn.is-accepted { border-color: #1eaf88; color: #1a8a68; font-weight: 700; } /* The accepted greens are legible on white; lighten them for the dark surface. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logline-accepted-badge, :root:not([data-theme="light"]) .logline-accept-btn.is-accepted { color: #45c79c; } } :root[data-theme="dark"] .logline-accepted-badge, :root[data-theme="dark"] .logline-accept-btn.is-accepted { color: #45c79c; } /* Review form ----------------------------------------------------------- */ .logline-review-form { margin-top: 1.5rem; } /* Collapsed "Write a review" prompt. Hidden by default (no-JS shows the full form); JS adds .is-collapsed to swap the fields for the one-line prompt, which looks like an empty text box inviting a click. */ .logline-review-prompt { display: none; } .logline-review-form.is-collapsed .logline-review-fields { display: none; } .logline-review-form.is-collapsed .logline-review-prompt { display: block; width: 100%; text-align: left; padding: 0.8rem 1rem; border: 1px solid var(--le-border); border-radius: 10px; background: var(--brand-card, #fff); color: var(--le-muted); font: inherit; cursor: text; } .logline-review-form.is-collapsed .logline-review-prompt:hover, .logline-review-form.is-collapsed .logline-review-prompt:focus-visible { border-color: var(--le-accent); color: var(--brand-text, #16202b); } .logline-form-field label { display: block; margin-bottom: 0.3rem; font-weight: 600; } .logline-review-form textarea { width: 100%; padding: 0.6rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; box-sizing: border-box; } .logline-submit-btn { padding: 0.55rem 1.1rem; border: 0; border-radius: 8px; background: var(--le-accent); color: var(--le-accent-contrast); font: inherit; font-weight: 600; cursor: pointer; } .logline-submit-btn:disabled { opacity: 0.6; cursor: progress; } .logline-form-status { margin-left: 0.6rem; color: #b3261e; } .logline-form-status.logline-form-error { font-weight: 600; } /* Post-a-logline form --------------------------------------------------- */ .logline-submit-intro { color: var(--le-muted); margin: 0 0 1.5rem; } .logline-submit-form { max-width: 42rem; } .logline-submit-form textarea { width: 100%; padding: 0.6rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; box-sizing: border-box; } .logline-contact-form input[type="text"], .logline-contact-form input[type="email"] { width: 100%; max-width: 28rem; padding: 0.55rem 0.7rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; box-sizing: border-box; } .logline-submit-authcta { display: flex; gap: 0.75rem; align-items: center; } /* Archive --------------------------------------------------------------- */ .logline-list { margin: 0; padding: 0; list-style: none; } .logline-list-item { display: flex; gap: var(--le-gap); align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--le-border); } /* Fill the row so the bottom-right "Review now" pill reaches the card edge. */ .logline-list-main { flex: 1 1 auto; min-width: 0; } .logline-list-score { flex: 0 0 auto; min-width: 3rem; color: var(--le-muted); font-weight: 600; text-align: right; } /* A logline with no votes/reviews yet: recede the score, and phrase the review count as a gentle invitation instead of a stark "0". */ .logline-list-score.is-quiet { opacity: 0.4; font-weight: 400; } .logline-meta-quiet { font-style: italic; } .logline-list-title { margin: 0 0 0.2rem; font-size: 1.1rem; line-height: 1.35; } .logline-list-meta { margin: 0; color: var(--le-muted); font-size: 0.85rem; } .logline-pagination { margin-top: 1.5rem; } .logline-pagination .page-numbers { padding: 0.3rem 0.6rem; margin-right: 0.25rem; border: 1px solid var(--le-border); border-radius: 6px; text-decoration: none; } .logline-pagination .page-numbers.current { background: var(--le-accent); color: var(--le-accent-contrast); border-color: var(--le-accent); } /* Archive header: title + jump-to-year, and the load-more button. */ .logline-archive-header { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .logline-archive-header h1 { margin: 0; } .logline-yearjump { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .logline-yearjump label { color: var(--le-muted); font-weight: 600; } .logline-yearjump select { padding: 0.35rem 0.5rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; background: var(--brand-bg, #fff); color: inherit; } .logline-loadmore-wrap { margin-top: 1.5rem; text-align: center; } .logline-loadmore { font: inherit; font-weight: 600; padding: 0.6rem 1.5rem; border: 1px solid var(--le-border); border-radius: 999px; background: transparent; color: var(--le-accent); cursor: pointer; } .logline-loadmore:hover { border-color: var(--le-accent); background: color-mix(in srgb, var(--le-accent) 8%, transparent); } .logline-loadmore:disabled { opacity: 0.6; cursor: progress; } /* Reviews / Members list pages ----------------------------------------- */ .logline-list-header { display: flex; align-items: baseline; gap: 0.6rem; border-bottom: 2px solid var(--le-border); padding-bottom: 0.4rem; margin-bottom: 1rem; } .logline-list-header h1 { margin: 0; font-size: 1.5rem; } .logline-list-count { margin: 0; color: var(--le-muted); font-variant-numeric: tabular-nums; } .review-list, .member-list { list-style: none; margin: 0; padding: 0; } .review-list-item { position: relative; padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--le-border); border-radius: 6px; transition: background-color 0.12s ease; } /* Whole item is clickable (the review, not the logline): the link is stretched over the card, while the byline's profile link stays clickable above it. */ .review-list-item:hover, .review-list-item:focus-within { background: var(--le-surface-2, rgba(127, 127, 127, 0.08)); } .review-list-item.is-accepted { border-left: 3px solid var(--le-accent-2, #b00858); padding-left: 0.75rem; } .review-list-meta { position: relative; z-index: 1; margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--le-muted); } /* Keep the author link (inside the byline) clickable above the stretched link. */ .review-list-meta a { position: relative; z-index: 2; } .review-list-on { font-weight: 600; } /* Raised above the stretched .review-list-link overlay so the title stays independently clickable (middle-click / open-in-new-tab). */ .review-list-on-link { position: relative; z-index: 1; color: inherit; text-decoration: none; } .review-list-on-link:hover, .review-list-on-link:focus-visible { text-decoration: underline; } .review-list-meta time::before { content: " · "; } .review-list-link { display: block; color: inherit; text-decoration: none; } .review-list-link::after { content: ""; position: absolute; inset: 0; } .review-list-body { display: block; overflow-wrap: break-word; } /* Members list controls: level dropdown + sort caret. */ .logline-list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0.75rem 0 0.25rem; } .member-filter { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; color: var(--le-muted); } .member-filter select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--le-border); border-radius: 8px; background: var(--brand-card, #fff); color: inherit; } .member-sort { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--le-accent); text-decoration: none; } .member-sort:hover, .member-sort:focus-visible { text-decoration: underline; } .member-sort-caret { font-size: 0.75rem; } .member-card { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--le-border); } /* Content fills the row; the follow button sits top-right, admin actions drop to their own row — so there's no dead gap for standard viewers. */ .member-main { flex: 1 1 auto; min-width: 0; } .member-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .member-identity { min-width: 0; } .member-admin-actions { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.5rem; } .member-avatar { flex: 0 0 auto; line-height: 0; } .member-avatar img { border-radius: 50%; } .member-main { min-width: 0; } .member-name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; } .member-rep { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--le-muted); } .member-meta { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--le-muted); } .member-count { color: var(--le-muted); } .member-count + .member-count::before { content: " · "; color: var(--le-muted); } /* Profile --------------------------------------------------------------- */ .profile-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--le-border); margin-bottom: 1.25rem; } .profile-tab { font: inherit; font-weight: 600; color: var(--le-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 0.6rem 0.9rem; cursor: pointer; } .profile-tab[aria-selected="true"] { color: inherit; border-bottom-color: var(--le-accent); } .profile-tab-count { color: var(--le-muted); font-weight: 400; font-variant-numeric: tabular-nums; } .profile-panel { margin-bottom: 1rem; } .profile-header { display: flex; gap: var(--le-gap); align-items: flex-start; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--le-border); } .profile-avatar-img { border-radius: 50%; } .profile-name { margin: 0 0 0.25rem; font-size: 1.6rem; line-height: 1.2; } .profile-rep { margin: 0 0 0.35rem; font-size: 1.05rem; } .profile-level { font-weight: 700; } .profile-next-level { margin: 0 0 0.5rem; color: var(--le-muted); font-size: 0.9rem; } .profile-stats { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--le-muted); font-size: 0.9rem; } .badge-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .badge-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25rem 0.7rem; border: 1px solid var(--le-border); border-radius: 999px; font-size: 0.85rem; } .badge-dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--le-muted); } .logline-profile section { margin-bottom: 2rem; } .logline-profile h2 { padding-bottom: 0.4rem; border-bottom: 1px solid var(--le-border); } .profile-review-list { margin: 0; padding: 0; list-style: none; } .profile-review-item { padding: 0.85rem 0; border-bottom: 1px solid var(--le-border); } .profile-review-on { margin: 0 0 0.3rem; color: var(--le-muted); font-size: 0.9rem; } .profile-review-excerpt { overflow-wrap: break-word; } .logline-empty { color: var(--le-muted); } @media (max-width: 480px) { .logline-title { font-size: 1.25rem; } .profile-header { flex-direction: column; } } /* Swipe feed (Phase 2) -------------------------------------------------- */ .swipe-feed { /* Self-contained tokens so the feed works wherever it is dropped (e.g. the theme's mobile home) without needing the .logline-list-page scope. */ --le-accent: var(--brand-accent, #2563eb); --le-accent-contrast: var(--brand-accent-contrast, #fff); --le-border: var(--brand-border, #d9dde1); --le-muted: var(--brand-muted, #5a6472); max-width: 30rem; margin: 0 auto; } .swipe-stack { position: relative; /* Height is set by swipe.js to fit the top card's full logline; this is the pre-JS / short-card floor. */ min-height: 15rem; margin: 1.25rem 0 1.5rem; } .swipe-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.5rem; background: var(--brand-card, #ffffff); border: 1px solid var(--le-border); border-radius: 16px; box-shadow: 0 8px 30px rgba(16, 32, 43, 0.12); transition: transform 0.28s ease, opacity 0.28s ease; will-change: transform; touch-action: pan-y; user-select: none; overflow: hidden; } .swipe-card.is-top { cursor: grab; } .swipe-card.is-dragging { transition: none; cursor: grabbing; } .swipe-card.is-gone { opacity: 0; } .swipe-card.is-gone-right { transform: translate(140%, 0) rotate(18deg) !important; } .swipe-card.is-gone-left { transform: translate(-140%, 0) rotate(-18deg) !important; } /* Drag-direction hint badges. */ .swipe-card::after { position: absolute; top: 1.1rem; padding: 0.15rem 0.6rem; border: 2px solid currentColor; border-radius: 8px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; opacity: 0; transition: opacity 0.12s ease; } .swipe-card.is-like::after { content: "LIKE"; right: 1.1rem; color: var(--brand-accent-2, #b00858); opacity: 1; } .swipe-card.is-pass::after { content: "PASS"; left: 1.1rem; color: var(--le-muted); opacity: 1; } .swipe-card-kicker { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--le-muted); } .swipe-card-logline { margin: 0.4rem 0 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; } .swipe-card-byline { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--le-muted); } .swipe-card-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; font-size: 0.85rem; color: var(--le-muted); } .swipe-card-hint { margin-left: auto; font-style: italic; } .swipe-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; } .swipe-btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--le-border); background: var(--brand-card, #ffffff); color: var(--le-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, transform 0.12s ease; } .swipe-btn:hover { transform: translateY(-1px); } .swipe-pass:hover, .swipe-pass:focus-visible { color: #b3261e; border-color: #b3261e; } .swipe-like { color: var(--brand-accent-2, #b00858); } .swipe-like:hover, .swipe-like:focus-visible { border-color: var(--brand-accent-2, #b00858); } .swipe-undo { width: 44px; height: 44px; font-size: 1.1rem; } .swipe-cap { margin: 1rem 0 0; text-align: center; font-size: 0.85rem; color: var(--le-muted); font-variant-numeric: tabular-nums; } .swipe-hint { margin: 0.35rem 0 0; text-align: center; font-size: 0.8rem; color: var(--le-muted); } .swipe-empty { text-align: center; color: var(--le-muted); padding: 3rem 1rem; } .swipe-guest-note { margin: 0 auto 1rem; max-width: 30rem; text-align: center; color: var(--le-muted); font-size: 0.9rem; } .swipe-guest-login { font: inherit; background: none; border: 0; padding: 0; color: var(--le-accent); text-decoration: underline; cursor: pointer; } /* Swipe ⇄ Scroll mode toggle + back-to-swipe (use --brand-* so they work in the theme home feed, outside the plugin's --le-* token scope). */ .swipe-modes { max-width: 30rem; margin: 0 auto 0.5rem; text-align: right; } .swipe-mode-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--brand-accent, #3e7391); text-decoration: none; border: 1px solid var(--brand-border, #e2e6ea); border-radius: 999px; padding: 0.3rem 0.8rem; background: var(--brand-card, #fff); } .swipe-mode-link:hover, .swipe-mode-link:focus-visible { border-color: var(--brand-accent, #3e7391); } /* The archive's "Swipe instead" link is mobile-only (swiping is the mobile experience). */ .swipe-mode-mobile { display: none; } @media ( max-width: 768px ) { .swipe-mode-mobile { display: inline-flex; } } .logline-back-swipe { margin: 0 0 1rem; } .logline-back-swipe a { font-weight: 600; text-decoration: none; } .logline-back-swipe a:hover, .logline-back-swipe a:focus-visible { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .swipe-card { transition: opacity 0.2s ease; } } /* Logline Generator wizard (guided "Post your logline"). ------------------ */ .logline-gen-cta { margin: 0 0 1.25rem; } .logline-gen-toggle { /* Amber/orange accent — the same colour as the ✨ glyph, so the border and the icon read as one. Brightens to yellow on dark where the deep amber would be muddy. */ --gen-accent: #b45309; font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; cursor: pointer; padding: 0.9rem 1.15rem; border: 2px solid var(--gen-accent); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-gen-toggle-text { min-width: 0; } /* The chevron signals the panel expands on click. It flips when open. */ .logline-gen-chevron { flex: 0 0 auto; display: inline-flex; color: var(--gen-accent); transition: transform 0.2s ease; } .logline-gen-toggle[aria-expanded="true"] .logline-gen-chevron { transform: rotate(180deg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logline-gen-toggle { --gen-accent: #fbbf24; } } :root[data-theme="dark"] .logline-gen-toggle { --gen-accent: #fbbf24; } .logline-gen-toggle:hover, .logline-gen-toggle:focus-visible { background: var(--brand-surface, #f6f8fa); } .logline-gen-toggle-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--gen-accent); } .logline-gen-glyph { flex: 0 0 auto; color: var(--gen-accent); } .logline-gen-toggle-sub { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--le-muted); } /* Equal height for the two post fields, so they read as balanced. */ .logline-submit-form textarea { min-height: 8rem; } /* The optional "more plot details" field is secondary — a third shorter than the logline field so it doesn't dominate the form. */ #logline-new-content { min-height: 5.3rem; } .logline-gen { margin: 0 0 1.75rem; padding: 1.25rem; border: 1px solid var(--le-border); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-gen-question { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.35; margin: 0 0 0.35rem; } .logline-gen-req { color: var(--brand-accent-2, #b00858); } .logline-gen-help { margin: 0 0 0.75rem; color: var(--le-muted); font-size: 0.9rem; } .logline-gen-input { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--le-border); border-radius: var(--brand-radius, 10px); font: inherit; box-sizing: border-box; } .logline-gen-input.has-error { border-color: var(--brand-accent-2, #b00858); outline: 1px solid var(--brand-accent-2, #b00858); } .logline-gen-nav { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .logline-gen-btn { font: inherit; font-weight: 600; padding: 0.45rem 1rem; border-radius: var(--brand-radius, 10px); border: 1px solid var(--le-border); background: transparent; color: var(--le-text, inherit); cursor: pointer; } .logline-gen-next, .logline-gen-use { margin-left: auto; } /* Form actions row: lay out the submit button, any hand-off link and the status in a line with comfortable spacing (wraps on narrow screens). */ .logline-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; } /* Post-your-logline flow reads left → right: check it in the Doctor first, then Post logline flushed to the right edge. */ .logline-submit-page .logline-form-actions .logline-submit-btn { margin-left: auto; } /* Post-form hand-off to the Logline Doctor — a secondary "pill" button with a little breathing room from Post logline, and a stethoscope for identity. */ .logline-post-doctor { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.05rem; border: 1px solid var(--le-doctor); border-radius: 999px; color: var(--le-doctor); background: transparent; font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: background-color 0.12s ease, color 0.12s ease; } /* Stethoscope icon drawn in currentColor, so it always matches the link colour (accent) in both light and dark — an emoji glyph doesn't recolour reliably. */ .logline-post-doctor-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; } .logline-post-doctor:hover, .logline-post-doctor:focus-visible { background: var(--le-doctor-fill); border-color: var(--le-doctor-fill); color: #fff; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .logline-post-doctor { transition: none; } } /* Hand-off link to the Logline Doctor (an styled as a secondary button). */ .logline-gen-doctor { display: inline-flex; align-items: center; text-decoration: none; color: var(--le-doctor); border-color: var(--le-doctor); } .logline-gen-doctor:hover { background: var(--le-doctor-fill); border-color: var(--le-doctor-fill); color: #fff; } .logline-gen-final { font-size: 1.2rem; line-height: 1.5; font-weight: 600; margin: 0 0 0.75rem; } .logline-gen-note { color: var(--le-muted); font-size: 0.9rem; margin: 0 0 0.5rem; } /* Tips page (/tips/) ------------------------------------------------------ */ .logline-tips-page { max-width: 46rem; } /* Stack the header (the long title shouldn't sit beside the intro). */ .logline-tips-page .logline-list-header { display: block; } .logline-tips-page .logline-list-header h1 { margin-bottom: 0.5rem; } .logline-tips-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; list-style: none; margin: 0 0 2rem; padding: 0.9rem 1rem; border: 1px solid var(--le-border); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); counter-reset: tip; font-size: 0.9rem; } .logline-tips-toc li { counter-increment: tip; } .logline-tips-toc li::before { content: counter(tip) ". "; color: var(--le-muted); } /* Sections are open by default (works with no JS — the full page). When JS is present (.tips-js) it becomes an accordion: only the section the reader opens shows, revealed in place under the contents list with no scroll. */ .logline-tip { margin: 0; padding-top: 1rem; border-top: 1px solid var(--le-border); } .logline-tips-page.tips-js .logline-tip { display: none; } .logline-tips-page.tips-js .logline-tip.is-open { display: block; } .logline-tip-title { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.3rem; margin: 0 0 0.35rem; } .logline-tip-num { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--le-accent); color: var(--le-accent-contrast); font-size: 0.95rem; font-weight: 700; } .logline-tip-hint { margin: 0 0 0.5rem; font-weight: 600; } .logline-tip-why { margin: 0 0 0.5rem; color: var(--le-muted); } .logline-tip-framing { margin: 0 0 1.25rem; } .logline-tip-examples-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--le-muted); margin: 1.5rem 0 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--le-border); } .logline-tip-examples { margin: 0 0 0.75rem; padding: 0; list-style: none; } .logline-tip-back { margin: 0; font-size: 0.85rem; } /* Browse sort nav (/loglines/{sort}/). */ .logline-sort-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0.75rem 0 0; } .logline-sort-link { font-size: 0.85rem; font-weight: 600; color: var(--le-muted); text-decoration: none; padding: 0.25rem 0.7rem; border: 1px solid var(--le-border); border-radius: 999px; } .logline-sort-link:hover, .logline-sort-link:focus-visible { color: var(--le-accent); border-color: var(--le-accent); } .logline-sort-link.is-active { color: var(--le-accent-contrast); background: var(--le-accent); border-color: var(--le-accent); } /* Level emblem (icon) inline in the feed card meta. */ .logline-list-level { display: inline-flex; vertical-align: middle; margin: -0.15rem 0 0; } .logline-list-level svg { display: block; } /* Post-form limit/anti-spam notice (styled when actionable). */ .logline-form-status.logline-form-notice { display: block; margin-top: 0.85rem; padding: 0.85rem 1rem; border: 1px solid var(--le-border); border-left: 3px solid var(--brand-accent-2, #b00858); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-form-notice-title { display: block; font-weight: 700; } .logline-form-notice-sub { display: block; margin-top: 0.3rem; color: var(--le-muted); font-size: 0.92rem; } /* Report / flag control (trust & safety) ------------------------------- */ .logline-review-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; } .logline-report { margin: 1rem 0 0; } .logline-report--review { margin: 0; margin-left: auto; /* push to the right of the accept button in the foot row */ } .logline-report-btn { font: inherit; font-size: 0.8rem; color: var(--le-muted); background: transparent; border: 0; padding: 0.15rem 0.25rem; cursor: pointer; text-decoration: none; } .logline-report-btn:hover, .logline-report-btn:focus-visible { color: #b3261e; text-decoration: underline; } .logline-report-done { font-size: 0.8rem; color: var(--le-muted); font-style: italic; } .logline-report-form { margin-top: 0.6rem; padding: 0.85rem 1rem; max-width: 30rem; border: 1px solid var(--le-border); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-report--review .logline-report-form { /* Break out of the inline foot row so the form sits full-width below. */ position: relative; z-index: 1; } .logline-report-field { display: block; margin-bottom: 0.6rem; } .logline-report-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--le-muted); margin-bottom: 0.25rem; } .logline-report-reason, .logline-report-note { width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; box-sizing: border-box; background: var(--brand-bg, #fff); color: inherit; } .logline-report-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .logline-report-send { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--le-accent-contrast); background: var(--le-accent); border: 1px solid var(--le-accent); border-radius: 8px; padding: 0.35rem 0.9rem; cursor: pointer; } .logline-report-cancel { font: inherit; font-size: 0.85rem; background: transparent; border: 0; color: var(--le-muted); text-decoration: underline; cursor: pointer; } .logline-report-status { font-size: 0.8rem; color: #b3261e; } /* Block control on the member profile ---------------------------------- */ .profile-follow.is-blocked .profile-follow-btn { display: none; /* can't follow someone you've blocked */ } .profile-block-btn[aria-pressed="true"] { color: #b3261e; border-color: #b3261e; } /* Email-verification notice (double opt-in gate) ----------------------- */ .logline-verify-notice { margin: 1rem 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--le-border); border-left: 3px solid var(--brand-accent-2, #b00858); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-verify-title { display: block; font-weight: 700; margin-bottom: 0.25rem; } .logline-verify-body { margin: 0; color: var(--le-muted); font-size: 0.95rem; } .logline-verify-resend { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--le-accent); background: transparent; border: 0; padding: 0; text-decoration: underline; cursor: pointer; } .logline-verify-resend:disabled { color: var(--le-muted); cursor: default; } .logline-verify-status { display: inline-block; margin-left: 0.4rem; font-size: 0.85rem; color: var(--le-muted); } /* Drafts saved when the daily posting cap is hit ----------------------- */ .logline-drafted-notice { border-left-color: var(--le-accent, #b00858); } .logline-drafts { margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--le-border); } .logline-drafts h2 { margin: 0 0 0.25rem; font-size: 1.15rem; } .logline-drafts-note { margin: 0 0 1rem; color: var(--le-muted); font-size: 0.92rem; } .logline-drafts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .logline-draft { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--le-border); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); } .logline-draft-title { font-weight: 600; overflow-wrap: anywhere; /* Long drafts collapse to three lines so they don't dominate the card. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .logline-draft-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.85rem; } .logline-draft-delete { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--le-muted); background: transparent; border: 0; padding: 0.35rem 0.5rem; cursor: pointer; } .logline-draft-delete:hover { color: var(--brand-accent-2, #b00858); text-decoration: underline; } .logline-draft-status { font-size: 0.85rem; font-weight: 600; color: #c2410c; /* warning red-orange — readable on light backgrounds */ } /* Brighter amber-yellow for dark mode, where the red-orange is muddy. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logline-draft-status { color: #fbbf24; } } :root[data-theme="dark"] .logline-draft-status { color: #fbbf24; } /* Account & privacy controls (own profile) ----------------------------- */ .account-privacy { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--le-border); } .account-privacy-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-bottom: 1px solid var(--le-border); } .account-privacy-copy { flex: 1 1 18rem; } .account-privacy-note { margin: 0.25rem 0 0; color: var(--le-muted); font-size: 0.9rem; } .account-privacy-action { flex: 0 0 auto; text-decoration: none; white-space: nowrap; } .account-delete-confirm { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.9rem; color: var(--le-muted); } .account-delete-btn { font: inherit; font-size: 0.9rem; font-weight: 600; color: #b3261e; background: transparent; border: 1px solid #b3261e; border-radius: 999px; padding: 0.4rem 1.1rem; cursor: pointer; } .account-delete-btn:hover { color: #fff; background: #b3261e; } /* Feed-card actions (admin delete / report), flushed right ------------- */ .logline-card-actions { margin-left: auto; align-self: center; flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; } .logline-card-delete { font: inherit; font-size: 0.8rem; color: var(--le-muted); background: transparent; border: 0; padding: 0.15rem 0.3rem; cursor: pointer; } .logline-card-delete:hover, .logline-card-delete:focus-visible { color: #b3261e; text-decoration: underline; } /* On a feed card the report form opens as a right-aligned popover so it never stretches the card row. */ .logline-report--card { position: relative; margin: 0; } .logline-report--card .logline-report-form { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 20; width: 20rem; max-width: 80vw; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } /* Member-list actions (follow + admin block/delete) -------------------- */ .member-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; } .member-follow-btn { font-size: 0.8rem; padding: 0.25rem 0.75rem; } .member-admin-link { font-size: 0.8rem; color: var(--le-muted); text-decoration: none; white-space: nowrap; } .member-admin-link:hover, .member-admin-link:focus-visible { text-decoration: underline; color: var(--le-accent); } .member-admin-delete, .member-admin-delete:hover { color: #b3261e; } /* Admin suspend control on a member profile ---------------------------- */ .profile-admin-actions { margin: 0.6rem 0 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .profile-admin-link { color: #b3261e; text-decoration: none; font-weight: 600; } .profile-admin-link:hover, .profile-admin-link:focus-visible { text-decoration: underline; } .profile-suspended-flag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } /* Members-list search --------------------------------------------------- */ .member-search { display: flex; gap: 0.4rem; flex: 1 1 14rem; min-width: 0; } .member-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid var(--le-border); border-radius: 8px; font: inherit; background: var(--brand-bg, #fff); color: inherit; } .member-search button { flex: 0 0 auto; font: inherit; font-weight: 600; color: var(--le-accent-contrast); background: var(--le-accent); border: 0; border-radius: 8px; padding: 0.45rem 0.9rem; cursor: pointer; } /* Front-end moderation: remove (+ suspend) control ---------------------- */ .logline-moderate-btn { font: inherit; font-size: 0.8rem; font-weight: 600; color: #b3261e; background: transparent; border: 1px solid #b3261e; border-radius: 999px; padding: 0.2rem 0.75rem; cursor: pointer; white-space: nowrap; } .logline-moderate-btn:hover, .logline-moderate-btn:focus-visible { color: #fff; background: #b3261e; } .logline-moderate { margin: 1rem 0 0; } .logline-moderate--review { margin-left: auto; } /* Members-list "Suspended" filter (moderators) ------------------------- */ .member-suspended-filter { font-size: 0.85rem; color: #b3261e; text-decoration: none; white-space: nowrap; align-self: center; } .member-suspended-filter:hover, .member-suspended-filter:focus-visible { text-decoration: underline; } .member-suspended-filter.is-active { font-weight: 700; } /* Activity tier chip on the member card -------------------------------- */ .member-activity { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; background: var(--brand-surface, #eef1f4); color: var(--le-muted); } .member-activity--author { background: #e7f0f6; color: #3e7391; } .member-activity--reviewer { background: #e6f4ee; color: #157f5f; } .member-activity--contributor { background: #f7e7ef; color: #b00858; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .member-activity { background: rgba(255,255,255,0.08); } :root:not([data-theme="light"]) .member-activity--author { background: rgba(124,179,214,0.18); color: #7cb3d6; } :root:not([data-theme="light"]) .member-activity--reviewer { background: rgba(69,199,156,0.18); color: #45c79c; } :root:not([data-theme="light"]) .member-activity--contributor { background: rgba(239,111,166,0.18); color: #ef6fa6; } } /* Email preferences (own profile) -------------------------------------- */ .account-emails-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--le-border); cursor: pointer; } .account-emails-row strong { display: block; } .account-emails-note { margin-top: 0.75rem; } .account-emails-saved { color: #157f5f; font-weight: 600; } /* Review craft "traffic lights" --------------------------------------------- The reviewer marks each of the ten craft dimensions as a strength (green) or something to work on (red). Semantic green/red are fixed (not brand colours) and chosen to read on both the light and dark card backgrounds. */ .logline-craft { margin: 0 0 1.1rem; } /* The verbal guide sits OUTSIDE the traffic-light frame. */ .logline-craft-intro { margin: 0 0 0.55rem; font-size: 0.92rem; line-height: 1.4; } .logline-craft-intro-lead { font-weight: 700; } .logline-craft-intro-sub { color: var(--brand-muted, #56636f); } .logline-craft-check { margin: 0; padding: 0.6rem 1rem 0.75rem; border: 1px solid var(--brand-border, #e2e6ea); border-radius: var(--brand-radius, 10px); background: var(--brand-surface, #f6f8fa); } .logline-craft-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; } .logline-craft-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; } .logline-craft-label { font-weight: 600; font-size: 0.95rem; line-height: 1.3; } .logline-craft-tip { display: block; font-weight: 400; font-size: 0.8rem; color: var(--brand-muted, #56636f); } .logline-craft-btns { flex: 0 0 auto; display: inline-flex; gap: 0.35rem; } .logline-craft-btn { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 2px solid var(--brand-border, #cfd6dd); background: var(--brand-card, #fff); cursor: pointer; position: relative; transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease; } .logline-craft-btn::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: transparent; } .logline-craft-btn:hover { transform: scale(1.06); } .logline-craft-pos { border-color: #2b9d5f; } .logline-craft-neg { border-color: #cf4646; } .logline-craft-pos[aria-pressed="true"] { background: #2b9d5f; border-color: #2b9d5f; } .logline-craft-neg[aria-pressed="true"] { background: #cf4646; border-color: #cf4646; } /* A tick / cross glyph drawn on the active button. */ .logline-craft-btn[aria-pressed="true"]::before { inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1; background: transparent; } .logline-craft-pos[aria-pressed="true"]::before { content: "\2713"; } .logline-craft-neg[aria-pressed="true"]::before { content: "\00d7"; } @media (prefers-reduced-motion: reduce) { .logline-craft-btn { transition: none; } .logline-craft-btn:hover { transform: none; } } /* Posted-review strengths / needs-work strip. */ .logline-review-flags { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.7rem; } .logline-review-flagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; } .logline-flag-heading { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; } .logline-review-flagrow--positive .logline-flag-heading { color: #1f8a53; } .logline-review-flagrow--negative .logline-flag-heading { color: #c0392b; } .logline-flag-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-weight: 600; line-height: 1.5; } .logline-review-flagrow--positive .logline-flag-chip { background: rgba(43, 157, 95, 0.14); color: #1f8a53; } .logline-review-flagrow--negative .logline-flag-chip { background: rgba(207, 70, 70, 0.14); color: #c0392b; } /* Edit your own published review: an inline form replaces the read view. */ .logline-review-edit-btn, .logline-review-edit-cancel, .logline-review-delete-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--le-accent, #3e7391); font-weight: 600; cursor: pointer; } .logline-review-edit-btn:hover, .logline-review-edit-cancel:hover, .logline-review-delete-btn:hover { text-decoration: underline; } .logline-review-delete-btn { color: var(--le-muted, #56636f); } .logline-review-delete-btn:hover { color: #b3261e; } /* While editing, hide the read view (strip + prose + footer controls). */ .logline-review.is-editing .logline-review-flags, .logline-review.is-editing .logline-review-body, .logline-review.is-editing .logline-review-foot { display: none; } .logline-review-edit-form { margin-top: 0.5rem; } .logline-review-done { margin: 1rem 0 0; color: var(--le-muted, #56636f); font-style: italic; } /* Logline Doctor ----------------------------------------------------------- Two-part grader page. Reuses the plugin's --le-* tokens (the page carries the .logline-list-page container that scopes them). Green/red check rows match the review craft "traffic lights". */ .logline-doctor-page { max-width: 40rem; } /* Tidy, centred intro above the field. */ .logline-doctor-header { text-align: center; margin-bottom: 1.5rem; } .logline-doctor-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.5rem; } .logline-doctor-title-icon { flex: 0 0 auto; color: var(--le-doctor); } .logline-doctor-lead { max-width: 34rem; margin: 0 auto; color: var(--le-muted); } .logline-doctor-input { width: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--le-border); border-radius: 10px; font: inherit; line-height: 1.5; box-sizing: border-box; background: var(--brand-card, #fff); color: var(--brand-text, #16202b); resize: vertical; } .logline-doctor-count { margin: 0.3rem 0 0.75rem; color: var(--le-muted); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; } .logline-doctor-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .logline-doctor-diagnose { /* Diagnose is the primary action, flushed to the right (like Post logline). Hospital green — the Logline Doctor's colour. */ margin-left: auto; background: var(--le-doctor-fill); color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1.4rem; font-weight: 700; cursor: pointer; } .logline-doctor-diagnose:hover { background: var(--le-doctor-fill-hover); } /* Two separate scores, never blended. */ .logline-doctor-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 1rem; } .logline-doctor-scorecard { display: flex; flex-direction: column; align-items: center; padding: 1rem; border: 1px solid var(--le-border); border-radius: 12px; background: var(--brand-surface, #f6f8fa); } .logline-doctor-scorenum { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--brand-text, #16202b); } .logline-doctor-scoremax { font-size: 1rem; font-weight: 600; color: var(--le-muted); } .logline-doctor-scorelabel { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--le-muted); } .logline-doctor-panel { margin: 1.25rem 0; padding: 1rem 1.15rem 1.15rem; border: 1px solid var(--le-border); border-radius: 12px; } .logline-doctor-panel h2 { margin: 0 0 0.15rem; font-size: 1.15rem; } .logline-doctor-rank { font-size: 0.85rem; font-weight: 700; color: var(--le-doctor); } .logline-doctor-rankdesc, .logline-doctor-note { margin: 0.25rem 0 0.75rem; color: var(--le-muted); font-size: 0.9rem; } .logline-doctor-note { margin: 0.85rem 0 0; font-size: 0.82rem; font-style: italic; } .logline-doctor-checks { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.45rem; } .logline-doctor-check { display: flex; gap: 0.6rem; align-items: flex-start; } .logline-doctor-mark { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #fff; } .logline-doctor-check.is-ok .logline-doctor-mark { background: #2b9d5f; } .logline-doctor-check.is-alert .logline-doctor-mark { background: #cf4646; } .logline-doctor-checkbody { line-height: 1.4; } .logline-doctor-checkbody strong { display: block; font-size: 0.95rem; } .logline-doctor-checktip { color: var(--le-muted); font-size: 0.85rem; } .logline-doctor-fixnext { margin: 0.85rem 0 0; font-weight: 600; color: #b3261e; } .logline-doctor-verdict { margin: 0.5rem 0 0.5rem; font-size: 1.02rem; font-weight: 600; } .logline-doctor-verdict.is-incoherent { color: #b3261e; } .logline-doctor-content-state { color: var(--le-muted); } .logline-doctor-panel.is-loading { opacity: 0.7; } .logline-doctor-rewrite { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 10px; background: var(--brand-surface, #f6f8fa); border: 1px solid var(--le-border); } .logline-doctor-rewrite h3 { margin: 0 0 0.3rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--le-muted); } .logline-doctor-rewrite-text { margin: 0 0 0.6rem; font-size: 1.02rem; } @media (max-width: 30rem) { .logline-doctor-scorenum { font-size: 1.9rem; } }