/* * RCF link report widget. * * Styled as a site control, never as a banner. The thing it replaces was a * 668 KB illustration sitting in the right sidebar - the classic profile for * banner blindness, where users skip both ad-shaped elements and elements in * ad positions. This reuses the theme's own teal button language instead. * * min-height is fixed so states A/B/C swap without moving the widgets below. */ .rcf-lr { --rcf-lr-accent: #4db8bd; --rcf-lr-accent-dark: #3a969a; /* The CTA matches the nav "Community"/"Log In" button exactly. Both stops are load-bearing: a flat #ea5210 reads lighter than the real button, which is a two-stop gradient. Source of truth is get_nav_login_button_css() in romslab-community-forum.php — change both together or they drift apart. */ --rcf-lr-cta: linear-gradient(135deg, #ea5210 0%, #d44a0e 100%); --rcf-lr-cta-glow: rgba(234, 82, 16, 0.6); background: #111; border: 1px solid #2a2a2a; border-radius: 5px; padding: 14px; /* No min-height. The box is exactly as tall as its current state; pressing the button expands it and pushes the sidebar down, which is expected behaviour for a user-initiated action. */ box-sizing: border-box; color: #e8e8e8; font-size: 14px; line-height: 1.45; } .rcf-lr__b, .rcf-lr__c { animation: rcf-lr-in .18s ease-out; } @keyframes rcf-lr-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .rcf-lr p { margin: 0 0 8px; } .rcf-lr__head { font-weight: 700; font-size: 15px; color: #fff; } .rcf-lr__icon { color: #e8b93a; margin-right: 4px; } .rcf-lr__sub { color: #b6b6b6; font-size: 13px; } .rcf-lr__open { display: block; width: 100%; padding: 9px 10px; margin-top: 6px; background: var(--rcf-lr-cta); color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 14px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .rcf-lr__open:hover { filter: brightness(1.15); box-shadow: 0 2px 12px var(--rcf-lr-cta-glow); } .rcf-lr__open:focus-visible, .rcf-lr__opt:focus-visible, .rcf-lr__request:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .rcf-lr__opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .rcf-lr__opt { display: block; width: 100%; text-align: left; padding: 7px 11px; background: #1c1c1c; border: 1px solid #333; border-radius: 4px; color: #e8e8e8; cursor: pointer; font-size: 13.5px; } .rcf-lr__opt:hover { border-color: var(--rcf-lr-accent); } /* The button they actually clicked, pre-highlighted so the common case is one tap. */ .rcf-lr__opt.is-clicked { border-color: var(--rcf-lr-accent); background: rgba(77, 184, 189, .14); color: #fff; font-weight: 600; } /* * Members-only row. Muted but still operable and still explained: a disabled * control the user could unlock should say why and offer the way in, rather * than be hidden or silently dead. */ .rcf-lr__request { border-top: 1px solid #2a2a2a; padding-top: 9px; margin-top: 2px; font-size: 12.5px; cursor: pointer; } .rcf-lr__request[data-locked="1"] { opacity: .42; } .rcf-lr__request[data-locked="0"] { opacity: 1; color: var(--rcf-lr-accent); } .rcf-lr__request[data-locked="0"] .rcf-lr__lock, .rcf-lr__request[data-locked="0"] .rcf-lr__reason { display: none; } .rcf-lr__reason { display: block; color: #9a9a9a; font-size: 11.5px; margin-top: 2px; } .rcf-lr__discord { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #8fa9ff; } .rcf-lr__thanks { color: #5fcb95; font-weight: 700; } /* Relocated under the button row on mobile, where the layout is single-column and nothing can be pushed out of alignment. */ .rcf-lr--inline { margin: 12px 0 4px; width: 100%; min-height: 0; } @media (prefers-reduced-motion: reduce) { .rcf-lr * { transition: none !important; animation: none !important; } } /* ---- More like this ---- */ .rcf-mlt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rcf-mlt__item a { display: flex; gap: 9px; align-items: center; color: inherit; text-decoration: none; } .rcf-mlt__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; } .rcf-mlt__title { font-size: 13px; line-height: 1.35; } .rcf-mlt__item a:hover .rcf-mlt__title { text-decoration: underline; } /* ---- search + platform list ---- */ .rcf-search { display: flex; gap: 6px; } .rcf-search input[type=search] { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #333; border-radius: 4px; background: #1c1c1c; color: #eee; } .rcf-search button { padding: 7px 11px; border: 0; border-radius: 4px; background: #4db8bd; color: #062a2c; font-weight: 700; cursor: pointer; } .rcf-platforms { list-style: none; margin: 0; padding: 0; } .rcf-platforms li { border-bottom: 1px solid #222; } .rcf-platforms a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px; color: inherit; text-decoration: none; } .rcf-platforms a:hover { color: #4db8bd; } .rcf-platforms__n { color: #8a8a8a; font-size: 12px; font-variant-numeric: tabular-nums; } /* ---- Recently updated: title + what changed ---- */ .rcf-upd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rcf-upd__item a { color: inherit; text-decoration: none; } .rcf-upd__title { display: block; font-size: 13px; line-height: 1.35; } .rcf-upd__item a:hover .rcf-upd__title { text-decoration: underline; } .rcf-upd__meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; } .rcf-upd__ver { font-size: 11px; font-weight: 700; letter-spacing: .02em; background: rgba(77,184,189,.16); color: #4db8bd; padding: 1px 6px; border-radius: 3px; } .rcf-upd__ago { font-size: 11.5px; color: #8a8a8a; } /* ---- armed yes/no question ---- */ .rcf-lr__ask { font-size: 13.5px; color: #d8d8d8; margin: 0 0 8px; } .rcf-lr__yesno { display: flex; gap: 6px; margin-bottom: 8px; } .rcf-lr__yesno .rcf-lr__opt { flex: 1 1 0; text-align: center; } .rcf-lr__opt--yes { border-color: #2f6f52; color: #9ee0bd; } .rcf-lr__opt--yes:hover { border-color: #5fcb95; background: rgba(95,203,149,.12); } .rcf-lr__opt--no { border-color: #6f3a34; color: #f0b3aa; } .rcf-lr__opt--no:hover { border-color: #e08373; background: rgba(224,131,115,.12); } .rcf-lr__more { background: none; border: 0; padding: 0; cursor: pointer; color: #8fa9ff; font-size: 12.5px; text-align: left; } .rcf-lr__more:hover { text-decoration: underline; } /* ========================================================================= Sidebar behaviour ========================================================================= */ /* * Sticky on desktop. * * Game pages run to roughly 3,000 words, so the sidebar scrolls out of view * after the first screen and never comes back - taking the report control and * the discovery links with it. No ancestor sets overflow and the theme has no * fixed header, so plain position:sticky holds. */ /* * NO sticky sidebar - deliberately. * * Four attempts, each blocked by something different in this theme: * - sticky on .right-sidebar-content: its parent is exactly as tall as it is, * so there was no travel at all; * - #content carries `overflow: hidden`, which makes it a scroll container and * silently disables sticky for every descendant; * - top-pinning the column: the sidebar (~1620px) is taller than the viewport * (~900px), so everything below the fold became permanently unreadable; * - stretching the containing block to fix that painted a full-height dark * strip down the page, because the background lives on the same box. * * Bottom-anchored sticky was the right pattern in principle but released after * ~50px of travel despite 3,445px being available - behaviour the box model does * not account for, in a float-based layout wrapped in nested clipping containers. * * The sidebar scrolls normally. Every widget is readable, nothing is clipped and * no theme layout rule is overridden. If a persistent report control is wanted * later it should be a small JS implementation with explicit bounds, not CSS * sticky fighting this layout. */ /* * Mobile: the report control only. * * Below 768px the sidebar stacks under the whole post - roughly 18 screens * below the download buttons. On romslab that is 52% of traffic being asked to * scroll past widgets nobody reaches. The report widget is exempt because the * script relocates it up under the buttons. */ @media (max-width: 767px) { #right-sidebar .widget-container:not(.widget_rcf_link_report) { display: none; } #right-sidebar .right-sidebar-content { padding: 0; } /* The emptied wrapper left behind after the widget is relocated. Marked by the script, never by CSS alone - if the move failed the widget must stay where it is rather than vanish. */ #right-sidebar .widget-container.rcf-lr-moved-out { display: none; } /* base.css gives the column margin:0 0 80px, which would otherwise leave a block of empty space at the end of every mobile page. */ html.rcf-lr-relocated #right-sidebar { margin: 0; min-height: 0; } } /* ---- More like this: 2-column cover grid ---- */ .rcf-mlt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .rcf-mlt__item a { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .rcf-mlt__thumb { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; } .rcf-mlt__title { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The relocated widget is full width under the buttons, not a sidebar box. */ .rcf-lr--inline { margin: 12px 0 4px; width: 100%; } /* The theme puts margin-bottom:45px on every widget, including the last one, which leaves a strip of empty column below the final widget. Harmless when the sidebar scrolls away; visible once it is pinned. */ #right-sidebar .widget-container:last-child { margin-bottom: 0; } /* ========================================================================= Share bar, right-aligned in the Descriptions/Comments tab strip. Icons are inline SVG using currentColor - no icon font, no extra requests. ========================================================================= */ /* Specific enough to beat the theme's own `.tabs li { float:left; display:block }`, which otherwise drags this to the left of the strip. */ .wc-tabs-wrapper ul.tabs li.rcf-share { float: right; display: flex; align-items: center; gap: 0; list-style: none; padding: 0 6px 0 0; margin: 0; background: none; border: 0; } .wc-tabs-wrapper ul.tabs li.rcf-share::before, .wc-tabs-wrapper ul.tabs li.rcf-share::after { display: none; content: none; } .rcf-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 6px; background: none; border: 0; border-radius: 4px; cursor: pointer; color: #b9b9b9; line-height: 1; text-decoration: none; transition: color .12s ease, background-color .12s ease; } .rcf-share__btn:focus-visible { outline: 2px solid #4db8bd; outline-offset: 1px; } .rcf-share__btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* Solid glyphs read better than outlines at this size. */ .rcf-share__facebook svg, .rcf-share__x svg, .rcf-share__telegram svg, .rcf-share__tiktok svg, .rcf-share__pinterest svg { fill: currentColor; stroke: none; } .rcf-share__label { font-size: 12.5px; white-space: nowrap; } .rcf-share__copy.is-copied { color: #5fcb95; } /* Brand colours only on hover - a row of coloured chips would shout louder than the tabs it sits beside. */ @media (max-width: 900px) { .rcf-share__label { display: none; } /* icon-only once space is tight */ } @media (max-width: 600px) { .rcf-share { float: none; width: 100%; justify-content: space-around; padding: 4px 0; } .rcf-share__btn { padding: 8px 6px; } } @media (prefers-reduced-motion: reduce) { .rcf-share__btn { transition: none; } } /* ---- share bar: lead-in + copy-and-paste feedback ---- */ .rcf-share__lead { font-size: 12.5px; color: #8f8f8f; margin-right: 8px; white-space: nowrap; } .rcf-share__toast { font-size: 12px; color: #5fcb95; margin-left: 8px; white-space: nowrap; opacity: 1; transition: opacity .3s ease; } .rcf-share__toast.is-out { opacity: 0; } @media (max-width: 1100px) { .rcf-share__lead { display: none; } } @media (max-width: 600px) { .rcf-share__toast { display: none; } } /* --------------------------------------------------------------------------- Share bar: normalise anchors against the theme's tab styling. `.tabs li a` sets padding:0 20px and line-height:40px, which applied to the six share buttons but not to the three