/* Purple Login — Platform Gap Ceiling * ==================================== * [v5.16.332] ONE place, loaded LAST (enqueued with a dependency on * pl-refinements, so it wins source-order ties), that caps the space * BETWEEN objects and BETWEEN buttons to <= 2mm across the whole app. * * Scope note: this only touches GAPS and the MARGINS that separate stacked * cards / list rows. It deliberately does NOT touch internal control padding * (the height of a button, the padding inside an input), because that is not * "space between objects" and squeezing it would break controls. * * Retune everything from one place: change --pl-gap below. * --pl-gap = object-to-object / card-to-card (6px ~= 1.6mm) * --pl-gap-tight = buttons/icons sitting shoulder-to-shoulder (3px) */ :root { --pl-gap: 4px; /* 1mm */ --pl-gap-tight: 2px; } /* [v5.16.420] The :root declaration above sets the token on ONLY. pl-refinements.css:5539 sets it again on `html body` (--pl-gap: 6px), and custom properties resolve from the NEAREST ancestor that declares them — not by specificity across different elements. So every element inside inherited 6px and the v5.16.377 "1mm everywhere" change never actually applied to anything on screen. Verified in Chromium: getComputedStyle reported --pl-gap: 6px before this rule existed. Re-declared here on the same `html body` selector. pl-gap-enforce.css is enqueued after pl-refinements.css, so at equal specificity this one wins. */ html body { --pl-gap: 4px; /* 1mm */ --pl-gap-tight: 2px; } /* ============ FEED (centre column) ============ */ /* feed top: Feed header -> composer -> first post all capped to one gap */ html body .center-content .dir-header, html body .center-content .feed-container .pl-page-head { margin-bottom: var(--pl-gap-tight, 3px) !important; padding-bottom: 3px !important; } html body .center-content .create-post-card { margin: 0 0 var(--pl-gap) !important; } html body .center-content .post-card { margin-bottom: var(--pl-gap) !important; } /* ============ FEED MEDIA: kill the black pillarbox bars ============ * [v5.16.334] Console on the live page proved the media CELL is painted * rgb(0,0,0) at runtime (no rule for it exists in any stylesheet, so it's * set inline/by JS). A portrait image sits in it height-capped, narrower * than the cell, so the black shows as side bars. Forcing the whole media * chain to the card surface with !important beats the inline black. */ html body .post-card .post-media, html body .post-card .post-media-grid, html body .post-card .post-media-item { background: var(--post-media-bg, #fff) !important; } html body .center-content .post-header { margin-bottom: var(--pl-gap) !important; } html body .center-content .post-media, html body .center-content .post-content-full { margin: 0 0 var(--pl-gap) !important; } html body .center-content .engagement-bar { margin-top: 0 !important; gap: var(--pl-gap-tight) !important; } html body .center-content .post-actions-row { gap: var(--pl-gap-tight) !important; } html body .center-content .comments-section { margin-top: var(--pl-gap) !important; } /* ============ LEFT NAV ============ */ html body .left-sidebar .nav-menu, html body .left-sidebar .nav-submenu { gap: var(--pl-gap-tight) !important; } html body .left-sidebar .nav-item { margin-bottom: var(--pl-gap-tight) !important; } /* ============ RIGHT SIDEBAR: widget cards ============ */ html body .right-sidebar .sw-card, html body .right-sidebar .pc-card, html body .right-sidebar .up-panel, html body .right-sidebar .sj-panel { margin-bottom: var(--pl-gap) !important; } /* people / job list rows */ html body .right-sidebar .up-panel .up-card, html body .right-sidebar .sj-panel .sj-card { margin-bottom: var(--pl-gap) !important; } html body .right-sidebar .up-panel, html body .right-sidebar .sj-panel { gap: var(--pl-gap) !important; } /* button clusters + tag rows sit tight */ html body .right-sidebar .up-actions, html body .right-sidebar .conn-actions, html body .right-sidebar .sj-tags, html body .right-sidebar .up-row1 { gap: var(--pl-gap-tight) !important; } /* stats / job-activity rows */ html body .right-sidebar .stats-row { margin-bottom: var(--pl-gap-tight) !important; } /* ============ CROSS-COLUMN: generic card stacks ============ * Any element carrying a *-card / *-panel class inside the content columns * gets the same bottom rhythm. Keeps profile / jobs / community / settings * cards in line without enumerating every one. gap below is inert on * non-flex, so it only tightens real flex/grid stacks. */ html body .center-content [class$="-card"], html body .center-content [class$="-panel"] { margin-bottom: var(--pl-gap) !important; } /* [v5.16.356] Apply the v354 feed layout to EVERY tab. Cap the dashboard grid to 1060px and centre it, with tight 4px (~1mm) column gaps, so the same narrow-feed / packed-sidebars / outer-margin layout is used platform-wide (feed, profile, jobs, community, settings, admin — all of them). Global (not scoped to the feed) so it holds on every page. Tune the 1060px once. */ html body .dashboard-grid { max-width: 1091px !important; margin-left: auto !important; margin-right: auto !important; column-gap: 4px !important; } /* [v5.16.357] Cap the top/bottom info banners to the same 1060px centred layout, so the dark banner (career-stats dashboard etc.) doesn't overhang past the centred content on either side. [v5.17.56] The email-verification card joins this exact rule, so it always spans the SAME width as the banners and the grid — tune the cap once and all three move together. */ html body .info-banner, html body .info-banner-bottom, html body #verify-banner { max-width: 1091px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* [v5.16.365] Swap sidebars 3 & 4. The widgets column (.right-sidebar) moves next to the content in column 3; the Network/Jobs panel (.users-panel) moves to the far right, column 4. Done with grid placement so the markup order is untouched. */ html body .dashboard-grid .right-sidebar { grid-column: 3 / 4 !important; grid-row: 1 !important; } html body .dashboard-grid .users-panel { grid-column: 4 / 5 !important; grid-row: 1 !important; } /* [v5.16.369] On profile / Discover tabs, hide the CLOCK/widgets column (now col 3 after the swap) and KEEP Network/Jobs, moving it next to the content. The 4th track collapses so nothing dangles on the right. (The grid class is still named 'no-users-panel' from before, but it now hides the widgets.) */ html body .dashboard-grid.no-users-panel { grid-template-columns: var(--col1-width, 180px) minmax(0, 1fr) var(--col3-width, 190px) 0px !important; } html body .dashboard-grid.no-users-panel .center-content { grid-column: 2 / 3 !important; } html body .dashboard-grid.no-users-panel .right-sidebar { display: none !important; } html body .dashboard-grid.no-users-panel .users-panel { grid-column: 3 / 4 !important; grid-row: 1 !important; } /* [v5.17.5] Ad manager layout: nav + full-width content only. The 3rd (Network/Jobs) column is not rendered on these tabs (page-dashboard.php) and the track is removed here so the campaign table and wizard use the whole remaining width; the 4th column stays hidden as on other tabs. */ html body .dashboard-grid.pl-ads-wide { grid-template-columns: var(--col1-width) minmax(0, 1fr) !important; } html body .dashboard-grid.pl-ads-wide .center-content { grid-column: 2 / 3 !important; } html body .dashboard-grid.pl-ads-wide .users-panel, html body .dashboard-grid.pl-ads-wide .right-sidebar { display: none !important; } /* ============================================================ * [v5.16.377] FINAL — 1mm (approx 4px) MAX between ANY boxes, everywhere. * Horizontal: the column track gap is 1mm AND the columns carry no side * padding, so the visible space between cards across columns = the 1mm gap. * Vertical: every inter-card / inter-row margin is capped to 1mm. * (Card INTERNAL padding is left alone — that is content spacing, not a gap * between boxes.) * ========================================================== */ /* --- horizontal: the four columns, 1mm apart, no side padding --- */ html body .dashboard-grid { column-gap: 4px !important; } html body .dashboard-grid > .left-sidebar, html body .dashboard-grid > .center-content, html body .dashboard-grid > .users-panel, html body .dashboard-grid > .right-sidebar, html body .dashboard-grid div.right-sidebar, html body .dashboard-grid div.users-panel { padding-left: 0 !important; padding-right: 0 !important; } /* --- vertical: stacked cards / panels / rows, 1mm apart --- */ html body .dashboard-grid .post-card, html body .dashboard-grid .sw-card, html body .dashboard-grid .pc-card, html body .dashboard-grid .up-card, html body .dashboard-grid .sj-card, html body .dashboard-grid .up-panel, html body .dashboard-grid .sj-panel, html body .dashboard-grid .conn-card, html body .dashboard-grid .stats-row, html body .dashboard-grid [class$="-card"], html body .dashboard-grid [class$="-panel"] { margin-top: 0 !important; margin-bottom: 4px !important; } /* --- vertical rhythm: direct children of any sidebar column, 1mm apart --- */ html body .dashboard-grid .left-sidebar > *, html body .dashboard-grid .right-sidebar > *, html body .dashboard-grid .users-panel > * { margin-bottom: 4px !important; } /* [v5.16.378] Align columns to the banner. The grid had 5px side padding, so the columns sat ~5px inside the banner's left/right edges. Zero the grid's SIDE padding (keep top/bottom) so the columns fill to the same edges as the info-banner. */ html body .dashboard-grid { padding-left: 0 !important; padding-right: 0 !important; } /* [v5.16.379] The global `canvas{width:100%}` rule stretched the clock to the full column (touching both edges after the padding was zeroed). Constrain the clock canvas to a centred square so it sits properly within the column. */ html body .dashboard-grid .right-sidebar #plClkCanvas, html body .dashboard-grid .right-sidebar #pl-clock-widget canvas { width: 160px !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 auto !important; display: block !important; } /* [v5.16.385] 3rd column vertical alignment is now handled by JS (plAlignHeader, header.php) which matches its first card to the 1st column's on load/resize. This is just a neutral baseline. */ html body .dashboard-grid .right-sidebar { margin-top: 0 !important; } /* [v5.16.388] Align every column's first card top to the same line (flush under the banner). The sidebars had ~7px top inset (column padding-top + first child margin-top) while the feed/clock had none, so the Profile (1st) and Network (4th) cards sat lower. Zero that top inset on all four columns. CSS-based so it updates with the stylesheet (the header JS was being served stale from the page cache). */ html body .dashboard-grid > .left-sidebar, html body .dashboard-grid > .center-content, html body .dashboard-grid > .right-sidebar, html body .dashboard-grid > .users-panel { padding-top: 0 !important; } html body .dashboard-grid > .left-sidebar > *:first-child, html body .dashboard-grid > .center-content > *:first-child, html body .dashboard-grid > .right-sidebar > *:first-child, html body .dashboard-grid > .users-panel > *:first-child { margin-top: 0 !important; } /* [v5.16.389] Profile photo framed with an even white margin on all sides. The profile card gets a white background + uniform 10px padding; the photo fills the remaining width as a rounded square, so there is equal white space top / left / right / bottom around it (instead of running to the edges). */ html body .sidebar-profile { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 10px !important; box-sizing: border-box !important; } html body .sidebar-profile .sb-avatar-frame { display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; } html body .sidebar-profile .sb-avatar-img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; /* [v5.16.404] fallback 8px -> 50%: matches the new circular default, so an install that never opens the Corners panel still gets round avatars. */ border-radius: var(--pl-r-avatars, 50%) !important; max-width: 100% !important; } /* [v5.16.390] Two separate boxes in the left column: the profile-photo card and the navigation menu, with a 1mm (4px) gap between them. */ html body .left-sidebar nav[aria-label="Sidebar navigation"] { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 6px 8px !important; margin: 0 !important; box-sizing: border-box !important; } html body .sidebar-profile { margin-bottom: 4px !important; } /* [v5.16.391] The LEFT column was itself a white card (bg + border + radius), wrapping the profile box and the nav box so they looked like one common box. Make the column transparent so the profile card and the nav menu read as two separate boxes with the 1mm gap between them. */ html body .dashboard-grid .left-sidebar { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* [v5.16.394] 1mm text inset in the 4th column (Network/Jobs panel). v393 aimed this at .job-card, which does not exist in this panel — the real markup (inc/sidebar-users.php) uses .sj-card for Jobs and .up-card for Network, both declared `padding: Npx 0` in style.css, so the text ran flush to the panel boundary. Targeting the actual classes here. The inset is the card's OWN padding, so the card border stays at the edge and the 1mm inter-column gap is untouched. */ /* [v5.16.395] the card padding that lived here is now folded into the detached card rule below, so there is a single source for it. */ /* Non-card children of the panel get the same inset so nothing else touches the boundary (empty state, section headings). */ html body .users-panel .sj-no-jobs, html body .users-panel .up-empty { padding-left: var(--pl-gap, 4px) !important; padding-right: var(--pl-gap, 4px) !important; } /* ========================================================================= [v5.16.397] 4th column: remove the white slab behind everything ------------------------------------------------------------------------- THE ACTUAL CAUSE of the "square background behind Network/Jobs". It was never a toggle track. .users-panel carries background:var(--col3-bg) (style.css), and pl-refinements.css :root sets --col3-bg:#ffffff — so the entire column is a solid white rectangle. Stripping backgrounds off .up-toggle-wrap in v395/v396 could never remove it. Two consequences fixed here: 1. the toggle now floats on the page instead of sitting on a white box; 2. the v395 detached cards become visible as detached — white cards on a white column had no separation to show. --col3-bg is left alone because .right-sidebar shares it; only this column is made transparent. ========================================================================= */ html body .dashboard-grid div.users-panel, html body .users-panel { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* The sticky search bars inherited the same white from --col3-bg. With the column transparent they need the PAGE colour, or cards scroll visibly underneath them. */ html body .users-panel .up-search, html body .users-panel .sj-search { background: var(--c-bg-body, #FAF8F3) !important; background-color: var(--c-bg-body, #FAF8F3) !important; } /* ========================================================================= [v5.16.395] 4th column: bare toggle + detached cards ========================================================================= */ /* (1) TOGGLE — remove the track box behind Network/Jobs. The track is declared in three places, all of which have to be neutralised or the box survives: style.css background:#d1d5db !important pl-refinements.css background:#f3f4f6 + 1px border + radius + overflow visual-polish.css border-bottom (also inlined in pl-bundle.min.css) The purple slider stays; its radius moves onto the slider itself, since the wrapper no longer has a shape to clip to. */ html body .users-panel .up-toggle-wrap, html body .up-toggle-wrap { background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; } html body .up-toggle-wrap .up-tog-slider { border-radius: var(--pl-r-buttons, 6px) !important; } /* (2) CARDS — each job / person becomes its own detached card. Drops the shared-surface hairline divider and gives every row a full border, white fill and its own corner radius. margin-bottom stays at the 1mm token from v377 so the platform-wide spacing rule is unchanged. The v394 text inset survives as the card's own padding. */ html body .users-panel .sj-card, html body .users-panel .up-card { background: var(--c-bg-white, #ffffff) !important; border: 1px solid var(--c-border, #e5e7eb) !important; border-radius: var(--pl-r-cards, 6px) !important; padding: 8px var(--pl-gap, 4px) !important; margin-bottom: var(--pl-gap, 4px) !important; box-shadow: none !important; } /* :last-child previously cleared the divider — with real borders there is nothing to clear, but the trailing margin should still go. */ html body .users-panel .sj-card:last-child, html body .users-panel .up-card:last-child { border-bottom: 1px solid var(--c-border, #e5e7eb) !important; margin-bottom: 0 !important; } /* [v5.16.393] Neutral pill colours — no bright/pink tags or salary chips. NOTE: these two selectors are also dead (markup uses .sj-tag / .sj-tag.salary); left as-is because the current tag colours were not part of this request. */ html body .users-panel .job-tag { background: #f1f0f4 !important; color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; border: 1px solid #e5e7eb !important; } html body .users-panel .job-salary { background: transparent !important; color: #374151 !important; -webkit-text-fill-color: #374151 !important; border: 1px solid #d1d5db !important; font-weight:500 !important; } /* ========================================================================= [v5.16.412] Post text measure — cap the READING COLUMN, not the card ------------------------------------------------------------------------- The card stays 746px, which is already the standard content width (Reddit sits at ~740-756; LinkedIn ~555, X ~600, so the card is if anything on the generous side). What suffers at that width is line length: 746px of 13px body text runs ~110 characters, against a comfortable band of 45-75. Capping the paragraph column at 620px brings that to ~92 characters. 620 rather than the textbook ~490 (a true 75 chars) because a 490px column inside a 746px card leaves ~128px dead each side and reads as broken; 620 is roughly where LinkedIn and X land in practice. Only the TEXT is capped. Media, video embeds and the engagement bar are outside .post-content-full and keep the full card width. ========================================================================= */ html body .post-content-full { max-width: 620px !important; } /* ========================================================================= [v5.16.417] Feed suggestion blocks — white card per item, 1mm gaps ------------------------------------------------------------------------- Moved here from an inline