margins on top of section/toolbar/list/form paddings, producing a tall dead zone between the engagement bar and the comment input. Everything tightens; Read Mode is enforced as a quiet outline chip. */ html body .comments-section { padding: 4px 14px 6px !important; margin-top: 0 !important; } html body .comments-toolbar { margin-bottom: 2px !important; } html body .comments-list { margin-bottom: 2px !important; } html body .no-comments, html body p.no-comments, html body .comments-loading { margin: 0 !important; /* kills the default
margins */
padding: 4px 0 !important;
font-size: 12px !important;
}
html body .comment-form { padding-top: 4px !important; }
/* Read Mode: quiet outline chip, never a grey filled button */
html body .read-mode-btn {
background: transparent !important;
border: 1px solid var(--c-border, #d1d5db) !important;
color: var(--c-text-dim, #4b5563) !important;
-webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
padding: 1px 7px !important;
font-size: 12px !important;
box-shadow: none !important;
}
html body .read-mode-btn:hover { border-color: var(--c-primary, #5f5d58) !important; color: var(--c-primary, #5f5d58) !important; -webkit-text-fill-color: var(--c-primary, #5f5d58) !important; }
/* ---- 17d. [v5.10.7] Empty comments: no message, no dead rows ----
With zero comments the section starts directly at the comment
input: the empty list collapses entirely and the Read Mode chip
(which only makes sense with comments to read) stays hidden until
there is at least one comment. */
html body .comments-list:empty { display: none !important; margin: 0 !important; }
html body .comments-section:has(.comments-list:empty) .comments-toolbar { display: none !important; }
html body .comment-form { border-top: none !important; }
/* ---- 17e. [v5.10.9] Comment "+" menu: like / dislike / reply ONLY ----
The expanded menu previously also showed edit (pencil) and delete
(trash) on the viewer's own comments — easily mistaken for forward/
save at 13px. Per direction the + now reveals exactly the three
engagement actions, matching the post bar. (Edit/delete for own
comments are hidden with the menu; restore by deleting this block.) */
/* [v5.11.0] edit/delete restored for the comment's own author —
the loader only renders them on the viewer's own comments
(delete additionally for the post author and admins). */
html body .comment-actions-inner .comment-edit-btn,
html body .comment-actions-inner .comment-delete-btn {
display: inline-flex !important;
}
/* the three that remain: match the post-bar visual language */
html body .comment-action-btn {
background: transparent !important;
border: none !important;
padding: 1px 4px !important;
}
html body .comment-action-btn svg {
width: 12px !important;
height: 12px !important;
}
html body .comment-eng-count { font-size: 10px !important; }
/* ---- 17f. [v5.10.10] Comment actions match the post bar exactly ----
Like / dislike / reply in the comment "+" menu now render in the
same visual language as the post engagement bar: purple count chip
first, then the icon — same chip geometry, same colors. */
html body .comment-action-btn {
display: inline-flex !important;
flex-direction: row-reverse !important; /* count chip renders before the icon, like the post bar */
align-items: center !important;
gap: 2px !important;
}
html body .comment-eng-count {
display: inline-block !important;
min-width: 13px !important;
height: 13px !important;
line-height: 13px !important;
padding: 0 2px !important;
font-size: 10px !important;
font-weight:500 !important;
text-align: center !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: var(--c-primary, #5f5d58) !important;
border-radius: 3px !important;
}
html body .comment-action-btn svg {
width: 13px !important;
height: 13px !important;
}
/* ---- 17g. [v5.10.12] Comment actions: inline beside the text + always visible ----
1) The actions bar now sits ON THE SAME LINE as the comment text
(text becomes inline; the bar becomes inline-flex right after it).
2) The icons were rendering white-on-white until hover on some
setups (inherited currentColor). The stroke is now forced
directly on the SVGs, which overrides any inherited color —
dark by default, brand purple when the reaction is active. */
html body .comment-text {
display: inline !important;
}
html body .comment-actions-bar {
display: inline-flex !important;
vertical-align: middle !important;
margin: 0 0 0 6px !important;
padding: 0 !important;
}
/* toggle (+ / -): quiet outline chip, never grey filled */
html body .comment-actions-toggle {
background: transparent !important;
border: 1px solid var(--c-border, #d1d5db) !important;
color: #1f2937 !important;
-webkit-text-fill-color: #1f2937 !important;
width: 16px !important;
height: 16px !important;
font-size: 12px !important;
box-shadow: none !important;
}
/* buttons + icons: always visible, dark strokes, purple when active */
html body .comment-action-btn,
html body .comment-actions-inner {
opacity: 1 !important;
visibility: visible !important;
}
html body .comment-action-btn {
color: #1f2937 !important;
-webkit-text-fill-color: #1f2937 !important;
}
html body .comment-action-btn svg {
stroke: #1a1a1a !important; /* overrides inherited currentColor entirely */
opacity: 1 !important;
}
html body .comment-action-btn.active svg,
html body .comment-action-btn:hover svg {
stroke: var(--c-primary, #5f5d58) !important;
}
/* ============================================================
---- 18. [v5.10.13] FINAL DE-GREY SWEEP ----
============================================================
The last grey-filled utility buttons align with the platform
language: primary submits go brand purple; secondary utilities
become quiet outline chips. */
/* Comment "Send": a submit CTA — brand purple like Post */
html body .comment-submit-btn {
background: var(--c-primary, #5f5d58) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: none !important;
padding: 5px 12px !important;
font-size: 12px !important;
}
html body .comment-submit-btn:hover { background: var(--c-primary-dark, #3f3d39) !important; }
/* Attach / Schedule: quiet outline chips */
html body .add-media-btn {
background: transparent !important;
border: 1px solid var(--c-border, #d1d5db) !important;
color: var(--c-text-dim, #4b5563) !important;
-webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
padding: 3px 9px !important;
font-size: 12px !important;
box-shadow: none !important;
}
html body .add-media-btn:hover {
border-color: var(--c-primary, #5f5d58) !important;
color: var(--c-primary, #5f5d58) !important;
-webkit-text-fill-color: var(--c-primary, #5f5d58) !important;
}
html body .add-media-btn svg { stroke: currentColor !important; }
/* Site Settings: Save Settings purple; preset slots outline */
html body .cz-btn {
background: var(--c-primary, #5f5d58) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: none !important;
}
html body .cz-btn:hover { background: var(--c-primary-dark, #3f3d39) !important; }
html body .cz-preset-btn {
background: transparent !important;
border: 1px solid var(--c-border, #d1d5db) !important;
color: var(--c-text-dim, #4b5563) !important;
-webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
box-shadow: none !important;
}
html body .cz-preset-btn:hover { border-color: var(--c-primary, #5f5d58) !important; color: var(--c-primary, #5f5d58) !important; -webkit-text-fill-color: var(--c-primary, #5f5d58) !important; }
/* ---- 19. [v5.11.0] Threaded comments ----
Replies indent under their parent with a soft guide line; the
indent caps at depth 5 (the reply handler promotes level-6 replies
to new top-level comments). New comments stack vertically. */
/* [v5.11.3] Per-level indent tuned to ~5mm (19px). The children block
sits inside the content column, which is already offset by the
avatar (24px) + 6px flex gap — the negative margin counteracts that
structural offset so the NET step per level is ~19-20px. */
html body .comment-children {
margin-left: -16px;
padding-left: 6px;
border-left: 2px solid var(--c-border, #e9e5f2);
margin-top: 3px;
}
html body .comment-item { margin-bottom: 6px; }
html body .comment-item .comment-avatar { width: 20px !important; height: 20px !important; }
html body .comment-item.c-depth-0 > img.comment-avatar { width: 24px !important; height: 24px !important; }
/* ============================================================
---- 20. [v5.11.6] UNIFIED ALIGNMENT ----
============================================================
Banner, columns grid, header content and footer content all share
the same left/right edges. The banner and the header/footer gutters
derive from the SAME container variables the grid uses, so
alignment holds at every density (70% ... full-width). */
/* [v5.11.7 rewrite] The container width is responsive
(70% -> 80% -> 90% -> 95% -> 100% across breakpoints in style.css),
so nothing may hard-code it.
BANNER: it lives INSIDE .dashboard-center, which already carries
the responsive width — so it simply fills its parent, inset 6px to
match the panels' grid padding. Aligned at every breakpoint by
construction, directly below the header. */
html body .info-banner {
width: calc(100% - 12px) !important;
margin: 6px auto 0 !important;
box-sizing: border-box !important;
}
/* HEADER + FOOTER: mirror the exact same breakpoints style.css uses
for .dashboard-center, so the wordmark and the Dashboard/Jobs/
Logout buttons align with the container edges at every size.
Gutter = (100% - container)/2 + the 6px panel inset. */
html body .site-header, html body .site-footer {
box-sizing: border-box !important;
padding-left: calc((100% - min(70%, 1400px)) / 2 + 6px) !important;
padding-right: calc((100% - min(70%, 1400px)) / 2 + 6px) !important;
}
@media (max-width: 1600px) {
html body .site-header, html body .site-footer {
padding-left: calc(10% + 6px) !important;
padding-right: calc(10% + 6px) !important;
}
}
@media (max-width: 1400px) {
html body .site-header, html body .site-footer {
padding-left: calc(5% + 6px) !important;
padding-right: calc(5% + 6px) !important;
}
}
@media (max-width: 1200px) {
html body .site-header, html body .site-footer {
padding-left: calc(2.5% + 6px) !important;
padding-right: calc(2.5% + 6px) !important;
}
}
@media (max-width: 992px) and (pointer:coarse) {
html body .site-header, html body .site-footer { padding-left: 10px !important; padding-right: 10px !important; }
html body .info-banner { width: calc(100% - 16px) !important; margin: 8px auto 0 !important; }
}
/* ---- 21. [v5.11.8] Thread collapse toggle + Read Mode purge ----
Read Mode is removed platform-wide; its toolbar row (the tall gap
between the engagement bar and the first comment) goes with it.
Parents with replies get a V toggle to expand/contract the thread. */
html body .comments-toolbar { display: none !important; }
html body .comments-section { padding-top: 2px !important; }
html body .thread-toggle {
display: inline-flex;
align-items: center;
gap: 3px;
background: transparent !important;
border: none !important;
padding: 1px 2px !important;
margin: 1px 0 0 !important;
font-size: 12px !important;
font-weight:500 !important;
color: var(--c-primary, #5f5d58) !important;
-webkit-text-fill-color: var(--c-primary, #5f5d58) !important;
cursor: pointer;
box-shadow: none !important;
}
html body .thread-toggle .tt-chev { font-size: 12px; line-height: 1; }
html body .thread-toggle:hover { opacity: .7; }
/* ---- 22. [v5.11.9] Post analytics mini-row removed ---- */
html body .nf-analytics-mini { display: none !important; }
/* ---- 23. [v5.11.10] Comment rhythm: max 2-3mm gaps everywhere ----
Vertical and horizontal spacing throughout the comment area capped
at ~8-10px (2-3mm). */
html body .comment-item {
padding: 2px 0 !important;
margin-bottom: 2px !important;
gap: 5px !important; /* avatar <-> content (horizontal) */
border-bottom: none !important; /* the divider added to the gap */
}
html body .comments-list { margin-bottom: 2px !important; }
html body .comment-header { margin: 0 !important; line-height: 1.3 !important; }
html body .comment-content { row-gap: 1px !important; }
html body .comment-text { line-height: 1.35 !important; }
html body .comment-actions-bar { margin-left: 5px !important; }
html body .thread-toggle { margin: 0 !important; }
html body .comment-children { margin-top: 2px !important; padding-left: 6px !important; }
html body .reply-form-wrapper { margin: 2px 0 !important; }
html body .comment-form { padding-top: 3px !important; gap: 5px !important; }
/* ---- 24. [v5.11.11] Comment alignment: avatar locked to the name line ----
The avatar and the author-name line now sit on the SAME axis: the
avatar top-aligns with the header row and the header centers its
text against the avatar height. Name -> comment-text gap <= 2mm;
thread -> thread <= 2-3mm (re-enforced with explicit zero margins,
since UA / and had no rule, so the two areas
read differently.
Declared once here rather than in each of the seven tab files,
so it cannot drift the way the registration styles did.
!important is genuinely needed: several of these headings are
written as
in the markup, and an inline
style beats a stylesheet rule without it. The JS that appends
new rows emits the same inline style, so newly added entries
pick this up too.
══════════════════════════════════════════════════════════ */
html body .entry-block > h3 {
padding-bottom: 8px !important;
margin: 0 0 14px 0 !important;
border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
/* clear of the absolutely-positioned Remove button at top:10px */
min-height: 20px;
}
/* ══════════════════════════════════════════════════════════
[v5.16.92] Side panels: fit the content, not the viewport
HEIGHT. .dashboard-grid is a grid and grid items stretch by
default, so the left sidebar and the users panel were drawn
full height whatever they contained — a bordered card with a
large empty area beneath the last menu item. align-self:start
sizes them to their content instead, and because that height
is content-driven the card GROWS when a submenu opens and
shrinks when it closes, with no JavaScript.
max-height:100% keeps them inside the app shell, and
overflow-y:auto means the scrollbar only appears when the
content genuinely exceeds the space — previously it was
overflow-y:scroll, reserving a gutter permanently.
WIDTH. 200px existed to fit "RECRUITMENT DASHBOARD" on one
line, since nav labels are white-space:nowrap with an
ellipsis. Narrowed to 172px and the two long group labels are
allowed to wrap onto a second line rather than being cut off.
Submenu items are all far shorter and are unaffected.
══════════════════════════════════════════════════════════ */
html body { --col1-width: 172px; --col3-width: 187px; --col4-width: 187px; } /* [v5.17.47] +5mm sides for the 1710px shell */
html body .left-sidebar,
html body .users-panel {
align-self: start !important;
max-height: 100% !important;
overflow-y: auto !important;
}
/* group headings may wrap; submenu links keep their single line */
html body .left-sidebar .nav-item > a {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.35;
}
html body .left-sidebar .nav-submenu a {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* the profile name already wraps; keep it from forcing the column wider */
html body .left-sidebar .sidebar-username,
html body .left-sidebar .sidebar-name {
word-break: break-word;
overflow-wrap: anywhere;
}
/* ══════════════════════════════════════════════════════════
[v5.16.92] Left sidebar: width hugs its text, height hugs
its content.
WIDTH. --col1-width was a flat 200px, so the column stayed
that wide whatever was in it. It is now fit-content(200px):
the track sizes to its widest content and stops at 200px.
That matters because the widest label is not the same for
everyone — a member sees "REGISTRATION" and "PURPLE ADMIN"
(~150px), while a company account also sees "RECRUITMENT
DASHBOARD" (~196px). A single hard number is either too wide
for one or too tight for the other; this fits both.
.nav-item a already carries white-space:nowrap, so the labels
define the track honestly. The display name has to be allowed
to break, otherwise a long one ("Alexandra Catherine
Montgomery-Smith") would set max-content on its own and the column
would never shrink.
HEIGHT. [v5.16.104] .left-sidebar used align-self:start with
height:auto so the panel hugged its menu. That was written before
rule 14 (line ~441) gave every column a white card treatment —
border, radius and shadow. Once the panel became a visible card,
hugging its content made it stop short while .center-content, which
keeps the grid default of stretch, still ran the full row. The
canvas showing through that difference is the open gap under the
menu, most obvious on tabs whose centre panel is tall and empty.
[v5.16.131] REVERTED. v5.16.104 made it stretch to close the gap
beside the Testing tab. That gap had a second and much larger cause
— .plt-shell was measuring itself against 100vh and overshooting its
own row by about 97px — which the same release fixed. With that gone
the stretch was no longer buying anything, and it left the panel
holding a tall block of empty white below the menu on every page.
Back to hugging its content: the card ends where the menu ends, and
grows only when a group is opened. max-height:100% keeps it inside
the shell if every group is expanded at once, and overflow-y:auto
means the scrollbar appears only when it is genuinely needed.
══════════════════════════════════════════════════════════ */
html body {
--col1-width: fit-content(187px); /* [v5.17.47] grid TRACK sizing — legal in
grid-template-columns, but a TYPE ERROR inside calc(): any calc()
substituting this value is invalidated at computed-value time. */
/* [v5.17.79] length-only companion for calc() consumers (the header pill's
centring math). Same ceiling as the fit-content cap; whoever changes one
changes both. NEVER feed --col1-width itself into calc(). */
--pl-col1-len: 187px;
}
html body .left-sidebar {
align-self: start !important;
height: auto !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* let a long display name wrap instead of dictating the width */
html body .left-sidebar .sidebar-name {
overflow-wrap: anywhere;
white-space: normal;
}
/* the avatar must not hold the column open either */
html body .left-sidebar .sb-avatar-img { max-width: 100%; }
/* ══════════════════════════════════════════════════════════
[v5.16.93] One look for the Add and Save buttons on every
profile tab.
They were styled by .btn-row, which only exists in 4 of the
11 tabs (certification, experience, university, school).
Everywhere else the buttons fell through to the global
button{} rule in style.css, which forces
background-color:var(--c-btn) and color:white with
!important — the grey pills. personal.php went further and
styled its Save inline.
Targeted by behaviour rather than by class, because these
buttons have no shared class to hook:
Add -> onclick begins "add...Entry" (10 buttons)
Save -> type=submit, or .save-btn (11 buttons)
Both patterns verified against every profile tab before
this rule was written.
!important is unavoidable: the global button rule uses it,
and personal.php's Save carries an inline style, which only
an !important declaration can override. -webkit-text-fill-
color is set alongside every colour, since that property
beats colour outright and the theme uses it widely.
.cvs-btn is excluded — the CV/Summary tab has its own
deliberate button treatment.
══════════════════════════════════════════════════════════ */
/* shared metrics */
html body .profile-form button[onclick^="add"],
html body .profile-form button[type="submit"]:not(.cvs-btn),
html body .profile-form .save-btn,
html body .profile-form .reg-submit {
padding: 5px 12px !important;
font-size: 12px !important;
font-weight:500 !important;
line-height: 1.45 !important;
width: auto !important;
height: auto !important;
font-family: inherit !important;
cursor: pointer !important;
box-shadow: none !important;
}
/* "+ Add ..." — outlined, secondary */
html body .profile-form button[onclick^="add"] {
background: #fff !important;
background-color: #fff !important;
color: #1f2937 !important;
-webkit-text-fill-color: #1f2937 !important;
border: 1px solid #ccc !important;
}
html body .profile-form button[onclick^="add"]:hover {
background: #f3f4f6 !important;
background-color: #f3f4f6 !important;
border-color: #b8b1c6 !important;
}
/* "Save ..." — primary */
/* [v5.16.94] .reg-submit added: the registration Save is a type="button"
with onclick="saveCompanyReg()", so it matched none of the patterns above
and would have stayed grey beside the now-purple profile Saves. */
html body .profile-form button[type="submit"]:not(.cvs-btn),
html body .profile-form .save-btn,
html body .profile-form .reg-submit {
background: var(--c-primary, #5f5d58) !important;
background-color: var(--c-primary, #5f5d58) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border: 1px solid var(--c-primary, #5f5d58) !important;
}
html body .profile-form button[type="submit"]:not(.cvs-btn):hover,
html body .profile-form .save-btn:hover,
html body .profile-form .reg-submit:hover {
background: var(--c-primary-dark, #3f3d39) !important;
background-color: var(--c-primary-dark, #3f3d39) !important;
border-color: var(--c-primary-dark, #3f3d39) !important;
}
/* ══════════════════════════════════════════════════════════
[v5.16.96] The last card headings without the underline.
Audited every section heading across Network, Discover,
Community, Purple Admin and Settings. Almost all already
carry their own treatment and were left alone:
underlined already .adm-sh .cz-title .cm-head
.gm-sb-hdr .gm-chat-hdr .rd-hd
.fjd-section-title .adm-drill-hd
.privacy-card-header
purple filled bar .acc-sec-head .pr-sec-title
.mbx-set-hd
(a stronger treatment than a rule —
adding one would be noise)
Only four headings were genuinely bare, and they are the
ones on screen in Settings > Account:
Email Diagnostics (Admin Only) settings-account.php
Two-Factor Authentication settings-account.php
Write a Company Review company-reviews.php
Share Your Salary company-reviews.php
Same values as .reg-form-section-title and .entry-block h3,
so all three areas now match.
══════════════════════════════════════════════════════════ */
html body .pl-sec-card > h3,
html body .nf-2fa > h3,
html body .cr-form-title {
padding-bottom: 8px !important;
margin: 0 0 14px 0 !important;
border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
}
/* ============================================================
---- 48. [v5.16.148] POST DOTS MENU: HORIZONTAL ----
============================================================
The menu was display:block, so its items stacked vertically and
the panel grew downward over the post content. Two or three icon
buttons in a column is a lot of vertical travel for very little
choice.
Now a row. right:0 was already on .post-dropdown, so with the
items laid out horizontally the panel grows LEFTWARD from the
button's right edge — away from the card edge, which is where
the space is. top:100% keeps it just under the dots.
Nothing here changes what is in the menu; only how it lays out.
============================================================ */
/* [v5.16.152] The open class differs by page, and the page rules carry an ID:
Feed .post-dropdown.active (0,2,0)
Engagements #engagements-page .post-dropdown.show (1,2,0)
Community #community-page .post-dropdown.show (1,2,0)
v5.16.148 only wrote .post-dropdown.show at (0,2,2) — it never matched the
Feed, and it lost to the other two on the ID. So the menu stayed
display:block while the 26px item sizing below DID apply, stacking the
items vertically inside overflow:hidden and clipping Delete and the feed
link out of view. All four selectors are listed now. */
html body .post-dropdown.show,
html body .post-dropdown.active,
html body #engagements-page .post-dropdown.show,
html body #community-page .post-dropdown.show {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 2px !important;
white-space: nowrap !important;
width: max-content !important;
min-width: 0 !important;
overflow: visible !important; /* .post-dropdown sets overflow:hidden */
}
html body .post-dropdown .dropdown-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* ============================================================
---- 49. [v5.16.156] Right sidebar: every widget an
independent card ----
============================================================
The sidebar pieces read as one merged column: the clock floats
bare with no frame, Profile Progress hugs the stats card at a
6px gap, and corner treatment differs block to block. Every
direct child of .right-sidebar now gets the same card frame —
white ground, 1px border, the 3px house radius, and a uniform
10px gap — so the clock, notifications, progress ring, stats,
job activity and the rest sit as clearly separate,
self-contained blocks.
At (0,1,3) this out-ranks the widgets' own class rules
(.pc-card/.sw-card/.notif-dashboard at (0,1,0)) with no
!important, wherever each is printed. Internal padding of each
widget is deliberately untouched. */
/* [v5.16.157] The column itself painted a ground behind the cards
(--col4-bg by default; the v5.11.1 "panels stay locked white"
rule at (0,2,2)!important on the default theme), so the whole
sidebar still read as ONE big rectangle enclosing the cards. Per
direction, only the independent card rectangles carry a ground —
the RIGHT sidebar panel is now transparent and the canvas shows
through between cards. Deliberately revises v5.11.1 for this one
panel; left sidebar / center / users-panel stay locked white.
The second selector matches the white lock's (0,2,2)+!important
and sits later in this file, so it wins on the default theme; the
first covers the alternate themes. background-COLOR longhand
only, so the watermark background-image layer is untouched. */
html body .right-sidebar,
html body:not([data-theme]) .right-sidebar {
background-color: transparent !important;
/* [v5.16.158] The "panels float free" section frames every panel
with a 1px border + purple-tinted shadow — on this column that
kept drawing the enclosing rectangle even after the ground went
transparent. Per the standing rule the column carries NO frame
of its own; only the child cards do. Same specificity as the
source rule, later in the file, so no !important escalation. */
border: none;
box-shadow: none;
}
html body .right-sidebar > div {
background: var(--c-bg-white, #fff);
border: 1px solid var(--c-border, #e5e7eb);
/* [v5.16.160] followed the "Cards" slider; [v5.17.72] moved to the
SIDE PANELS slider per direction — these widget boxes belong to the
column, not to content cards. 3px house default when no value is
saved. */
border-radius: var(--pl-r-panels, 3px);
margin: 0 0 10px 0;
overflow: hidden;
}
/* visual-polish gives .notif-dashboard its own near-invisible
rgba(0,0,0,0.05) border with !important — part of why the
notifications block blends into the page. Matched to the same
frame as its siblings; !important is needed to out-rank
visual-polish's !important, and refinements loads after it. */
html body .right-sidebar > .notif-dashboard {
border: 1px solid var(--c-border, #e5e7eb) !important;
}
/* ============================================================
---- 50. [v5.16.162] Beautiful, centred confirm dialog ----
============================================================
The gm-* mini dialog (delete-post confirm and friends) was a
flat white rectangle with tight text. Reparenting to
in JS fixes the off-centre drift (a transformed ancestor was
re-basing its position:fixed); this section gives it a modern
look. All selectors carry html body for rank over the base
gm-* rules in style.css; nothing here is !important beyond the
button colours that must beat the base .gm-btn !important. */
/* Dim + blur the page behind, and fade the whole overlay in. */
html body .gm-overlay {
background: rgba(17, 24, 39, 0.55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
padding: 20px;
}
html body .gm-overlay.active {
display: flex;
animation: plGmFade 0.18s ease;
}
@keyframes plGmFade { from { opacity: 0; } to { opacity: 1; } }
/* The card: rounded, elevated, roomy, with a scale-in. */
html body .gm-overlay .gm-box {
/* [v5.16.163] narrower per direction, and a clearly visible
boundary line instead of the near-invisible 4%-black hairline.
Fixed width (the box is free-positioned now, so it must not
depend on the flex parent) capped to the viewport on phones. */
width: 320px;
max-width: calc(100vw - 32px);
padding: 24px 24px 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28),
0 2px 8px rgba(0, 0, 0, 0.12);
border-radius: var(--pl-r-modals, 14px); /* [v5.16.165] follows Dialogs slider */
border: 1.5px solid var(--c-border, #d1d5db);
animation: plGmPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes plGmPop {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Icon badge — a soft red disc for destructive confirms. */
html body .gm-overlay .gm-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin: 0 auto 14px;
border-radius: 50%;
background: rgba(220, 53, 69, 0.10);
color: var(--c-danger, #dc3545);
font-size: 24px;
}
/* Message — larger, calmer, with a little breathing room. */
html body .gm-overlay .gm-msg {
font-size: 15.5px;
font-weight:500;
line-height: 1.5;
color: var(--c-text-primary, #1f2937);
margin-bottom: 22px;
}
/* Buttons — full-size, rounded, clear hierarchy. */
html body .gm-overlay .gm-btns {
gap: 12px;
}
html body .gm-overlay .gm-btn {
flex: 1;
max-width: 150px;
padding: 11px 18px !important;
font-size: 14px !important;
font-weight:500 !important;
border-radius: 9px !important;
transition: transform 0.08s ease, filter 0.15s ease !important;
}
html body .gm-overlay .gm-btn:hover { filter: brightness(1.05); }
html body .gm-overlay .gm-btn:active { transform: translateY(1px); }
/* Destructive "yes" keeps the danger fill but full-weight now. */
html body .gm-overlay .gm-btn.yes {
background: var(--c-danger, #dc3545) !important;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.30) !important;
}
/* Cancel — quiet neutral with a visible outline, not a grey slab. */
html body .gm-overlay .gm-btn.no {
background: #fff !important;
color: var(--c-text-secondary, #4b5563) !important;
-webkit-text-fill-color: var(--c-text-secondary, #4b5563) !important;
border: 1px solid var(--c-border, #d1d5db) !important;
}
html body .gm-overlay .gm-btn.no:hover {
background: var(--c-bg-muted, #f9fafb) !important;
}
/* [v5.16.169] The other (static) image lightbox backdrop was
rgba(0,0,0,0.95) — same faint see-through. Fully opaque to match
#pl-lightbox, so no viewer lets the page ghost through. */
html body .lightbox { background: rgb(0, 0, 0); }
/* ============================================================
---- 51. [v5.16.171] Static image viewer: comments panel ----
============================================================
Option A — the zoom/rotate viewer (.lightbox) now shows the
post's comments in a panel on the right, alongside the image,
with rounded corners on both regions. Backdrop already opaque
black (section earlier). Scoped to .lightbox so the other
viewer is untouched. */
html body .lightbox {
/* [v5.16.172] center the row so the image and the comments panel
sit next to each other with only a small gap — no dead black
space between them.
[v5.16.175] gap tightened to the approved 5mm (same as the other
viewer). */
display: none;
justify-content: center;
align-items: center;
gap: 5mm;
padding: 18px;
box-sizing: border-box;
}
html body .lightbox.active { display: flex; }
html body .lightbox .lightbox-viewport {
/* size to the image, not the whole row, so it doesn't push the
panel away. Caps keep it from crowding the panel. */
flex: 0 1 auto;
width: auto; height: auto;
max-width: calc(100vw - 340px - 60px);
max-height: calc(100vh - 36px);
border-radius: 14px;
background: #000;
/* [v5.16.176] positioning context for the zoom/rotate controls */
position: relative;
}
/* [v5.16.176] controls now live inside the viewport, so they are
centred on the IMAGE (not the screen) and ride its bottom edge.
Scoped to #lightbox — the community and profile lightboxes keep
the old screen-anchored bar. */
html body #lightbox .lightbox-viewport .lightbox-controls {
position: absolute;
bottom: 12px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 6;
}
html body #lightbox .lightbox-viewport .lightbox-controls button {
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 50%;
}
html body #lightbox .lightbox-viewport .lightbox-controls button:hover {
background: rgba(0,0,0,0.7);
}
/* [v5.16.180] VIDEO SUPPORT in the same viewer. The video swaps in for
the img and obeys the same caps, so the comments panel height-match
works unchanged. Zoom/rotate bar hides — native controls do that job
(and would fight the transform anyway). */
html body #lightbox .lightbox-viewport video {
display: block;
max-width: 100%;
max-height: calc(100vh - 36px);
border-radius: 4px;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
background: #000;
}
html body #lightbox.lb-video-mode .lightbox-controls { display: none; }
/* the ⛶ expand button riding each feed video's top-right corner */
html body .post-media-item { position: relative; }
html body .post-media-item .pl-video-expand {
position: absolute; top: 8px; right: 8px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(0,0,0,0.45); color: #fff;
border: 1px solid rgba(255,255,255,0.35);
font-size: 15px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
html body .post-media-item .pl-video-expand:hover { background: rgba(0,0,0,0.7); }
html body .lightbox .lightbox-comments-toggle {
flex: 0 0 auto;
width: 30px; height: 54px;
border: none;
border-radius: 8px;
background: rgba(255,255,255,0.14);
color: #fff;
font-size: 22px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease;
}
html body .lightbox .lightbox-comments-toggle:hover { background: rgba(255,255,255,0.28); }
html body .lightbox .lightbox-comments {
flex: 0 0 340px;
max-width: 92vw;
/* [v5.16.175] no longer a full-height stretched slab: the panel's
height is set at runtime to the image's rendered height
(lbSyncPanel), so it starts where the image starts and ends where
it ends. box-sizing makes that height include padding + border;
longer comment lists scroll inside. */
box-sizing: border-box;
max-height: calc(100vh - 36px);
background: #fff;
border: 1px solid var(--c-border, #e5e7eb);
border-radius: 16px;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
}
/* [v5.16.183] TWO-STATE LAYOUT (supersedes the .179 preserved-slot +
.182 ghost fix — display:none makes ghosts impossible anyway):
comments VISIBLE -> side-by-side arrangement (caps above);
comments HIDDEN -> the media takes the FULL SCREEN, and the ‹
button floats at the right edge. Hovering the right edge of the
screen re-opens the comments (see mousemove wiring in the JS). */
html body .lightbox.comments-hidden .lightbox-comments { display: none; }
html body .lightbox.comments-hidden { padding: 0; gap: 0; }
html body .lightbox.comments-hidden .lightbox-viewport {
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
}
html body .lightbox.comments-hidden .lightbox-viewport img,
html body .lightbox.comments-hidden .lightbox-viewport video {
max-height: 100vh;
border-radius: 0;
}
html body .lightbox.comments-hidden .lightbox-comments-toggle {
position: fixed;
right: 8px; top: 50%; transform: translateY(-50%);
z-index: 8;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.35);
}
/* each comment thread its own rounded card, latest first */
html body .lightbox .lightbox-comments .comments-list {
display: flex;
flex-direction: column-reverse;
gap: 10px;
}
html body .lightbox .lightbox-comments .comments-list > .comment-item {
background: var(--c-bg-white, #fff);
border: 1px solid var(--c-border, #e5e7eb);
border-radius: var(--pl-r-cards, 12px);
padding: 10px 12px;
margin: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
html body .lightbox .lightbox-comments .comments-section {
padding: 0 !important; margin: 0 !important; border-top: none !important;
}
/* keep the zoom/nav controls above the panel
([v5.16.175] .lightbox-close removed — button no longer exists) */
html body .lightbox .lightbox-controls,
html body .lightbox .lightbox-counter,
html body .lightbox .lightbox-nav { z-index: 5; }
/* On phones stack image over comments ([v5.16.175] runtime height
match is skipped by the JS and overridden here as backstop;
[v5.16.179] stacked layout collapses the hidden panel fully —
image stability matters on desktop, a 42% blank band does not) */
@media (max-width: 768px) {
html body .lightbox { flex-direction: column; }
html body .lightbox .lightbox-comments { flex: 0 0 42%; max-width: none; height: auto !important; }
html body .lightbox.comments-hidden .lightbox-comments { display: none; visibility: visible; }
}
/* [v5.16.179] keep the viewer above EVERYTHING, including the fixed
site header (base z-index 10000 lost to a stacking-context trap
when an ancestor carries a transform; re-parenting to in
openLightbox is the real fix, this is the belt to those braces). */
html body .lightbox { z-index: 2147483000; }
/* ---- [v5.16.192] Post action strip: monochrome everywhere ----
(.191's always-visible row reverted to the ⋮ toggle per direction.)
Every icon in the dots strip — edit, delete, view-in-feed — renders
plain black-and-white; no red, no fills. */
html body .post-dropdown .dropdown-item,
html body .post-dropdown .dropdown-item svg,
html body .post-dropdown .dropdown-item.delete,
html body .post-dropdown .dropdown-item.delete svg {
color: var(--c-text-primary, #000) !important;
-webkit-text-fill-color: var(--c-text-primary, #000) !important;
stroke: var(--c-text-primary, #000) !important;
}
/* ---- [v5.16.194] Dots strip: BULLETPROOF visibility ----
Symptom: the open strip showed only the Edit pencil, with Delete and
View-in-feed present in the layout (the gap proved it) but painted
invisible — a stroke/fill/visibility rule (theme or saved style
settings) blanking the SVG internals. This block outranks anything:
the open strip becomes a white pill with borders and real padding,
every item gets a uniform 26px hit area, and the icon SVGs AND THEIR
CHILD SHAPES (path/line/polyline/circle/rect) are forced to stroke
dark, fill none, fully opaque and visible. */
html body .post-dropdown.active {
/* [v5.16.330] pill box removed per request (see shared-post-components.php
inline copy) — icons sit bare inside the unified header box. */
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html body .post-dropdown .dropdown-item,
html body .post-dropdown a.dropdown-item {
/* [v5.16.198] icon-only again per direction
[v5.16.201] flex-basis clamp mirrors the inline copy */
flex: 0 0 26px !important;
width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
padding: 0 !important; margin: 0 !important;
text-decoration: none !important;
color: #111827 !important; -webkit-text-fill-color: #111827 !important;
opacity: 1 !important; visibility: visible !important;
}
/* [v5.16.198] ANTI-CLIP INSURANCE: the strip opens leftward as an
absolute pill; any ancestor with overflow:hidden (the base
.post-card carries one) can slice it so only the item nearest the
dots survives — the exact asymmetry seen between the two pages.
Every ancestor in the strip's path is forced overflow:visible; the
card's media does its own clipping (.post-media overflow:hidden),
so nothing is lost. */
html body .post-header,
html body .post-actions-menu,
html body .post-card {
overflow: visible !important;
}
html body .post-dropdown .dropdown-item svg {
display: inline-block !important;
width: 14px !important; height: 14px !important;
margin: 0 !important;
opacity: 1 !important; visibility: visible !important;
stroke: #111827 !important; fill: none !important;
}
html body .post-dropdown .dropdown-item svg path,
html body .post-dropdown .dropdown-item svg line,
html body .post-dropdown .dropdown-item svg polyline,
html body .post-dropdown .dropdown-item svg polygon,
html body .post-dropdown .dropdown-item svg circle,
html body .post-dropdown .dropdown-item svg rect {
stroke: #111827 !important; fill: none !important;
opacity: 1 !important; visibility: visible !important;
display: initial !important;
}
/* ---- [v5.16.196] Engagement posts: media FULL-BLEED like the feed ----
The feed's .post-media pulls itself over the card padding with
margin: 8px -14px (edge-to-edge media, the look in the reference
screenshot). #engagements-page .post-media overrode that with
margin: 8px 0, insetting the media and making the whole post read
smaller. This restores the feed geometry on the engagements page. */
html body #engagements-page .post-media {
margin: 8px -14px !important;
border-top: 1px solid #e0e0e0 !important;
border-bottom: 1px solid #e0e0e0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
/* ---- [v5.16.197] Post media sizing: ONE rule set for every page ----
The feed carried these as page-inline overrides (network-feed.php),
so only the feed got 500px-tall zero-padding media while the
engagements page fell back to the base 350px + 10px padding rules —
the true cause of "engagement posts look smaller". Promoted here to
the shared layer: identical media geometry wherever a .post-card
renders. */
html body .post-card .post-media { flex-shrink: 0; overflow: hidden; min-height: 0; }
html body .post-card .post-media-grid { height: 100%; }
html body .post-card .post-media-item {
overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: 0 !important;
}
html body .post-card .post-media-item img {
/* [v5.16.204] WIDTH-FIRST: every image fills the card edge to edge
(portrait included) and the post's height follows dynamically.
85vh cap so one tall screenshot can't swallow three screens. */
width: 100% !important; height: auto !important;
max-width: 100% !important; max-height: 85vh !important;
object-fit: contain !important; display: block !important;
}
html body .post-card .post-media-item video {
width: 100% !important; max-height: 85vh !important;
object-fit: contain !important;
}
/* ---- [v5.16.199] Strip glyphs: plain text characters ----
✎ 🗑︎ ↗ replace the SVG icons — a character participates in no
stroke/fill pipeline and cannot be blanked. Text-presentation is
forced (no colour emoji), size and colour hard-set. */
html body .post-dropdown .ddi-glyph {
font-size: 15px !important;
line-height: 1 !important;
font-family: "Segoe UI Symbol", "Noto Sans Symbols", system-ui, sans-serif !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-variant-emoji: text;
display: inline-block !important;
opacity: 1 !important; visibility: visible !important;
}
/* ---- [v5.16.202] Header-first posting layout ----
Per direction: posting moves to the HEADER (see header.php), so the
in-feed composer card — including its Media and Poll buttons — is
HIDDEN, not removed: every line of composer/media/poll code stays in
the program, ready to return by deleting this rule. The centre
column tightens to the post width and every post fills it, height
dynamic to content. */
html body .create-post-card { display: none !important; }
html body .feed-container.profile-form {
/* [v5.16.203] FULL COLUMN: the 700px cap left dead gaps either side
(the X-marked areas). The feed now fills its column edge to edge;
posts already fill 100% of it. */
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
html body .feed-container .post-card { width: 100% !important; }
/* [v5.16.203] vertical tightening: less dead space above and between */
html body .feed-container .pl-page-head { margin: 0 0 var(--pl-gap-tight, 3px) !important; } /* [v5.16.336] was 4px 0 8px — the literal 8px was the real feed-header-to-post gap; tightened at source */
html body .feed-container .post-card { margin-bottom: 8px !important; }
/* ---- [v5.16.206] Header anchoring (mirror of the header.php inline
copy; also covers logged-out pages where the inline block, being
inside the composer conditional, does not print) ---- */
html body .site-header { justify-content: flex-start !important; padding-left: calc((100% - min(var(--container-width, 100%), var(--container-max-width, 100vw))) / 2) !important; padding-right: calc((100% - min(var(--container-width, 100%), var(--container-max-width, 100vw))) / 2) !important; } /* [v5.16.207] container-matched gutters */
html body .site-header .hdr-composer { margin-left: auto !important; margin-right: auto !important; } /* [v5.17.72] both autos: centred pill */
html body .site-header .header-nav { margin-left: auto !important; }
/* ============================================================
---- 57. [v5.16.223] MEDIA FIXED CENTER in the viewer ----
============================================================
The comments panel was a flex SIBLING of the media, so opening
it (including the auto-open when the mouse nears the right
edge) pushed the media left, and closing it rolled the media
back — the "rollover" the user circled. Now the panel is an
OVERLAY floating above the right side: the media is centered
in the full viewport and NEVER moves, panel open or closed. */
html body .lightbox { gap: 0; padding: 12px; }
html body .lightbox .lightbox-viewport {
max-width: calc(100vw - 24px);
max-height: calc(100vh - 24px);
}
html body .lightbox .lightbox-comments {
position: fixed;
right: 52px; top: 50%; transform: translateY(-50%);
width: 340px;
z-index: 9;
box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
html body .lightbox .lightbox-comments-toggle {
position: fixed;
right: 8px; top: 50%; transform: translateY(-50%);
z-index: 10;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.35);
}
/* ============================================================
---- 58. [v5.16.228] ADAPTIVE CONTAINER for standard screens ----
============================================================
The container was a fixed 70% at every size — correct on 1920+
but starving the feed on smaller standard screens. Width now
adapts per tier (height already adapts: the page scrolls with
the viewport and post media scales by --post-media-ratio):
>=1920 (full desktop) ......... 70% (approved look, unchanged)
1440-1919 (laptops/scaled) .... 80%
1200-1439 (small laptops) ..... 90%
993-1199 (compact/125% scale) . 98% (pairs with the narrow-
column grid tier)
<=992 ......................... 100% (stacked mobile layout)
The header follows automatically: its closed-loop alignment
re-measures .dashboard-center on every load and resize. */
@media (min-width:1440px) and (max-width:1919px){
html body { --container-width: 80%; }
}
@media (min-width:1200px) and (max-width:1439px){
html body { --container-width: 90%; }
}
@media (min-width:993px) and (max-width:1199px){
html body { --container-width: 98%; }
}
@media (max-width:992px) and (pointer:coarse){
html body { --container-width: 100%; }
}
/* ============================================================
---- 59. [v5.16.231] Stable dialog + corner zoom controls ----
============================================================
a) The delete/confirm dialog appeared right-of-centre and slid
in: plGmPop ANIMATES transform, which overrides the box's
inline translate(-50%,-50%) during the animation — so the
box renders offset right for 0.2s, then snaps. Fade-only
now; the box appears already in place, perfectly stable.
b) The viewer's zoom/rotate controls move OFF the image to the
WINDOW's bottom-left corner (fixed), per direction. */
html body .gm-overlay .gm-box {
animation: plGmBoxFade 0.15s ease;
}
@keyframes plGmBoxFade { from { opacity: 0; } to { opacity: 1; } }
html body #lightbox .lightbox-viewport .lightbox-controls {
position: fixed;
left: 12px;
bottom: 12px;
top: auto;
right: auto;
transform: none;
z-index: 11;
}
/* ============================================================
---- 60. [v5.16.232] COMPACT confirm dialog + button rule ----
============================================================
STANDING RULE (per direction, applies to all future buttons):
button text padding max 2mm (~7px) top/bottom and max 5mm
(~18px) left/right. Dialog itself compacted: narrower box,
tighter paddings, smaller icon and message. */
html body .gm-overlay .gm-box {
width: 250px;
padding: 14px 14px 12px;
}
html body .gm-overlay .gm-icon {
width: 34px;
height: 34px;
margin: 0 auto 8px;
font-size: 16px;
}
html body .gm-overlay .gm-msg {
font-size: 13px;
line-height: 1.4;
margin-bottom: 12px;
}
html body .gm-overlay .gm-btns { gap: 8px; }
html body .gm-overlay .gm-btn {
padding: 7px 18px !important; /* 2mm / 5mm rule */
font-size: 12.5px !important;
border-radius: 7px !important;
max-width: 120px;
}
/* ============================================================
---- 61. [v5.16.233] Viewer: info panel, thread nav, solo ----
============================================================
a) POST NAV: "Previous post / Next post" at the top corners,
2mm/5mm button rule, jumps between posts that have media.
b) INFO PANEL: post author/time/text/counts floats over the
LEFT side (mirror of the comments overlay), with its own
edge toggle. Visible by default; media never moves.
c) ZOOM TOOLS moved from the window corner to just BELOW the
image, LEFT corner (per direction, supersedes section 59b);
the fullscreen button sits just below the image, RIGHT
corner. Fullscreen (solo) = image only: every overlay is
hidden and the viewer goes native-fullscreen. */
html body .lb-post-nav {
position: fixed;
top: 14px;
z-index: 12;
background: rgba(255,255,255,0.14);
color: #fff;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 7px;
padding: 7px 18px; /* 2mm / 5mm rule */
font-size: 12.5px;
font-weight:500;
cursor: pointer;
}
html body .lb-post-nav:hover { background: rgba(255,255,255,0.28); }
html body .lb-post-prev { left: 14px; }
html body .lb-post-next { right: 14px; }
html body .lightbox-info-toggle {
position: fixed;
left: 8px; top: 50%; transform: translateY(-50%);
z-index: 10;
width: 30px; height: 54px;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 8px;
background: rgba(0,0,0,0.45);
color: #fff;
font-size: 22px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
html body .lightbox-info {
position: fixed;
left: 52px; top: 50%; transform: translateY(-50%);
width: 300px;
max-width: 88vw;
max-height: 80vh;
overflow-y: auto;
background: #fff;
border-radius: 16px;
padding: 14px;
z-index: 9;
box-shadow: 0 12px 40px rgba(0,0,0,0.45);
box-sizing: border-box;
}
html body .lightbox.info-hidden .lightbox-info { display: none; }
html body .lightbox-info .lbi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html body .lightbox-info .lbi-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
html body .lightbox-info .lbi-name { font-weight:500; font-size: 13.5px; color: #111827; }
html body .lightbox-info .lbi-time { font-size: 12px; color: #6b7280; }
html body .lightbox-info .lbi-text { font-size: 13px; line-height: 1.5; color: #1f2937; text-align: justify; margin-bottom: 10px; max-height: 40vh; overflow-y: auto; }
html body .lightbox-info .lbi-meta { font-size: 12px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 8px; }
html body #lightbox .lightbox-viewport .lightbox-controls {
position: absolute;
left: 0; top: 100%;
bottom: auto; right: auto;
margin-top: 6px;
transform: none;
z-index: 11;
}
html body .lb-fullscreen-btn {
position: absolute;
right: 0; top: 100%;
margin-top: 6px;
z-index: 11;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(0,0,0,0.45);
color: #fff;
border: 1px solid rgba(255,255,255,0.35);
font-size: 14px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
html body .lb-fullscreen-btn:hover { background: rgba(0,0,0,0.7); }
html body #lightbox.lb-video-mode .lb-fullscreen-btn { display: none; }
/* SOLO fullscreen: the image and nothing else */
html body .lightbox.lb-solo .lb-post-nav,
html body .lightbox.lb-solo .lightbox-info,
html body .lightbox.lb-solo .lightbox-info-toggle,
html body .lightbox.lb-solo .lightbox-comments,
html body .lightbox.lb-solo .lightbox-comments-toggle,
html body .lightbox.lb-solo .lightbox-controls,
html body .lightbox.lb-solo .lightbox-counter,
html body .lightbox.lb-solo .lightbox-nav { display: none !important; }
/* ============================================================
---- 62. [v5.16.235] Side-by-side viewer: NOTHING overlaps ----
============================================================
New layout per direction: ONE fixed right window (340px, full
height) with Comments / Information tab buttons; the media gets
every remaining pixel, centered in its own zone; no window ever
overlaps another. Supersedes the overlay panels of 57/61a-b.
Solo fullscreen still gives the image the whole screen. */
html body .lightbox { padding: 0; gap: 0; align-items: stretch; justify-content: flex-start; }
html body .lightbox .lightbox-viewport {
flex: 1 1 auto;
width: auto;
max-width: none;
height: 100vh;
max-height: 100vh;
border-radius: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
html body #lightbox .lightbox-viewport img,
html body #lightbox .lightbox-viewport video {
max-width: calc(100% - 24px);
max-height: 94vh;
}
html body .lightbox .lightbox-comments {
position: static;
transform: none;
flex: 0 0 340px;
width: 340px;
height: 100vh !important;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
border-left: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
padding: 0;
}
html body .lightbox .lb-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid #e5e7eb;
flex: 0 0 auto;
}
html body .lightbox .lb-tab-btn {
flex: 1;
background: #f9fafb;
border: none;
border-bottom: 2px solid transparent;
padding: 7px 18px; /* 2mm / 5mm rule */
font-size: 12.5px;
font-weight:500;
color: #6b7280;
cursor: pointer;
}
html body .lightbox .lb-tab-btn.active {
background: #fff;
color: #3f3d39;
border-bottom-color: #5f5d58;
}
html body .lightbox .lb-tab-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 12px;
}
html body .lightbox-info, html body .lightbox-info-toggle,
html body .lightbox-comments-toggle { display: none !important; }
/* nav that must not touch the right window */
html body .lb-post-next { right: 354px; }
html body .lightbox .lightbox-nav.lightbox-next { right: 352px; }
/* zoom bar + fullscreen ride the media zone's bottom corners */
html body #lightbox .lightbox-viewport .lightbox-controls {
position: absolute;
left: 12px; bottom: 12px; top: auto;
margin: 0;
}
html body .lb-fullscreen-btn {
position: absolute;
right: 12px; bottom: 12px; top: auto;
margin: 0;
}
/* solo: image only, full width */
html body .lightbox.lb-solo .lightbox-comments { display: none !important; }
html body .lightbox.lb-solo .lightbox-viewport img,
html body .lightbox.lb-solo .lightbox-viewport video { max-width: 100%; max-height: 100vh; }
@media (max-width: 820px) {
html body .lightbox { flex-direction: column; }
html body .lightbox .lightbox-viewport { height: 55vh; }
html body .lightbox .lightbox-comments { flex: 1 1 auto; width: 100%; height: auto !important; border-left: none; border-top: 1px solid #e5e7eb; }
html body .lb-post-next { right: 14px; }
html body .lightbox .lightbox-nav.lightbox-next { right: 8px; }
}
/* ============================================================
---- 63. [v5.16.236] Right window polish per direction ----
============================================================
a) INFO TAB STYLES RESCOPED: the .lbi-* rules were still bound
to the deleted .lightbox-info panel, so inside the tab the
avatar rendered UNSTYLED and screen-huge. Now scoped to the
whole viewer — compact 38px avatar, tidy name/time/text,
exactly like the comments presentation.
b) TAB BUTTONS: visible gap between the two, rounded, compact.
c) NO COLORING on text fields in the viewer window: comment
inputs stay plain WHITE with a neutral border. */
html body .lightbox .lbi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html body .lightbox .lbi-avatar { width: 38px !important; height: 38px !important; border-radius: 50%; object-fit: cover; flex: 0 0 38px; }
html body .lightbox .lbi-name { font-weight:500; font-size: 13.5px; color: #111827; }
html body .lightbox .lbi-time { font-size: 12px; color: #6b7280; }
html body .lightbox .lbi-text { font-size: 13px; line-height: 1.5; color: #1f2937; text-align: justify; margin-bottom: 10px; }
html body .lightbox .lbi-text img { max-width: 100%; height: auto; }
html body .lightbox .lbi-meta { font-size: 12px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 8px; }
html body .lightbox .lb-tabs { gap: 8px; padding: 6px 8px; }
html body .lightbox .lb-tab-btn { border: 1px solid #e5e7eb; border-radius: 6px; border-bottom: 1px solid #e5e7eb; }
html body .lightbox .lb-tab-btn.active { border-color: #5f5d58; border-bottom-color: #5f5d58; }
html body .lightbox .lightbox-comments input[type="text"],
html body .lightbox .lightbox-comments input:not([type]),
html body .lightbox .lightbox-comments textarea {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
box-shadow: none !important;
}
/* ============================================================
---- 64. [v5.16.237] STANDING RULE: fields never tinted ----
============================================================
Per direction (permanent): REAL text-entry fields must never
pick up the banner/theme background color — plain WHITE with a
neutral border, everywhere content lives: the post modal, the
viewer, dialogs, and every dashboard tab. The locked header's
translucent pills are deliberately excluded (header is FINAL). */
html body .dashboard-center input[type="text"],
html body .dashboard-center input[type="email"],
html body .dashboard-center input[type="password"],
html body .dashboard-center input[type="search"],
html body .dashboard-center input[type="url"],
html body .dashboard-center input[type="number"],
html body .dashboard-center input[type="tel"],
html body .dashboard-center input[type="date"],
html body .dashboard-center input:not([type]),
html body .dashboard-center textarea,
html body .dashboard-center select,
html body #pl-postmodal input[type="text"],
html body #pl-postmodal textarea,
html body #pl-postmodal select,
html body .lightbox input[type="text"],
html body .lightbox input:not([type]),
html body .lightbox textarea,
html body .gm-overlay input,
html body .gm-overlay textarea,
html body .forward-modal input,
html body .forward-modal textarea,
html body .conn-modal input,
html body .conn-modal textarea,
html body .left-sidebar input[type="text"],
html body .users-panel input[type="text"],
html body .right-sidebar input[type="text"] {
background-color: #ffffff !important;
background-image: none !important;
color: #111827 !important;
border-color: #d1d5db !important;
box-shadow: none !important;
}
/* ============================================================
---- 65. [v5.16.238] Viewer GUTTERS: overlap is impossible ----
============================================================
Per direction: in the viewer, NO control may overlap the image
by even a pixel. Enforced by GEOMETRY, not positioning luck:
the media zone reserves fixed gutters — 48px top (post-nav
row), 48px bottom (zoom bar left, fullscreen right), 44px each
side (image prev/next arrows). The image is confined to the
inner content box; every control lives only in a gutter. All
controls also stay INSIDE the media zone — never on the right
window, never past a boundary. */
html body .lightbox .lightbox-viewport {
padding: 48px 44px;
box-sizing: border-box;
}
html body #lightbox .lightbox-viewport img,
html body #lightbox .lightbox-viewport video {
max-width: 100%;
max-height: calc(100vh - 96px);
}
html body .lightbox .lightbox-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
z-index: 11;
}
html body .lightbox .lightbox-nav.lightbox-prev { left: 4px; }
html body .lightbox .lightbox-nav.lightbox-next { right: 348px; }
html body .lightbox-counter { top: 10px; left: 50%; transform: translateX(-50%); position: fixed; z-index: 11; }
html body .lb-post-nav { top: 9px; height: 30px; }
html body .lb-post-prev { left: 8px; }
html body .lb-post-next { right: 352px; }
html body #lightbox .lightbox-viewport .lightbox-controls {
left: 8px; bottom: 9px; top: auto; margin: 0;
}
html body #lightbox .lightbox-viewport .lightbox-controls button { width: 30px; height: 30px; }
html body .lb-fullscreen-btn { right: 8px; bottom: 9px; top: auto; margin: 0; }
/* solo: gutters collapse, image gets the whole screen (controls hidden) */
html body .lightbox.lb-solo .lightbox-viewport { padding: 0; }
html body .lightbox.lb-solo .lightbox-viewport img,
html body .lightbox.lb-solo .lightbox-viewport video { max-height: 100vh; max-width: 100%; }
html body .lightbox.lb-solo .lb-fullscreen-btn { display: flex !important; right: 8px; bottom: 8px; }
@media (max-width: 820px) {
html body .lightbox .lightbox-nav.lightbox-next { right: 4px; }
html body .lb-post-next { right: 8px; }
}
/* ============================================================
---- 66. [v5.16.241] STANDING RULE: semicircle button ends ----
============================================================
Per direction: every button's ends are exactly SEMICIRCLES —
border-radius: 999px caps the visual radius at half the height
(a pill), so no button can ever look sharper or squarer than a
semicircle end. Applies across content areas, the post modal,
the viewer, and all dialogs. The locked header keeps its own
final styling. Real square icon buttons become circles, which
is the same rule (each side a semicircle). */
html body .dashboard-center button,
html body .dashboard-center .btn,
html body .dashboard-center input[type="submit"],
html body .dashboard-center input[type="button"],
html body #pl-postmodal button,
html body .lightbox button,
html body .lb-post-nav,
html body .lb-fullscreen-btn,
html body .lightbox .lb-tab-btn,
html body .gm-overlay .gm-btn,
html body .forward-modal button,
html body .conn-modal button,
html body .left-sidebar button,
html body .users-panel button,
html body .right-sidebar button {
/* [v5.16.299] was a hard 999px override, which BEAT the Site
Settings shape control. Now it is the DEFAULT only: buttons stay
pills until a shape/radius is chosen in Site Settings, and that
choice (which emits its own !important rules later) now wins. */
border-radius: var(--pl-r-buttons,var(--pl-btn-radius,999px));
}
/* ============================================================
---- 67. [v5.16.242] Nav arrows stable on hover ----
============================================================
style.css has a global "button:hover { transform:none
!important }" — it cancelled the arrows' translateY(-50%)
vertical centering on hover, so they dropped by half their
height under the cursor. The centering transform is pinned
through hover and press (higher specificity, later cascade). */
html body .lightbox .lightbox-nav:hover,
html body .lightbox .lightbox-nav:active,
html body .lightbox .lightbox-nav:focus {
transform: translateY(-50%) !important;
}
/* ============================================================
---- 68. [v5.16.243] CV actions fill the FULL row ----
============================================================
Per direction (highlighted row): the toolbar's controls —
Download PDF, template select, Save Default, Import Excel,
Download Template, Erase All — stretch as EQUAL flex shares
across the full row width, one line, nothing wrapping to a
second row. The form wrapper and its children join the same
flex distribution so Save Default and the select share evenly.
Pill shape and 2mm/5mm padding rules still apply. */
html body .cvs-actions {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px;
width: 100%;
}
html body .cvs-actions > .cvs-btn,
html body .cvs-actions > a.cvs-btn {
flex: 1 1 0 !important;
min-width: 0;
text-align: center;
justify-content: center;
white-space: nowrap;
}
html body .cvs-actions form {
display: flex !important;
flex: 2 1 0 !important;
gap: 8px;
min-width: 0;
}
html body .cvs-actions form select,
html body .cvs-actions form .cvs-btn {
flex: 1 1 0 !important;
min-width: 0;
}
html body .cvs-actions .cvs-actions-label { display: none; }
@media (max-width: 820px) {
html body .cvs-actions { flex-wrap: wrap !important; }
html body .cvs-actions > .cvs-btn, html body .cvs-actions form { flex: 1 1 45% !important; }
}
/* ============================================================
---- 69. [v5.16.245] CV toolbar: truly uniform row ----
============================================================
After Save Default's removal the form (now holding ONLY the
bullet select) still claimed a DOUBLE share — that was the gap.
And "Download Template" is an , which sat on the text
baseline instead of centering like the buttons. Now: five
controls, five EQUAL shares, identical 30px height, text
dead-centre in every one, font one step smaller. */
html body .cvs-actions form { flex: 1 1 0 !important; }
html body .cvs-actions > .cvs-btn,
html body .cvs-actions > a.cvs-btn,
html body .cvs-actions form select,
html body .cvs-actions form .cvs-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 30px !important;
padding: 0 12px !important;
font-size: 12px !important;
font-weight:500 !important;
line-height: 1 !important;
box-sizing: border-box !important;
vertical-align: middle;
}
html body .cvs-actions form select {
text-align: center;
text-align-last: center;
}
html body .cvs-actions form label { display: contents; }
/* [v5.16.246] toolbar addendum: with the label wrapper gone the
select is a direct form child and takes the FULL share; anchor
text centring hardened (line-height locked to the 30px box). */
html body .cvs-actions form > select {
flex: 1 1 auto !important;
width: 100% !important;
}
html body .cvs-actions > a.cvs-btn {
line-height: 30px !important;
text-align: center !important;
}
/* ============================================================
---- 70. [v5.16.247] STANDING RULE: one gray for the row ----
============================================================
Per direction (remembered): action/toolbar buttons all wear the
SAME gray — #6b7280 with white text — no mixed white/outline
pills in a row. Applied to all five CV toolbar controls,
dropdown included. */
html body .cvs-actions > .cvs-btn,
html body .cvs-actions > a.cvs-btn,
html body .cvs-actions form > select,
html body .cvs-actions form .cvs-btn {
background: #6b7280 !important;
color: #ffffff !important;
border: 1px solid #6b7280 !important;
}
html body .cvs-actions > .cvs-btn:hover,
html body .cvs-actions > a.cvs-btn:hover,
html body .cvs-actions form > select:hover {
background: #4b5563 !important;
border-color: #4b5563 !important;
}
html body .cvs-actions form > select option { background: #ffffff; color: #111827; }
/* ============================================================
---- 71. [v5.16.260] Breathing room BETWEEN posts ----
============================================================
Consecutive post cards were touching — one card's engagement
bar sat directly on the next card's header (screenshot). Each
post is now its own separated card: a 14px spacing band between
cards lets the page background show through, every card gets
its own rounded corners and a hairline border so the separation
reads clearly. Applied to the WRAPPER, so it holds for text,
media, polls and forwards alike — on the feed and engagements
pages both. */
html body .center-content .post-card,
html body .center-content .feed-post {
margin-bottom: 14px !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
html body .center-content .post-card:last-child,
html body .center-content .feed-post:last-child {
margin-bottom: 0 !important;
}
/* ============================================================
---- 72. [v5.16.262] Discover polish: reviews & salaries ----
============================================================
The reviews/salaries lists rendered as bare text (screenshot).
Every direct child of .cr-list becomes a proper card; toolbar
fields follow the white-fields rule; cr buttons follow the
uniform-gray + pill standards. Companies directory cards get
the same hairline+radius treatment. */
html body .cr-list > div,
html body .cr-list > article {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(17,24,39,0.05);
}
html body .cr-list > div:last-child { margin-bottom: 0; }
html body .cr-toolbar input[type="text"],
html body .cr-toolbar select,
html body .cr-search-row input[type="text"],
html body .cr-search-row select {
background: #fff !important;
border: 1px solid #d1d5db !important;
border-radius: 999px !important;
height: 30px;
font-size: 12px;
padding: 0 12px;
box-sizing: border-box;
}
html body .cr-btn {
background: #6b7280 !important;
color: #fff !important;
border: 1px solid #6b7280 !important;
border-radius: 999px !important;
padding: 7px 18px !important;
font-size: 12px !important;
font-weight:500 !important;
}
html body .cr-btn:hover { background: #4b5563 !important; }
html body .company-directory-card,
html body .comp-card {
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
box-shadow: 0 1px 2px rgba(17,24,39,0.05);
}
/* ============================================================
---- 73. [v5.16.263] Companies / Reviews / Salaries layouts ----
============================================================
Implements the user's two wireframes. The .cr-card/.cr-sal-card
item classes existed in JS but had NO stylesheet at all — the
bare-text look. Now:
(1) COMPANIES: 3-column card grid, logo block top-left.
(2) REVIEWS: 2-column grid; each card = logo left + content
lines right + full-width footer band.
(3) SALARIES: same 2-column grid, led by DESIGNATION + COMPANY,
amount as the highlight line, footer band below. */
/* -- (1) companies directory: 3-up grid, logo top-left -- */
html body .dir-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
html body .dir-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
background: #fff;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 14px;
box-shadow: 0 1px 2px rgba(17,24,39,0.05) !important;
}
html body .dir-card .dir-logo-wrap { margin: 0 0 10px; }
html body .dir-card .dir-logo,
html body .dir-card .dir-logo-placeholder {
width: 54px; height: 54px;
border-radius: 8px;
object-fit: cover;
}
html body .dir-card .dir-card-name { font-size: 13.5px; font-weight:500; color: #111827; }
html body .dir-card .dir-card-subtitle,
html body .dir-card .dir-card-location { font-size: 12px; color: #6b7280; }
html body .dir-card .dir-card-desc { font-size: 12px; color: #374151; text-align: justify; }
@media (max-width: 1100px) { html body .dir-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { html body .dir-grid { grid-template-columns: 1fr; } }
/* -- (2)+(3) reviews & salaries: 2-up card grid -- */
html body .cr-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
html body .cr-list > .cr-loading,
html body .cr-list > .cr-empty { grid-column: 1 / -1; }
html body .cr-card,
html body .cr-sal-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px;
margin: 0 !important;
box-shadow: 0 1px 2px rgba(17,24,39,0.05);
display: flex;
flex-direction: column;
gap: 8px;
}
/* review card: logo left, lines right */
html body .cr-card .cr-card-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
html body .cr-card-avatar,
html body .cr-card-avatar-anon {
width: 48px; height: 48px;
flex: 0 0 48px;
border-radius: 8px;
object-fit: cover;
background: #eef2f7;
display: flex; align-items: center; justify-content: center;
color: #6b7280;
}
html body .cr-card-title { font-size: 13.5px; font-weight:500; color: #111827; }
html body .cr-card-company { font-size: 12px; color: #4b5563; font-weight:500; }
html body .cr-card-meta, html body .cr-card-date, html body .cr-card-user { font-size: 12px; color: #6b7280; }
html body .cr-card-stars { color: #f59e0b; font-size: 13px; }
html body .cr-card-badge { font-size: 10.5px; border-radius: 999px; padding: 2px 10px; background: #f3f4f6; color: #374151; white-space: nowrap; display: inline-block; vertical-align: middle; } /* [v5.20.628] pills never wrap mid-text; sit on the meta line cleanly */
html body .cr-card-head > div:last-child { flex: 0 0 auto; margin-left: auto; } /* stars pinned right, never squeezed */
html body .cr-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; } /* [v5.20.628] meta chips align and wrap as whole pills */
html body .cr-badge-recommend { background: #ecfdf5; color: #047857; }
html body .cr-badge-not-recommend { background: #fef2f2; color: #b91c1c; }
html body .cr-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
/* [v5.16.405] Inside a half-width review card, two prose columns would be
~150px each. Stacked instead so the text stays readable. */
/* [v5.20.492] one review = one full-width ROW: header inline, ratings
inline (v489), pros/cons/advice side by side on one line. */
html body #reviewsList .cr-pros-cons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 6px 0; }
html body #reviewsList .cr-pros-cons.has-advice { grid-template-columns: 1fr 1fr 1.4fr; }
@media (max-width: 800px){ html body #reviewsList .cr-pros-cons, html body #reviewsList .cr-pros-cons.has-advice { grid-template-columns: 1fr; } }
html body #reviewsList .cr-card { padding: 12px 16px; }
html body #reviewsList .cr-card-head { display: flex; align-items: center; gap: 10px; }
html body #reviewsList .cr-card-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body #reviewsList .cr-card-avatar,
html body #reviewsList .cr-card-avatar-ph { width: 34px !important; height: 34px !important; font-size: 15px; flex: 0 0 auto; }
html body #reviewsList .cr-card-name { display: inline; font-size: 13px; }
html body #reviewsList .cr-card-company { display: inline; margin-left: 6px; font-size: 12px; }
html body #reviewsList .cr-card-meta { font-size: 11px; margin-top: 1px; }
html body #reviewsList .cr-card-title { margin: 6px 0 4px; }
html body #reviewsList .cr-pc-block { margin: 0; }
html body #reviewsList .cr-pc-text { font-size: 11.5px; }
html body #reviewsList .cr-card-footer { margin-top: 6px; padding-top: 6px; }
html body .cr-card-footer,
html body .cr-sal-footer {
margin-top: auto;
border-top: 1px solid #e5e7eb;
padding-top: 8px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: #6b7280;
}
/* salary card: designation + company lead, amount highlighted */
html body .cr-sal-head { display: flex; align-items: flex-start; gap: 12px; }
html body .cr-sal-title { font-size: 13.5px; font-weight:500; color: #111827; }
html body .cr-sal-company { font-size: 12px; font-weight:500; color: #4b5563; }
html body .cr-sal-dept { font-size: 12px; color: #6b7280; }
html body .cr-sal-amount { font-size: 16px; font-weight:500; color: #065f46; }
html body .cr-sal-period, html body .cr-sal-bonus { font-size: 12px; color: #6b7280; }
html body .cr-sal-chip { font-size: 12px; background: #f3f4f6; color: #374151; border-radius: 999px; padding: 2px 10px; margin-right: 4px; }
html body .cr-sal-details, html body .cr-sal-benefits, html body .cr-sal-notes { font-size: 12px; color: #374151; }
@media (max-width: 900px) { html body .cr-list { grid-template-columns: 1fr; } }
/* ============================================================
---- 74. [v5.16.405] Reviews: TWO per row + colored bars ----
============================================================
Per direction: each review card takes half the width, two side by
side. (Superseded v5.16.264, which made them full-width rows.)
Every rating parameter still renders as its own COLORED BAR
(Work-Life blue, Culture violet, Management amber, Compensation
green, Growth red, Overall purple — the colors the JS emits) with
the score beside it. Salaries keep the 3-up grid from section 75. */
/* [v5.20.491] PK: each review takes the FULL row — one card per line,
so the six single-row rating chips fit on one line inside it.
(Supersedes the half-width direction above.) */
html body #reviewsList.cr-list {
grid-template-columns: 1fr;
}
html body #reviewsList .cr-card { width: 100%; min-width: 0; }
/* The rating bars CANNOT stay two-per-line inside a half-width card.
The card is ~320px of content; two columns leaves ~155px each, and the
label (96px) plus the score (34px) plus gaps already consume ~146px —
the bar itself would be about 9px wide. One parameter per line inside
the reviews list; the 1fr 1fr default below still applies elsewhere. */
/* [v5.20.489] PK: the six category ratings sit in a SINGLE row of compact
label+bar+score chips (wrapping only when the card is too narrow). */
html body #reviewsList .cr-breakdown,
html body .cr-breakdown {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 14px;
margin: 4px 0;
}
html body .cr-bar-item {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
flex: 0 0 auto;
}
html body .cr-bar-label {
flex: 0 0 auto;
font-size: 11px;
color: #6b7280;
white-space: nowrap;
}
html body .cr-bar-track {
flex: 0 0 46px;
width: 46px;
height: 7px;
background: #eef0f3;
border-radius: 999px;
overflow: hidden;
}
html body .cr-bar-fill {
height: 100%;
border-radius: 999px;
display: block;
}
html body .cr-bar-val {
flex: 0 0 auto;
font-size: 11px;
font-weight:500;
color: #111827;
}
/* [v5.20.489] single-row layout wraps naturally on narrow cards */
/* ---- 75. [v5.16.265] Salaries: THREE per row ---- */
html body #salariesList.cr-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) { html body #salariesList.cr-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { html body #salariesList.cr-list { grid-template-columns: 1fr; } }
/* ============================================================
---- 76. [v5.16.266] Companies page: queued four fixes ----
============================================================
(1) FILTERS IN ONE ROW: search field + Clear + Industry + Size
become a single flex row, equal heights, white fields.
(2) count text removed (markup) — nothing reserved for it.
(3) FOLLOW ROW IDENTICAL on every card: the card is a flex
column; the follow wrapper is pinned with margin-top:auto
to the same bottom line regardless of description length;
description clamps to 4 lines so heights stay even.
(4) LOGOS in the site-logo style: white tile, rounded corners,
hairline border; missing logos show the company INITIAL in
the same tile (purple on white, like the site logo chip). */
html body .dir-filters {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
html body .dir-filters .dir-search-row,
html body .dir-filters .dir-filter-row {
display: contents;
}
html body .dir-filters .dir-search-input {
flex: 1.6 1 0;
min-width: 0;
height: 30px;
border: 1px solid #d1d5db !important;
border-radius: 999px !important;
background: #fff !important;
font-size: 12px;
padding: 0 12px;
box-sizing: border-box;
}
html body .dir-filters .dir-filter-select {
flex: 1 1 0;
min-width: 0;
height: 30px;
border: 1px solid #d1d5db !important;
border-radius: 999px !important;
background: #fff !important;
font-size: 12px;
padding: 0 10px;
box-sizing: border-box;
}
html body .dir-filters .dir-clear-btn {
flex: 0 0 auto;
height: 30px;
background: #6b7280 !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 0 18px !important;
font-size: 12px;
font-weight:500;
cursor: pointer;
}
@media (max-width: 820px) { html body .dir-filters { flex-wrap: wrap; } }
html body .dir-card { height: 100%; }
html body .dir-card .dir-card-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
html body .dir-card .pl-follow-wrapper {
margin-top: auto !important;
padding-top: 10px;
border-top: 1px solid #f3f4f6;
width: 100%;
}
html body .dir-card .dir-logo,
html body .dir-card .dir-logo-placeholder {
width: 54px !important;
height: 54px !important;
border-radius: 10px !important;
background: #ffffff;
border: 1px solid #e5e7eb;
object-fit: contain !important;
padding: 4px;
box-sizing: border-box;
}
html body .dir-card .dir-logo-initial {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight:500;
color: #5f5d58;
padding: 0;
}
/* ============================================================
---- 77. [v5.16.267] Toolbars single-row; clipping fixed;
salary card rows tidied; grids enforced ----
============================================================
(a) SELECT CLIPPING (companies + reviews + salaries): labels
were hidden under the dropdown arrow — room reserved with
padding-right, font stepped to 11.5px.
(b) EVERY TOOLBAR IS ONE ROW: reviews (search, ratings, sort,
Search, Write a Review) and salaries (company, job title,
sort, Search, Share Your Salary) — inner rows flattened
with display:contents so ALL controls share one flex row.
(c) SALARY CARD: details chips hold on one wrapping line
without mid-word breaks; the footer (Helpful + author +
date) is ONE row; fonts adapted down to fit 3-up cards.
(d) Grids enforced: reviews 1-per-row, salaries 3-per-row. */
html body .dir-filters .dir-filter-select,
html body .cr-toolbar select,
html body .cr-select {
padding: 0 28px 0 10px !important;
font-size: 12px !important;
line-height: 28px !important;
text-overflow: ellipsis;
}
html body .cr-toolbar {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
html body .cr-toolbar .cr-search-row,
html body .cr-toolbar .cr-toolbar-right {
display: contents;
}
html body .cr-toolbar .cr-input {
flex: 1.3 1 0;
min-width: 0;
height: 30px !important;
font-size: 12px !important;
padding: 0 12px !important;
}
html body .cr-toolbar select { flex: 1 1 0; min-width: 0; height: 30px !important; }
html body .cr-toolbar .cr-btn {
flex: 0 0 auto;
white-space: nowrap;
height: 30px;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px !important;
padding: 0 16px !important;
}
@media (max-width: 900px) { html body .cr-toolbar { flex-wrap: wrap; } }
html body .cr-list { display: grid !important; }
/* [v5.16.405] TWO per row. This is the rule that actually governs the
reviews grid: it carries !important and sits later in the file than
section 74, so it overrides it. Both are now consistent. */
html body #reviewsList.cr-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
@media (max-width: 900px) { html body #reviewsList.cr-list { grid-template-columns: 1fr !important; } }
html body #salariesList.cr-list { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
@media (max-width: 1100px) { html body #salariesList.cr-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 700px) { html body #salariesList.cr-list { grid-template-columns: 1fr !important; } }
html body .cr-sal-card { font-size: 12px; }
html body .cr-sal-title { font-size: 12.5px; }
html body .cr-sal-amount { font-size: 15px; }
html body .cr-sal-details {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: center;
font-size: 12px;
}
html body .cr-sal-details > * { white-space: nowrap; }
html body .cr-sal-chip { font-size: 12px; padding: 2px 8px; }
html body .cr-sal-footer {
flex-wrap: nowrap !important;
justify-content: space-between;
font-size: 12px;
gap: 6px;
overflow: hidden;
}
html body .cr-sal-footer .cr-btn,
html body .cr-btn-helpful {
flex: 0 0 auto;
font-size: 12px !important;
padding: 4px 12px !important;
white-space: nowrap;
}
html body .cr-sal-user {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ============================================================
---- 78. [v5.16.268] Salaries: container un-shrunk, 3-up real ----
============================================================
The 3-column grid WAS applying — to a container that had shrunk
to card width (~200px), which is also the "outer rect window"
the user circled. The wrapper chain is now forced to the full
column width with its own box stripped (no border, no bg, no
padding) so ONLY the cards draw boxes, and the grid finally has
room to lay three per row. */
html body .cr-page,
html body .cr-section {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
float: none !important;
}
html body .cr-list {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
html body .cr-sal-card,
html body .cr-card { min-width: 0; width: auto !important; }
html body .cr-toolbar { width: 100% !important; }
/* ============================================================
---- 79. [v5.16.269] The wrapper divs DISSOLVED: real 3-up ----
============================================================
Console-diagnosed with the user: the grid container was fine
(555px, display:grid) but the JS injects all cards inside ONE
wrapper div (.cr-salary-grid / .cr-reviews-wrap), so the grid
saw a single child occupying one 185px column — the cards
stacked inside it, and that wrapper's card-styled box was the
circled "outer rect window". display:contents dissolves the
wrappers so every card becomes a DIRECT grid item: salaries lay
3-up exactly like the approved wireframe, reviews stay one per
row, and the outer box ceases to exist. */
html body .cr-list > .cr-salary-grid,
html body .cr-list > .cr-reviews-wrap,
html body .cr-list > .cr-reviews-list,
html body .cr-list > .cr-review-grid {
display: contents !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ============================================================
---- 80. [v5.16.272] Trigger: 75% of container, WHITE box ----
============================================================
Per direction: the Post / Search field is exactly 75% of the
CENTRE CONTAINER's width (tracks the same var chain the layout
uses, so it scales with every screen tier), centered in the
header middle, and its background is guaranteed WHITE — this
override lives here (loads after header.php's inline styles)
so nothing can gray it out again. */
html body .site-header .hdr-composer {
/* [v5.17.72] was flex:1 1 auto + max-width:none — with this selector's
higher specificity it beat every cap set in header.php, which is why
the pill kept expanding no matter what the inline CSS said. Now the
same viewport-proportional clamp as header.php's fallback. */
flex: 0 1 clamp(220px, 28vw, 520px);
display: flex;
justify-content: center;
max-width: clamp(220px, 28vw, 520px);
}
html body .site-header .hdr-composer button {
/* [v5.17.72] THE ACTUAL GIANT BAR. This was width: calc(container *
0.75) — the button itself was sized to 75% of the WHOLE PAGE
container (~1250px on a 1669px screen), overflowing whatever size
the wrapper was clamped or pinned to. The button now simply fills
its wrapper, and the wrapper (above / header.php / the JS clamp)
decides the size. */
flex: 1 1 auto;
width: 100%;
max-width: 100%;
background: #ffffff !important;
color: #6b7280 !important;
border: 1px solid #d1d5db !important;
border-radius: 999px !important;
font-weight: 500 !important;
text-align: center;
height: 26px;
padding: 0 14px !important;
}
html body .site-header .hdr-composer button:hover {
border-color: #9ca3af !important;
color: #4b5563 !important;
background: #ffffff !important;
}
/* ============================================================
---- 81. [v5.16.273] Feed gaps show the BANNER color ----
============================================================
The post cards sit inside .feed-container.profile-form — a
WHITE card — so the v5.16.260 gaps existed but showed white
and the posts read as one continuous sheet. The wrapper's box
is stripped (transparent, no border/shadow/padding) so the
page/banner color shows between posts, and the gap is set to
the requested 1-2mm (6px). Cards keep their own borders. */
html body .center-content .feed-container.profile-form,
html body .center-content .feed-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
html body .center-content .post-card,
html body .center-content .feed-post {
margin-bottom: 6px !important;
}
/* ---- 82. [v5.16.274] Post cards: minute visible boundary line ---- */
html body .center-content .post-card,
html body .center-content .feed-post {
border: 1px solid #d1d5db !important; /* one shade darker so the
fine line is actually visible against white, per direction */
}
/* ---- 83. [v5.16.275] Boundary VISIBLE: darker minute line ----
Console session proved the 1px #d1d5db border was computed and
painted — just too faint to perceive on white. Darkened to
#9ca3af: still a minute 1px line, now clearly visible. The 6px
banner gap is restated here (something later pushed it to 8px). */
html body .center-content .post-card,
html body .center-content .feed-post {
border: 1px solid #9ca3af !important;
margin-bottom: 6px !important;
}
/* ---- 84. [v5.16.276] Media fills the card edge-to-edge ----
The minute boundary revealed the card's 8px side padding: posted
images stopped short of the left/right edges (screenshot). The
media block now bleeds across the padding to sit flush against
the border on both sides. */
html body .center-content .post-card .post-media-grid,
html body .center-content .post-card .post-media,
html body .center-content .feed-post .post-media-grid,
html body .center-content .feed-post .post-media {
margin-left: -8px !important;
margin-right: -8px !important;
width: calc(100% + 16px) !important;
max-width: none !important;
}
html body .center-content .post-card .post-media-grid img,
html body .center-content .post-card .post-media img {
width: 100% !important;
}
/* ---- 85. [v5.16.277] Media blank space = BLACK (cinema frame) ----
Per direction (mockup approved): the full-bleed media band gets a
black backing. Wide media covers it entirely; tall/narrow media
centers with BLACK filling the leftover space out to the minute
boundary — never white gaps. */
html body .center-content .post-card .post-media,
html body .center-content .post-card .post-media-grid,
html body .center-content .post-card .post-media-item,
html body .center-content .feed-post .post-media,
html body .center-content .feed-post .post-media-grid,
html body .center-content .feed-post .post-media-item {
/* [v5.16.335] Was #000 ("cinema frame", v5.16.277). Per current
direction the black backing is dropped — tall/narrow media now
letterboxes onto the card surface, not a black slab. This is the
(0,3,2) rule that out-ranked the earlier override; fixed at source. */
background: var(--post-media-bg, #fff) !important;
}
html body .center-content .post-card .post-media-item img,
html body .center-content .post-card .post-media-item video {
width: auto !important;
max-width: 100% !important;
margin: 0 auto;
display: block;
}
/* ---- 86. [v5.16.278] Boundary line REMOVED (job done) ----
The minute line (v274/275) served its purpose: it exposed the
media width gap, which is now fixed with full-bleed + black
backing. Per direction the line is retired — cards separate by
the 6px banner gap and their soft shadow alone. */
html body .center-content .post-card,
html body .center-content .feed-post {
border: none !important;
}
/* ============================================================
---- 87. [v5.16.282] Connections tabs: clean, low, justified ----
============================================================
Per direction: number badges REMOVED (blink signals new
activity instead — see the page script), tab height reduced,
and the six tabs JUSTIFIED edge-to-edge across the container
as equal shares. Pill + gray standards apply. */
html body .conn-tabs {
display: flex !important;
width: 100%;
gap: 6px;
flex-wrap: nowrap;
margin-bottom: 10px;
}
html body .conn-tabs .conn-tab {
flex: 1 1 0;
min-width: 0;
height: 26px;
padding: 0 10px !important;
font-size: 12px;
font-weight:500;
border-radius: 999px !important;
background: #f3f4f6;
color: #4b5563;
border: 1px solid #e5e7eb;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
justify-content: center;
}
html body .conn-tabs .conn-tab.active {
background: #6b7280;
color: #fff;
border-color: #6b7280;
}
html body .conn-tabs .conn-tab-badge { display: none !important; }
html body .conn-tabs .conn-tab.pl-blink {
animation: plConnBlink 1.1s ease-in-out infinite;
}
@keyframes plConnBlink {
0%, 100% { background: #f3f4f6; color: #4b5563; box-shadow: none; }
50% { background: #ede9fe; color: #3f3d39; box-shadow: 0 0 0 2px rgba(95,93,88,0.25); }
}
html body .conn-tabs .conn-tab.active.pl-blink { animation: none; }
@media (max-width: 700px) { html body .conn-tabs { flex-wrap: wrap; } html body .conn-tabs .conn-tab { flex: 1 1 30%; } }
/* ---- 88. [v5.16.283] Connection rows are WHITE ----
The rows were picking up a tinted background (banner color).
They now render as clean white cards with a hairline border,
matching the feed's card treatment. */
html body .conn-card,
html body .conn-list .conn-card,
html body .conn-card:hover {
background: #ffffff !important;
background-image: none !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
}
/* ---- 89. [v5.16.284] Functional Testing card spans the full width ----
The card sat inset from the right (its .profile-form styling adds
its own max-width/margins) while the Bug Testing sections below
run edge to edge. It now matches them exactly: full container
width, same left and right alignment, transparent-free box. */
html body .pl-page-head + .profile-form,
html body #pl-td-accounts,
html body .profile-form:has(#pl-seed-btn) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
html body .profile-form:has(#pl-seed-btn) {
padding: 12px 14px !important;
border-radius: 10px !important;
}
/* ---- 90. [v5.16.286] Post header: Follow + wider dots menu ---- */
html body .post-header .pl-post-follow { margin-left: auto; display: inline-flex; align-items: center; }
html body .pl-postfollow-btn {
height: 22px;
padding: 0 14px;
border-radius: var(--pl-r-buttons,var(--pl-btn-radius,999px));
border: 1px solid #5f5d58;
background: #fff;
color: #5f5d58;
font-size: 12px;
font-weight:500;
cursor: pointer;
white-space: nowrap;
}
html body .pl-postfollow-btn:hover { background: #f5f0ff; }
html body .pl-postfollow-btn.following { background: #6b7280; border-color: #6b7280; color: #fff; }
html body .post-header .post-actions-menu { margin-left: 6px; }
html body .post-dropdown.pl-dd-wide { min-width: 176px; }
html body .post-dropdown.pl-dd-wide .dropdown-item {
display: flex !important;
align-items: center;
gap: 8px;
width: 100%;
justify-content: flex-start !important;
padding: 7px 12px !important;
font-size: 12px;
color: #111827 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer;
text-align: left;
}
html body .post-dropdown.pl-dd-wide .dropdown-item:hover { background: #f5f0ff !important; }
html body .post-dropdown.pl-dd-wide .dropdown-item.delete { color: #dc2626 !important; }
html body .post-dropdown.pl-dd-wide .dropdown-item.delete:hover { background: #fef2f2 !important; }
/* ---- 91. [v5.16.287] Dots menu = vertical stack of pill buttons ----
Per the approved mockup: opening the three dots drops a white
panel holding each action as its OWN pill button (same family as
the Follow button), stacked vertically with gaps — not plain text
rows. Block stays red. */
html body .post-dropdown.pl-dd-wide {
min-width: 196px;
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 10px 28px rgba(17,24,39,0.16) !important;
padding: 8px !important;
display: none;
flex-direction: column;
gap: 6px;
}
html body .post-dropdown.pl-dd-wide.show,
html body .post-dropdown.pl-dd-wide.active,
html body .post-dropdown.pl-dd-wide[style*="block"] {
display: flex !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item {
display: flex !important;
align-items: center;
gap: 8px;
width: 100%;
height: 26px;
padding: 0 14px !important;
border-radius: 999px !important;
background: #f3f4f6 !important;
border: 1px solid #e5e7eb !important;
color: #374151 !important;
-webkit-text-fill-color: #374151 !important;
font-size: 12px !important;
font-weight:500 !important;
justify-content: flex-start !important;
white-space: nowrap;
cursor: pointer;
}
html body .post-dropdown.pl-dd-wide .dropdown-item:hover {
background: #ede9fe !important;
border-color: #c4b5fd !important;
color: #3f3d39 !important;
-webkit-text-fill-color: #3f3d39 !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item.delete {
background: #fef2f2 !important;
border-color: #fca5a5 !important;
color: #b91c1c !important;
-webkit-text-fill-color: #b91c1c !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item.delete:hover { background: #fee2e2 !important; }
html body .post-dropdown.pl-dd-wide .dropdown-item svg { flex: 0 0 13px; }
/* ---- 92. [v5.16.288] Menu buttons: one uniform colour ----
Report post removed (it already exists on the engagement bar) and
every remaining item wears the SAME gray pill — no red, no mixed
colours (standing uniform-button rule). */
html body .post-dropdown.pl-dd-wide .dropdown-item,
html body .post-dropdown.pl-dd-wide .dropdown-item.delete {
background: #6b7280 !important;
border-color: #6b7280 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item:hover,
html body .post-dropdown.pl-dd-wide .dropdown-item.delete:hover {
background: #4b5563 !important;
border-color: #4b5563 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item svg { stroke: #ffffff !important; }
/* ============================================================
---- 93. [v5.16.289] Two menu styles, correctly scoped ----
============================================================
Section 28's rule (from when the menu held only Edit/Delete)
forced EVERY dropdown into a horizontal icon strip beside the
dots — which is why the new labelled menu came out as a row of
circles. That behaviour now applies ONLY to the own-post menu;
the other-post menu (.pl-dd-wide) is pinned as a vertical panel
BELOW the dots with full-width labelled pill buttons. */
html body .post-dropdown.pl-dd-wide {
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
white-space: normal !important;
margin-top: 6px !important;
position: absolute !important;
}
html body .post-dropdown.pl-dd-wide.active,
html body .post-dropdown.pl-dd-wide.show {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
}
html body .post-dropdown.pl-dd-wide a,
html body .post-dropdown.pl-dd-wide button {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
padding: 0 14px !important;
margin: 0 !important;
height: 26px !important;
white-space: nowrap !important;
}
/* ============================================================
---- 94. [v5.16.290] Menu panel: labels visible, free to overlap ----
============================================================
The panel had collapsed to icon width (labels clipped) because
nothing gave it a width and the card was clipping it. Per
direction it may overlap this post and the next: the panel takes
its natural label width, floats above everything, and every
ancestor stops clipping it. */
html body .post-dropdown.pl-dd-wide {
min-width: 208px !important;
width: max-content !important;
max-width: 260px !important;
z-index: 99999 !important;
overflow: visible !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item {
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 12px !important;
gap: 8px !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item svg { flex: 0 0 13px !important; }
html body .post-card:has(.pl-dd-wide.active),
html body .post-card:has(.pl-dd-wide.show),
html body .post-card .post-header,
html body .post-card .post-actions-menu,
html body .feed-post .post-header,
html body .feed-post .post-actions-menu {
overflow: visible !important;
}
html body .center-content .post-card:has(.pl-dd-wide.active),
html body .center-content .post-card:has(.pl-dd-wide.show) {
z-index: 9999 !important;
position: relative !important;
}
/* ============================================================
---- 95. [v5.16.291] Panel sizing fixed at the source ----
============================================================
Console session: the panel measured 44px with min-width 0 —
because the items carried width:100%, which contributes NOTHING
to a shrink-to-fit parent, so the panel sized to padding alone
and the labels were squeezed out (the "circles" look). Items now
stretch instead of claiming a percentage width, and the panel
carries an explicit width so it can never collapse again. */
html body .post-dropdown.pl-dd-wide,
html body .post-dropdown.pl-dd-wide.active,
html body .post-dropdown.pl-dd-wide.show {
width: 216px !important;
min-width: 216px !important;
max-width: 260px !important;
box-sizing: border-box !important;
}
html body .post-dropdown.pl-dd-wide .dropdown-item,
html body .post-dropdown.pl-dd-wide a,
html body .post-dropdown.pl-dd-wide button {
width: auto !important;
align-self: stretch !important;
flex: 0 0 auto !important;
min-width: 0 !important;
justify-content: flex-start !important;
font-size: 12px !important;
line-height: 26px !important;
}
/* ============================================================
---- 96. [v5.16.298] CV toolbar: five identical buttons ----
============================================================
Download Template (an ) and the bullet