/* Restored from v1.1.5.180 in v1.1.5.282: canonical post/feed style baseline. */
.post-widget {
position: relative;
padding: var(--n-s-5) 0 var(--n-s-4);
border-bottom: 1px solid var(--n-line-soft);
transition: background var(--n-dur-base) var(--n-ease);
}
.post-widget:last-child { border-bottom: none; }
.post-widget:hover {  }
.post-widget__repost-banner {
display: flex;
align-items: center;
gap: var(--n-s-2);
margin-bottom: var(--n-s-2);
color: var(--n-text-mute);
font-weight: var(--n-w-med);
}
.post-widget__repost-original-author {
color: var(--n-accent);
font-weight: var(--n-w-sem);
text-decoration: none;
}
.post-widget__repost-original-author:hover { color: var(--n-accent-hover); }
.post-header {
display: flex;
align-items: center;
gap: var(--n-s-3);
margin-bottom: var(--n-s-4);
}
.post-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg, var(--n-accent), color-mix(in srgb, var(--n-accent) 60%, var(--n-warn)));
text-decoration: none;
position: relative;
transition: transform var(--n-dur-fast) var(--n-ease), box-shadow var(--n-dur-base) var(--n-ease);
}
.post-avatar::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--n-line);
pointer-events: none;
}
a.post-avatar:hover { transform: scale(1.04); }
html[data-theme="dark"] a.post-avatar:hover {
box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--n-accent) 55%, transparent);
}
.post-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
.post-avatar.is-fallback img { display: none; }
.post-avatar.is-fallback::before {
content: attr(data-fallback-letter);
color: var(--n-text-on-accent);
font-weight: var(--n-w-bold);
font-size: var(--n-fs);
line-height: 1;
}
.post-user-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.post-author {
font-weight: var(--n-w-bold);
font-size: 15px;
letter-spacing: -0.01em;
color: var(--n-text);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-author a {
color: inherit;
text-decoration: none;
transition: color var(--n-dur-fast) var(--n-ease);
}
.post-author a:hover { color: var(--n-accent); }
.post-date {
color: var(--n-text-mute);
font-family: var(--n-font-mono);
font-weight: var(--n-w-reg);
font-size: 12px;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: var(--n-s-2);
}
.post-views-chip {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--n-text-mute);
}
.post-actions-dropdown-wrapper {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.kp-post-menu-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: transparent;
color: var(--n-text-mute);
cursor: pointer;
text-decoration: none;
transition: background var(--n-dur-base) var(--n-ease),
color var(--n-dur-base) var(--n-ease);
}
.kp-post-menu-btn:hover {
background: var(--n-bg-hover);
color: var(--n-text);
}
.post-actions-dropdown {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 200px;
background: var(--n-bg-2);
border: 1px solid var(--n-line);
border-radius: var(--n-r-md);
box-shadow: var(--n-sh-lg);
padding: 6px;
display: none;
z-index: var(--n-z-popover);
}
.post-actions-dropdown.is-open { display: block; animation: kp-dropIn var(--n-dur-base) var(--n-ease); }
.post-actions-dropdown a,
.post-actions-dropdown button {
display: flex;
align-items: center;
gap: var(--n-s-2);
width: 100%;
padding: 8px 12px;
border-radius: var(--n-r-sm);
border: none;
background: transparent;
color: var(--n-text);
text-align: left;
cursor: pointer;
text-decoration: none;
font-weight: var(--n-w-med);
transition: background var(--n-dur-fast) var(--n-ease);
}
.post-actions-dropdown a:hover,
.post-actions-dropdown button:hover {
background: var(--n-bg-hover);
}
.post-content,
.post-text {
color: var(--n-text);
line-height: 1.65;
word-wrap: break-word;
overflow-wrap: break-word;
}
.post-text {
margin-bottom: var(--n-s-3);
}
.post-text strong {
color: var(--n-text);
font-weight: var(--n-w-sem);
}
.post-text a {
color: var(--n-accent);
text-decoration: none;
transition: color var(--n-dur-fast) var(--n-ease);
}
.post-text a:hover {
color: var(--n-accent-hover);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.kp-post-gallery {
margin-bottom: var(--n-s-3);
border-radius: var(--n-r-md);
overflow: hidden;
}
.kp-post-gallery--single .kp-post-gallery__hero {
height: 280px;
max-height: 280px;
aspect-ratio: unset;
}
.kp-post-gallery--pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.kp-post-gallery__side-item {
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
background: var(--n-bg-hover);
}
.kp-post-gallery__hero {
position: relative;
width: 100%;
height: 260px;
overflow: hidden;
background: var(--n-bg-hover);
display: block;
}
.kp-post-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
margin-top: 3px;
}
.kp-post-gallery__thumb {
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
background: var(--n-bg-hover);
}
.kp-post-gallery__thumbs:has(.kp-post-gallery__thumb:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
.kp-post-gallery__img-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
position: relative;
}
.kp-post-gallery__hero .kp-post-gallery__img-link,
.kp-post-gallery__side-item .kp-post-gallery__img-link,
.kp-post-gallery__thumb .kp-post-gallery__img-link {
display: flex;
align-items: center;
justify-content: center;
}
.kp-post-gallery img {
width: 100%;
height: 100%;
min-height: 80px;
object-fit: cover;
display: block;
transition: transform .25s ease;
}
.kp-post-gallery__hero img,
.kp-post-gallery__side-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kp-post-gallery__hero .kp-post-gallery__img-link:hover img,
.kp-post-gallery__side-item .kp-post-gallery__img-link:hover img,
.kp-post-gallery__thumb .kp-post-gallery__img-link:hover img {
transform: scale(1.03);
}
.kp-post-gallery__count {
position: absolute;
bottom: 8px; right: 8px;
background: var(--n-scrim);
color: var(--n-text-on-accent);
padding: 3px 9px;
border-radius: 20px;
font-size: .78rem;
pointer-events: none;
backdrop-filter: blur(4px);
}
.kp-post-gallery__thumb--more::after {
content: '';
position: absolute;
inset: 0;
background: var(--n-scrim);
pointer-events: none;
}
.kp-post-gallery__more-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--n-text-on-accent);
font-weight: 700;
font-size: 1.3rem;
z-index: 1;
pointer-events: none;
}
.kp-post-gallery__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 54px; height: 54px;
border-radius: 50%;
background: var(--n-scrim-soft);
color: var(--n-text-on-accent);
display: flex; align-items: center; justify-content: center;
pointer-events: none;
backdrop-filter: blur(4px);
}
.kp-post-gallery__play--sm {
width: 28px; height: 28px;
}
.kp-post-gallery__play svg,
.kp-post-gallery__play i { width: 22px; height: 22px; font-size: .85rem; }
.kp-post-gallery__dur {
position: absolute;
bottom: 6px; right: 6px;
background: var(--n-scrim);
color: var(--n-text-on-accent);
padding: 2px 6px;
border-radius: 4px;
font-size: .75rem;
pointer-events: none;
}
.kp-post-gallery__video-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; color: var(--n-text-dim);
}
.kp-post-gallery__audio-block {
width: 100%;
padding: 14px;
}
.kp-post-gallery__audio-title {
font-size: .85rem; margin-bottom: 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-post-gallery__audio {
width: 100%;
}
.kp-post-gallery__ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; color: var(--n-text-dim);
}
@media (max-width: 480px) {
.kp-post-gallery--single .kp-post-gallery__hero { height: 240px; max-height: 240px; }
.kp-post-gallery__hero { height: 220px; }
}
.post-media-grid {
grid-template-columns: repeat(2, 1fr);
}
.post-media-grid--1 {
grid-template-columns: 1fr;
}
.post-media-grid--1 .post-media-grid__item {
aspect-ratio: 16 / 10;
max-height: 480px;
}
.post-media-grid--3 {
grid-template-columns: repeat(6, 1fr);
}
.post-media-grid--3 > .post-media-grid__item {
grid-column: span 3;
}
.post-media-grid--3 > .post-media-grid__item:nth-child(1) {
grid-column: span 3;
grid-row: span 2;
aspect-ratio: auto;
}
.post-media-grid--3 > .post-media-grid__item:nth-child(2),
.post-media-grid--3 > .post-media-grid__item:nth-child(3) {
grid-column: span 3;
}
.post-media-grid--5 {
grid-template-columns: repeat(6, 1fr);
}
.post-media-grid--5 > .post-media-grid__item {
grid-column: span 2;
}
.post-media-grid--5 > .post-media-grid__item:nth-child(1),
.post-media-grid--5 > .post-media-grid__item:nth-child(2) {
grid-column: span 3;
}
.post-media-grid--7,
.post-media-grid--9 {
grid-template-columns: repeat(3, 1fr);
}
.post-media-grid__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
border-radius: 50%;
background: var(--n-scrim-soft);
color: var(--n-text-on-accent);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.post-media-grid__play svg {
width: 24px;
height: 24px;
}
.post-media-grid__duration {
position: absolute;
bottom: 8px;
right: 8px;
background: var(--n-scrim);
color: var(--n-text-on-accent);
padding: 2px 7px;
border-radius: var(--n-r-sm);
font-weight: var(--n-w-med);
font-size: var(--n-fs);
pointer-events: none;
}
.post-media-grid__item--video { position: relative; }
.post-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: var(--n-fs);
color: var(--n-accent);
background: color-mix(in srgb, var(--n-accent) 9%, var(--n-bg-soft));
}
.post-media-placeholder--video,
.post-media-placeholder--audio {
flex-direction: column;
gap: 6px;
}
.post-media-broken {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
font-size: 32px;
opacity: 0.45;
background: var(--n-bg-hover, transparent);
pointer-events: none;
}
.kp-mlb-trigger.is-broken .post-media-broken,
.post-media-grid__item.is-broken .post-media-broken {
display: flex;
}
.kp-mlb-trigger.is-broken,
.post-media-grid__item.is-broken {
position: relative;
min-height: 120px;
}
.post-media-more {
position: relative;
}
.post-media-more::after {
content: '';
position: absolute;
inset: 0;
background: var(--n-scrim);
pointer-events: none;
border-radius: 0;
}
.post-media-more__label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--n-text-on-accent);
font-weight: var(--n-w-bold);
font-size: 1.4rem;
z-index: 1;
pointer-events: none;
}
.post-actions {
display: flex;
align-items: center;
gap: var(--n-s-5);
margin-top: var(--n-s-3);
color: var(--n-text-mute);
font-weight: var(--n-w-med);
}
.post-actions--compact {
gap: var(--n-s-3);
}
.post-actions__spacer { flex: 1; }
.post-actions-sep {
width: 1px;
height: 14px;
background: var(--n-line);
}
.kp-post-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
margin: 0 -4px;
background: transparent;
border: none;
color: inherit;
font-family: var(--n-font-mono);
font-size: var(--n-fs);
font-weight: var(--n-w-sem);
cursor: pointer;
border-radius: var(--n-r-sm);
text-decoration: none;
transition: color var(--n-dur-base) var(--n-ease),
background var(--n-dur-base) var(--n-ease),
transform var(--n-dur-fast) var(--n-ease);
}
.kp-post-action-btn:hover {
color: var(--n-accent);
background: var(--n-accent-soft);
}
.kp-post-action-btn:active {
transform: scale(0.94);
}
.kp-post-action-btn.is-active {
color: var(--n-accent);
background: var(--n-accent-soft);
}
.post-action-icon {
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
}
.post-action-icon svg {
width: 100%;
height: 100%;
}
.post-action-count {
font-family: var(--n-font-mono);
font-weight: var(--n-w-sem);
font-variant-numeric: tabular-nums;
}
.post-widget__embedded-original {
display: block;
margin: var(--n-s-3) 0;
padding: var(--n-s-3);
border: 1px solid var(--n-line);
border-radius: var(--n-r-md);
background: var(--n-bg-soft);
text-decoration: none;
color: inherit;
transition: background var(--n-dur-base) var(--n-ease);
}
.post-widget__embedded-original:hover {
background: var(--n-bg-hover);
}
.post-widget__embedded-head {
display: flex;
align-items: center;
gap: var(--n-s-2);
margin-bottom: var(--n-s-2);
color: var(--n-text-mute);
font-weight: var(--n-w-med);
}
.post-widget__embedded-body {
color: var(--n-text-soft);
}
.post-referral-fallback,
.post-contest-fallback {
display: flex;
align-items: center;
gap: var(--n-s-3);
padding: var(--n-s-3);
border-radius: var(--n-r-md);
background: var(--n-accent-soft);
margin-bottom: var(--n-s-3);
}
.post-contest-fallback__badge {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--n-warn-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.post-contest-fallback__title {
font-weight: var(--n-w-sem);
color: var(--n-text);
}
@media (max-width: 480px) {
.post-widget { padding: var(--n-s-4) 0 var(--n-s-3); }
.post-actions { gap: var(--n-s-3); }
.post-avatar { width: 40px; height: 40px; }
.post-media-grid--1 .post-media-grid__item { max-height: 320px; }
.post-media-grid--3 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid--3 > .post-media-grid__item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
.post-media-grid--3 > .post-media-grid__item:nth-child(2),
.post-media-grid--3 > .post-media-grid__item:nth-child(3) { grid-column: span 1; }
.post-media-grid--5 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid--5 > .post-media-grid__item { grid-column: span 1; }
.post-media-grid--5 > .post-media-grid__item:nth-child(1) { grid-column: span 2; }
.post-media-grid--7,
.post-media-grid--9 { grid-template-columns: repeat(2, 1fr); }
}
.post-content--collapsible .post-text {
max-height: 10.5em;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(180deg, var(--n-mask-solid) 70%, transparent 100%);
mask-image: linear-gradient(180deg, var(--n-mask-solid) 70%, transparent 100%);
transition: max-height 0.3s ease;
}
.post-content--collapsible.is-expanded .post-text {
max-height: none;
-webkit-mask-image: none;
mask-image: none;
}
.post-content__readmore {
margin-top: 6px;
border: none;
background: transparent;
color: var(--n-accent);
font-size: 0.85rem;
font-weight: var(--n-w-sem, 600);
cursor: pointer;
padding: 4px 0;
display: inline-flex;
align-items: center;
gap: 4px;
}
.post-content__readmore::after {
content: "▾";
font-size: 0.7em;
transition: transform 0.2s ease;
}
.post-content--collapsible.is-expanded .post-content__readmore::after {
transform: rotate(180deg);
}
.post-content__readmore:hover {
text-decoration: underline;
}
.post-link-cards {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0;
}
.post-link-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--n-r-md, 12px);
background: var(--n-bg-soft);
text-decoration: none;
color: var(--n-text);
transition: background var(--n-dur-fast, .15s) ease,
border-color var(--n-dur-fast, .15s) ease;
}
.post-link-card:hover {
background: var(--n-bg-hover);
border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}
.post-link-card__favicon {
width: 32px;
height: 32px;
border-radius: 6px;
flex: 0 0 32px;
background: var(--n-bg-2);
}
.post-link-card__meta {
flex: 1;
min-width: 0;
}
.post-link-card__host {
font-size: 0.85rem;
font-weight: var(--n-w-sem, 600);
color: var(--n-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-link-card__url {
font-size: 0.72rem;
color: var(--n-text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-link-card__arrow {
font-size: 1.1rem;
color: var(--n-text-mute);
flex: 0 0 auto;
}
.post-media-grid__item--audio {
aspect-ratio: auto;
min-height: auto;
grid-column: 1 / -1;
}
.post-media-audio {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: var(--n-bg-soft);
border-radius: var(--n-r-md, 12px);
width: 100%;
}
.post-media-audio__title {
font-size: 0.82rem;
font-weight: var(--n-w-sem, 600);
color: var(--n-text);
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-media-audio__title i {
color: var(--n-accent);
}
.post-media-audio__player,
.post-media-audio > audio {
width: 100%;
height: 36px;
outline: none;
}
.post-media-audio > audio::-webkit-media-controls-panel {
background: var(--n-bg-2);
}
.post-media-grid__item--audio + .post-media-grid__item--audio .post-media-audio {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -1px;
}
.post-embed {
position: relative;
width: 100%;
background: var(--n-bg-soft);
border-radius: var(--n-r-md, 12px);
overflow: hidden;
margin: 8px 0;
}
.post-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.post-media-grid__item--file {
grid-column: 1 / -1;
}
.post-media-file {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--n-bg-soft);
border-radius: var(--n-r-md, 12px);
cursor: pointer;
transition: background var(--n-dur-fast, .15s) ease,
border-color var(--n-dur-fast, .15s) ease;
}
.post-media-file:hover {
background: var(--n-bg-hover);
border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}
.post-media-file__ext {
flex: 0 0 auto;
min-width: 44px;
padding: 6px 8px;
background: var(--n-accent);
color: var(--n-text-on-accent);
font-size: 0.72rem;
font-weight: var(--n-w-bold, 700);
border-radius: 6px;
text-align: center;
letter-spacing: 0.5px;
}
.post-media-file__meta {
flex: 1;
min-width: 0;
}
.post-media-file__name {
font-size: 0.88rem;
font-weight: var(--n-w-sem, 600);
color: var(--n-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-media-file__size {
font-size: 0.72rem;
color: var(--n-text-mute);
margin-top: 2px;
}
.post-media-file__download {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--n-bg-2);
color: var(--n-text);
font-size: 1rem;
transition: background var(--n-dur-fast, .15s) ease, color var(--n-dur-fast, .15s) ease;
}
.post-media-file:hover .post-media-file__download {
background: var(--n-accent);
color: var(--n-text-on-accent);
}
.post-media-grid__item--audio:has(audio:not([paused])) .post-media-audio {
border-color: var(--n-accent);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--n-accent) 25%, transparent);
}
.post-link-previews {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 480px) {
.post-link-previews:has(> .link-preview-card:nth-child(2)) {
grid-template-columns: 1fr;
}
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card--has-image .link-preview-card__media {
aspect-ratio: 16 / 10;
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card__title {
font-size: 0.85rem;
-webkit-line-clamp: 2;
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card__site {
font-size: 0.7rem;
}
.link-preview-card {
display: flex;
align-items: stretch;
border: 1px solid transparent;
border-radius: var(--n-r-md, 12px);
background: var(--n-bg-soft);
text-decoration: none;
color: var(--n-text);
overflow: hidden;
transition: background var(--n-dur-fast, .15s) ease,
border-color var(--n-dur-fast, .15s) ease;
}
.link-preview-card:hover {
background: var(--n-bg-hover);
border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}
.link-preview-card:not(.link-preview-card--has-image) {
align-items: center;
gap: 10px;
padding: 10px;
}
.link-preview-card__favicon-box {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--n-bg-2);
display: grid;
place-items: center;
overflow: hidden;
}
.link-preview-card__favicon-box img {
width: 28px;
height: 28px;
}
.link-preview-card--has-image {
flex-direction: column;
}
.link-preview-card__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--n-bg-2);
}
.link-preview-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.link-preview-card__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: color-mix(in oklab, var(--n-accent) 90%, transparent);
color: var(--n-text-on-accent);
display: grid;
place-items: center;
font-size: 1.3rem;
box-shadow: 0 4px 16px color-mix(in srgb, var(--n-bg-sunk) 30%, transparent);
pointer-events: none;
}
.link-preview-card--has-image .link-preview-card__body {
padding: 10px 12px;
}
.link-preview-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.link-preview-card__site {
font-size: 0.72rem;
color: var(--n-text-mute);
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: var(--n-w-med, 500);
}
.link-preview-card__site-icon {
width: 14px;
height: 14px;
border-radius: 3px;
}
.link-preview-card__title {
font-size: 0.92rem;
font-weight: var(--n-w-sem, 600);
color: var(--n-text);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.link-preview-card__desc {
font-size: 0.8rem;
color: var(--n-text-soft);
line-height: 1.4;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.link-preview-card--youtube .link-preview-card__play {
background: color-mix(in srgb, var(--n-danger) 85%, transparent);
}
@media (max-width: 480px) {
.link-preview-card__play {
width: 48px;
height: 48px;
font-size: 1.1rem;
}
.link-preview-card__title {
font-size: 0.88rem;
}
.link-preview-card__desc {
-webkit-line-clamp: 1;
}
}
.post-author__sep {
margin: 0 4px;
color: var(--n-text-mute);
opacity: 0.6;
}
.post-author__in {
font-size: 0.85em;
color: var(--n-text-mute);
margin-right: 4px;
}
.post-author__community {
color: var(--n-accent);
font-weight: 600;
text-decoration: none;
font-size: 0.92em;
transition: opacity 0.15s;
}
.post-author__community:hover {
text-decoration: underline;
opacity: 0.85;
}
.post-author__community span[aria-hidden] {
margin-right: 2px;
font-size: 0.9em;
opacity: 0.8;
}
.post-author__wall {
color: var(--n-accent);
font-weight: 600;
text-decoration: none;
font-size: 0.92em;
transition: opacity 0.15s;
}
.post-author__wall:hover {
text-decoration: underline;
opacity: 0.85;
}
.post-author__wall span[aria-hidden] {
margin-right: 2px;
font-size: 0.9em;
opacity: 0.85;
}
.post-avatar--community {
border: 2px solid color-mix(in oklab, var(--n-violet) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--n-violet) 20%, transparent);
}
.post-avatar--wall {
background: color-mix(in oklab, var(--n-accent) 20%, var(--n-bg-soft));
border: 2px solid color-mix(in oklab, var(--n-accent) 50%, transparent);
}
.post-avatar__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.4rem;
}
.post-author__primary {
font-weight: 700;
font-size: 1.05rem;
color: var(--n-text);
text-decoration: none;
}
.post-author__primary:hover {
color: var(--n-accent);
}
.post-author--byline {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--n-text-mute);
margin-top: 2px;
}
.post-author--byline a {
color: var(--n-text-mute);
text-decoration: none;
}
.post-author--byline a:hover {
color: var(--n-accent);
}
.post-date-inline {
color: var(--n-text-mute);
font-size: 0.85rem;
}
.post-author__chip-mini {
font-size: 0.7rem;
color: var(--n-text-mute);
margin-left: 4px;
opacity: 0.7;
}
.post-header--community {
background: linear-gradient(135deg,
transparent 0%,
color-mix(in oklab, var(--n-violet) 3%, transparent) 100%);
border-radius: 8px 8px 0 0;
}
.post-header--wall {
background: linear-gradient(135deg,
transparent 0%,
color-mix(in oklab, var(--n-accent) 3%, transparent) 100%);
border-radius: 8px 8px 0 0;
}
.post-byline-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: var(--n-bg-2);
border: 1px solid var(--n-line);
text-decoration: none;
}
.post-byline-avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.post-byline-avatar__init {
font-size: 11px; font-weight: 700;
color: var(--n-text-mute);
line-height: 1;
}
.w-arena-share{border:1px solid var(--n-line);border-radius:14px;padding:14px;margin:6px 0 4px;background:var(--n-bg-sunk);}
.w-arena-share__head{font-weight:700;font-size:.95rem;margin-bottom:12px;opacity:.9;text-align:center;}
.w-arena-share__vs{display:flex;align-items:center;justify-content:center;gap:14px;}
.w-arena-share__fighter{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;flex:1 1 0;min-width:0;}
.w-arena-share__ava{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--n-line-strong);}
.w-arena-share__fighter.is-winner .w-arena-share__ava{border-color:var(--n-ok);box-shadow:0 0 0 2px var(--n-ok),0 0 12px color-mix(in oklab, var(--n-accent-emerald) 50%, transparent);}
.w-arena-share__name{font-size:.82rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.w-arena-share__vsbadge{font-weight:800;font-size:.8rem;opacity:.55;flex:0 0 auto;}
.w-arena-share__result{text-align:center;font-weight:800;margin:12px 0 4px;letter-spacing:.04em;text-transform:uppercase;font-size:.9rem;}
.w-arena-share__result--win{color:var(--n-ok);}
.w-arena-share__result--loss{color:var(--n-danger);}
.w-arena-share__result--draw{color:var(--n-warn);}
.w-arena-share__meta{text-align:center;font-size:.82rem;opacity:.75;margin-bottom:12px;}
.w-arena-share__btn{display:block;text-align:center;padding:9px 14px;border-radius:10px;background:var(--n-accent);color:var(--n-text-on-accent);font-weight:700;text-decoration:none;font-size:.88rem;}
.w-arena-share__btn:hover{filter:brightness(1.08);}
.post-widget__sponsored-banner{padding:6px 14px 0;display:flex;align-items:center}
.post-widget__sponsored-tag{font-size:.7rem;font-weight:600;color:var(--n-text-mute);text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:4px}
.post-widget__sponsored-cta{padding:8px 14px 4px}
.post-widget__sponsored-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 18px;background:var(--n-accent);color:var(--n-text-on-accent);border-radius:var(--n-r-md);font-weight:600;font-size:.85rem;text-decoration:none;transition:opacity .15s}
.post-widget__sponsored-btn:hover{opacity:.88}
/* v1.1.5.290 — mobile overflow hardening for canonical post widget. */
.post-widget,
.post-widget *,
.post-widget *::before,
.post-widget *::after{
box-sizing:border-box;
}
.post-widget{
max-width:100%;
overflow:hidden;
}
.post-widget :is(.post-header,.post-user-meta,.post-content,.post-text,.post-link-cards,.post-link-card,.post-link-card__meta,.post-link-previews,.link-preview-card,.link-preview-card__body,.post-media-grid,.kp-post-gallery,.post-actions,.reactions-widget){
min-width:0;
max-width:100%;
}
.post-widget :is(.post-author,.post-author a,.post-date,.post-date span,.post-text,.post-link-card__host,.post-link-card__url,.post-media-audio__title,.post-media-file__name,.link-preview-card__title,.link-preview-card__desc){
overflow-wrap:anywhere;
word-break:normal;
}
@media (max-width: 760px){
.post-widget .post-author{
white-space:normal;
}
.post-widget .post-date{
flex-wrap:wrap;
}
.post-widget .post-actions{
max-width:100%;
flex-wrap:wrap;
gap:10px 12px;
align-items:center;
}
.post-widget .post-actions__spacer,
.post-widget .post-actions-sep{
display:none;
}
.post-widget .kp-post-action-btn,
.post-widget .reactions-compact{
min-width:0;
margin:0;
padding:7px 8px;
}
.post-widget .post-link-card{
align-items:flex-start;
}
.post-widget .post-link-card__arrow{
display:none;
}
.post-widget .kp-post-gallery--single .kp-post-gallery__hero,
.post-widget .kp-post-gallery__hero{
height:min(220px,58vw);
max-height:220px;
}
}