holding a single with an
* , which the generic row styling turned into an empty bordered box that
* looked clickable but did nothing. Rows whose only cell contains a heading are
* headings; rows whose only cell is the "no data" card stay as the empty state.
* =========================================================================== */
.lfRailV2 #showFeaturedList tbody tr:has(td:only-child h4) {
display: block;
border: 0;
background: transparent;
padding: 14px 0 0;
margin: 0;
}
.lfRailV2 #showFeaturedList tbody tr:has(td:only-child h4):hover {
border: 0;
background: transparent;
transform: none;
}
.lfRailV2 #showFeaturedList tbody td:only-child h4 {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--lf-ink-3);
margin: 0 0 10px;
text-align: left;
}
/* ===========================================================================
* Create card.
*
* Shown only where the client's theme flags allow user-generated content, i.e.
* exactly where the left rail's Create menu appears. The item matching the
* active feed filter is promoted, so the suggestion follows what you are
* looking at.
* =========================================================================== */
.lfCreate {
background: var(--lf-surface);
border: 1px solid var(--lf-line);
border-radius: 12px;
padding: 13px 14px 8px;
}
.lfCreate .lfRailHeading--tight { margin: 0 0 8px !important; }
.lfCreate-list { display: flex; flex-direction: column; }
.lfCreate-item {
display: grid;
grid-template-columns: 28px 1fr 14px;
align-items: center;
gap: 11px;
padding: 8px 6px;
margin: 0 -6px;
border-radius: 9px;
text-decoration: none;
color: var(--lf-ink);
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
transition: background .15s, color .15s;
}
.lfCreate-item:hover,
.lfCreate-item:focus {
background: var(--lf-accent-bg);
color: var(--lf-accent-strong);
text-decoration: none;
}
.lfCreate-icon {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--lf-raise);
border: 1px solid var(--lf-line-soft);
color: var(--lf-ink-2);
font-size: 13px;
transition: background .15s, border-color .15s, color .15s;
}
.lfCreate-item:hover .lfCreate-icon {
background: var(--lf-accent);
border-color: var(--lf-accent);
color: var(--lf-accent-ink);
}
.lfCreate-go { font-size: 11px; color: var(--lf-ink-3); opacity: 0; transition: opacity .15s, transform .15s; }
.lfCreate-item:hover .lfCreate-go { opacity: 1; transform: translateX(2px); }
/* the action matching the active filter leads */
.lfCreate-item.is-suggested { order: -1; }
.lfCreate-item.is-suggested .lfCreate-icon {
background: var(--lf-accent-bg);
border-color: var(--lf-accent-line);
color: var(--lf-accent-strong);
}
@media (prefers-reduced-motion: reduce) {
.lfCreate-item, .lfCreate-icon, .lfCreate-go { transition: none; }
.lfCreate-item:hover .lfCreate-go { transform: none; }
}
/* ===========================================================================
* Rail: its own scroll region again.
*
* The original rail was overflow-auto with a JS-assigned height. Removing that
* (it was collapsing to 0) also removed the rail's ability to scroll, so the
* Highlights list sat far below the fold with no way to reach it except
* scrolling the whole page. Give it back a real scroll region, pinned beside
* the feed so it stays in view.
* =========================================================================== */
.lfRailV2 {
position: sticky;
top: calc(var(--lf-header-h) + 12px);
align-self: flex-start;
max-height: calc(100vh - var(--lf-header-h) - 24px);
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--lf-line) transparent;
padding-right: 10px;
}
.lfRailV2::-webkit-scrollbar { width: 8px; }
.lfRailV2::-webkit-scrollbar-track { background: transparent; }
.lfRailV2::-webkit-scrollbar-thumb {
background: var(--lf-line);
border-radius: 99px;
border: 2px solid var(--lf-surface);
}
.lfRailV2:hover::-webkit-scrollbar-thumb { background: var(--lf-ink-3); }
/* --- Featured Posts pills were carrying too much air --- */
.lfRailV2 .featuredPostUl { gap: 6px; }
.lfRailV2 .livefeedTag {
font-size: 12px;
padding: 5px 11px;
}
.lfRailV2 .lfRailHeading { margin-top: 4px !important; }
.lfRailV2 #popupPosterCarousel2 { margin-top: 4px !important; }
.lfRailV2 { gap: 10px; }
/* ===========================================================================
* Create card: one action, matched to the filter.
*
* Showing four options at all times was noise in a column that also has to fit
* Featured Posts, a poster and Highlights. When a filter with a matching
* creation route is active the card collapses to that single action as a full
* button; otherwise it offers the full set.
* =========================================================================== */
.lfCreate-item.lfIsHidden { display: none; }
/* single-action state: a real button, not a list row */
.lfCreate.is-focused .lfCreate-list { display: block; }
.lfCreate.is-focused .lfCreate-item {
grid-template-columns: 22px 1fr;
justify-content: center;
gap: 9px;
margin: 0;
padding: 10px 14px;
border-radius: 9px;
background: var(--lf-accent);
color: var(--lf-accent-ink);
font-size: 14px;
font-weight: 650;
box-shadow: 0 1px 2px rgba(19, 26, 24, .10);
}
.lfCreate.is-focused .lfCreate-item:hover {
background: var(--lf-accent);
color: var(--lf-accent-ink);
filter: brightness(1.08);
}
.lfCreate.is-focused .lfCreate-icon {
width: 22px; height: 22px;
background: transparent;
border: 0;
color: var(--lf-accent-ink);
font-size: 14px;
}
.lfCreate.is-focused .lfCreate-item:hover .lfCreate-icon {
background: transparent;
border: 0;
color: var(--lf-accent-ink);
}
.lfCreate.is-focused .lfCreate-go { display: none; }
/* ===========================================================================
* Rail scrolling, done against the layout that is actually there.
*
* companyPage.css:1751 sets `.liveProfile .liveFeedRightDiv { position: fixed;
* right: 0; width: 22% }`. The rail is a fixed sidebar, which is why the old
* code assigned it a height in JS, and why my position:sticky never applied:
* that selector is more specific than .lfRailV2.
*
* A fixed element with content taller than the viewport and no scroll region
* simply clips, which is exactly what hid the Highlights list. Keep it fixed,
* because the feed column's layout assumes the rail is out of flow, and give it
* a viewport-height scroll region instead.
*
* Selector is body.lfPageV2 .lfRailV2 (0,2,1) so it beats the legacy rule.
* =========================================================================== */
body.lfPageV2 .lfRailV2 {
position: fixed;
top: calc(var(--lf-header-h) + 10px);
height: calc(100vh - var(--lf-header-h) - 20px);
max-height: none;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 8px;
}
/* Now that the rail is a height-constrained flex column, its children must not
shrink to fit: flex-shrink defaults to 1, which squashed the poster into a
strip and let it overlap the pills. Let them keep their size; the rail
scrolls instead. */
body.lfPageV2 .lfRailV2 > * { flex: 0 0 auto; }
/* ===========================================================================
* Top navigation alignment.
*
* The nav is nested Bootstrap float columns with ad-hoc padding-top values, so
* its groups sat at four different vertical centres (23.6 / 15 / 30 / 34)
* against a nav centre of 32. Nothing was actually centred.
*
* Flex the three nesting levels that hold the groups and centre them, and drop
* the padding-top that was doing the skewing. Scoped to body.lfPageV2 so the
* same shared nav is untouched on every other page; promote it globally once
* it has been eyeballed elsewhere.
* =========================================================================== */
/* the left logo cell and the right-hand group keep their widths, everything
between them shares the remaining space */
/* the account block sits flush right */
/* The nav's right edge now lines up with the rail's content edge, which is the
rail's box minus the 10px reserved for its scrollbar. */
/* ===========================================================================
* Rail and feed share a top line.
*
* The rail was pinned 10px under the header while the feed column starts 35px
* under it, so Featured Posts began 25px above the impact strip.
* =========================================================================== */
body.lfPageV2 .lfRailV2 {
top: calc(var(--lf-header-h) + 35px);
height: calc(100vh - var(--lf-header-h) - 45px);
}
/* Centring came from flex, but zeroing the padding-top also collapsed the bar
from 64px to 50px. Give it its height back explicitly so align-items has
something to centre within, rather than restoring the padding that was
skewing the groups in the first place. */
/* The account block is a , whose row box does not participate in the
flex centring, leaving it 2.5px below the axis. Centre the table itself
rather than relying on cell vertical-align alone. */
/* ===========================================================================
* Client themes and the "selected" colour.
*
* A client's theme stylesheet is emitted at include/all-css.php line 61, after
* this file at line 58. Several of them style the rail's tags directly:
*
* theme/Exl/css/style-theme.css:101 .theme-1 .livefeedTag.active -> #005071
* theme/hcl/css/style-theme.css:1768 .theme-1 .livefeedTag.active -> #0065f5
*
* Those selectors are (0,3,0), exactly what .lfRailV2 .livefeedTag.active
* scores, so they were not overriding on merit — they simply came later in the
* cascade and won the tie.
*
* For HCL that is invisible, because #0065f5 is the accent this file would have
* used anyway. For EXL it is not: #005071 is their secondary navy, so the rail
* tag rendered navy while the filter chips and the primary button beside it
* rendered brand orange. Two different colours, on the same screen, both meaning
* "selected" — which is what made the page look broken rather than merely
* off-brand.
*
* One selected colour per client, and it is the accent. Scoping these to
* body.lfPageV2 takes them to (0,4,1), so they win on specificity rather than on
* position, and a theme loading later cannot silently take them back.
* =========================================================================== */
body.lfPageV2 .lfRailV2 .livefeedTag:hover {
background: var(--lf-accent-bg);
border-color: var(--lf-accent-line);
color: var(--lf-accent-strong);
}
body.lfPageV2 .lfRailV2 .livefeedTag.active,
body.lfPageV2 .lfRailV2 .livefeedTag.active:hover {
background: var(--lf-accent);
border-color: var(--lf-accent);
color: var(--lf-accent-ink);
}
/* --- the post you just created ------------------------------------------
* Prepended after a volunteering sign-up. Held on the accent for a moment so
* the eye lands on it, then released — the card is not special afterwards, and
* a permanent marker would just become noise on the next visit.
* --------------------------------------------------------------------- */
.lfFeedV2 .lfCard--justMine {
border-color: var(--lf-accent);
box-shadow: 0 0 0 3px var(--lf-accent-bg);
animation: lfMineSettle 3.2s ease forwards;
}
@keyframes lfMineSettle {
0%, 55% { border-color: var(--lf-accent); box-shadow: 0 0 0 3px var(--lf-accent-bg); }
100% { border-color: var(--lf-line); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
.lfFeedV2 .lfCard--justMine { animation: none; }
}
|