@ox-content/vite-plugin 3.0.0-alpha.9 → 3.0.0-beta.0

package/dist/styles/social.css

@@ -0,0 +1,678 @@
+/* ox-content Social Embeds - Twitter/X, Bluesky, WebContainer, media iframes */
+
+/* Static link cards (<Tweet>/<XPost>/<Bluesky> without build-time fetch) */
+.ox-tweet,
+.ox-bluesky {
+  display: block;
+  margin: 1.5rem 0;
+  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+}
+
+.ox-tweet > a,
+.ox-bluesky > a {
+  display: block;
+  padding: 1rem 0;
+  text-decoration: none;
+  color: var(--octc-color-text);
+}
+
+/* A fetched tweet renders `<figure><header>…` rather than wrapping its body in
+   one anchor, so the rule above never matches it. Pad the card itself to keep
+   it level with the Bluesky card. */
+.ox-tweet--fetched {
+  padding: 1rem 0;
+}
+
+.ox-tweet > a:hover,
+.ox-bluesky > a:hover {
+  text-decoration: none;
+}
+
+.ox-tweet > a > span,
+.ox-bluesky > a > span {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--octc-color-text-muted);
+  margin-bottom: 0.375rem;
+}
+
+.ox-tweet > a > strong,
+.ox-bluesky > a > strong {
+  display: block;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--octc-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ox-tweet > a:hover > strong,
+.ox-bluesky > a:hover > strong {
+  text-decoration: underline;
+}
+
+.ox-tweet > a > p,
+.ox-bluesky > a > p {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-bluesky__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.ox-bluesky__avatar-wrap {
+  flex: 0 0 auto;
+}
+
+.ox-bluesky__avatar,
+.ox-bluesky__avatar-fallback {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--octc-color-primary) 16%, var(--octc-color-bg-alt));
+  color: var(--octc-color-primary);
+  font-weight: 700;
+}
+
+.ox-bluesky__avatar {
+  object-fit: cover;
+}
+
+.ox-bluesky__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.ox-bluesky__author-name,
+.ox-bluesky__handle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ox-bluesky__author-name {
+  font-size: 0.95rem;
+  line-height: 1.2;
+  color: var(--octc-color-text);
+}
+
+.ox-bluesky__handle,
+.ox-bluesky__network,
+.ox-bluesky__meta {
+  color: var(--octc-color-text-muted);
+}
+
+.ox-bluesky__network {
+  margin-left: auto;
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ox-bluesky__body {
+  margin: 0.875rem 0 0;
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: var(--octc-color-text);
+}
+
+.ox-bluesky__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.8rem;
+  margin-top: 0.875rem;
+  font-size: 0.75rem;
+}
+
+.ox-bluesky__source {
+  color: var(--octc-color-primary);
+  font-weight: 600;
+}
+
+/* Fetched tweet cards (<Tweet> with `twitter: { fetch: true }`) */
+.ox-tweet--fetched > a {
+  padding: 1rem 0;
+}
+
+.ox-tweet__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.ox-tweet__profile {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+.ox-tweet__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-tweet__author-name {
+  display: block;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--octc-color-text);
+}
+
+.ox-tweet__author-handle {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-tweet__body {
+  margin: 0 0 0.625rem;
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  color: var(--octc-color-text);
+  white-space: pre-wrap;
+}
+
+.ox-tweet__media {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.ox-tweet__media-item {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-tweet__media-fallback {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ox-tweet__media-fallback > img {
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+}
+
+.ox-tweet__watch {
+  margin-top: 0.375rem;
+  font-size: 0.8125rem;
+}
+
+.ox-tweet__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-tweet__permalink {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ox-tweet__source {
+  color: var(--octc-color-primary);
+  font-weight: 600;
+}
+
+.ox-tweet__metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.75rem;
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-tweet__metric strong {
+  color: var(--octc-color-text);
+}
+
+.ox-tweet__reply {
+  margin: 0 0 0.5rem;
+  font-size: 0.8125rem;
+}
+
+.ox-tweet__reply-link {
+  color: var(--octc-color-text-muted);
+  text-decoration: none;
+}
+
+.ox-tweet__reply-link:hover {
+  text-decoration: underline;
+}
+
+.ox-tweet__quote {
+  margin: 0 0 0.625rem;
+  padding: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-radius: 8px;
+}
+
+.ox-tweet__quote-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.ox-tweet__quote .ox-tweet__avatar {
+  width: 28px;
+  height: 28px;
+}
+
+.ox-tweet__quote-body {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--octc-color-text);
+  white-space: pre-wrap;
+}
+
+.ox-tweet__quote .ox-tweet__media {
+  margin-bottom: 0;
+}
+/* WebContainer lazy placeholder */
+.ox-webcontainer {
+  margin: 1.5rem 0;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--octc-color-bg);
+}
+
+.ox-webcontainer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.65rem 0.85rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-webcontainer__title {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.55rem;
+}
+
+.ox-webcontainer__title strong {
+  font-size: 0.875rem;
+  color: var(--octc-color-text);
+}
+
+.ox-webcontainer__title code {
+  color: var(--octc-color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ox-webcontainer__status,
+.ox-webcontainer__meta {
+  font-size: 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-webcontainer__status {
+  padding: 0.16rem 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--octc-color-primary) 26%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--octc-color-primary) 8%, transparent);
+  color: var(--octc-color-primary);
+  white-space: nowrap;
+}
+
+.ox-webcontainer__preview {
+  background: var(--octc-color-code-bg);
+}
+
+.ox-webcontainer pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.ox-webcontainer__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.85rem;
+  padding: 0.6rem 0.85rem;
+  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  background: color-mix(in srgb, var(--octc-color-bg-alt) 54%, transparent);
+}
+
+.ox-webcontainer__meta code {
+  color: var(--octc-color-text);
+}
+/* Provider cards for static article, place, community, and social embeds */
+.ox-provider-card {
+  display: block;
+  margin: 1rem 0;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--octc-color-bg);
+}
+
+.ox-provider-card__main {
+  display: grid;
+  color: var(--octc-color-text);
+  text-decoration: none;
+}
+
+.ox-provider-card__main:hover {
+  text-decoration: none;
+}
+
+.ox-provider-card__header,
+.ox-provider-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-provider-card__header {
+  min-height: 2.1rem;
+  padding: 0.45rem 0.8rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 68%, transparent);
+  background: color-mix(in srgb, var(--octc-color-bg-alt) 60%, transparent);
+  font-size: 0.75rem;
+}
+
+.ox-provider-card__network,
+.ox-provider-card__source {
+  font-weight: 600;
+}
+
+.ox-provider-card__network {
+  color: var(--octc-color-primary);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ox-provider-card__body-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 0.8rem;
+}
+
+.ox-provider-card__avatar {
+  flex: 0 0 auto;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-provider-card__copy {
+  min-width: 0;
+}
+
+.ox-provider-card .ox-provider-card__title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.35;
+  color: var(--octc-color-text);
+}
+
+.ox-provider-card__main:hover .ox-provider-card__title {
+  text-decoration: underline;
+}
+
+.ox-provider-card .ox-provider-card__excerpt {
+  margin: 0.35rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--octc-color-text-muted);
+  white-space: pre-wrap;
+}
+
+.ox-provider-card__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 420px;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-width: 1px 0 0;
+  border-radius: 0;
+  object-fit: cover;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-provider-card__meta {
+  min-height: 2.15rem;
+  padding: 0.45rem 0.8rem;
+  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 68%, transparent);
+  background: color-mix(in srgb, var(--octc-color-bg-alt) 48%, transparent);
+  font-size: 0.75rem;
+}
+
+.ox-provider-card__metric > span {
+  font-weight: 600;
+  color: var(--octc-color-text);
+}
+
+.ox-provider-card__source {
+  color: var(--octc-color-primary);
+}
+
+.ox-provider-card__map {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  background: var(--octc-color-bg-alt);
+}
+.ox-tweet--rich .ox-tweet__card {
+  display: block;
+  padding: 1rem 0;
+  color: var(--octc-color-text);
+  text-decoration: none;
+}
+
+.ox-tweet--rich .ox-tweet__profile {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+.ox-tweet--rich .ox-tweet__avatar-wrap {
+  flex: 0 0 auto;
+}
+
+.ox-tweet--rich .ox-tweet__avatar,
+.ox-tweet--rich .ox-tweet__avatar-fallback {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--octc-color-text) 10%, var(--octc-color-bg-alt));
+  color: var(--octc-color-text);
+  font-weight: 800;
+}
+
+.ox-tweet--rich .ox-tweet__avatar {
+  object-fit: cover;
+}
+
+.ox-tweet--rich .ox-tweet__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.ox-tweet--rich .ox-tweet__author-name,
+.ox-tweet--rich .ox-tweet__author-handle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ox-tweet--rich .ox-tweet__network {
+  margin-left: auto;
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-tweet--rich .ox-tweet__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.8rem;
+  margin-top: 0.875rem;
+  font-size: 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-tweet--rich .ox-tweet__source {
+  color: var(--octc-color-primary);
+  font-weight: 600;
+}
+/* Reddit post cards */
+.ox-reddit-card {
+  display: block;
+  margin: 1.5rem 0;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--octc-color-bg);
+}
+
+.ox-reddit-card__main,
+.ox-reddit-card__original {
+  display: block;
+  color: var(--octc-color-text);
+  text-decoration: none;
+}
+
+.ox-reddit-card__main {
+  padding: 1rem;
+}
+
+.ox-reddit-card__main:hover,
+.ox-reddit-card__original:hover {
+  text-decoration: none;
+}
+
+.ox-reddit-card__header,
+.ox-reddit-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.75rem;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-reddit-card__header {
+  margin-bottom: 0.625rem;
+  font-size: 0.75rem;
+}
+
+.ox-reddit-card__network,
+.ox-reddit-card__subreddit,
+.ox-reddit-card__source,
+.ox-reddit-card__original {
+  font-weight: 600;
+}
+
+.ox-reddit-card__network {
+  color: #ff4500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ox-reddit-card__subreddit,
+.ox-reddit-card__source,
+.ox-reddit-card__original {
+  color: var(--octc-color-primary);
+}
+
+.ox-reddit-card__author,
+.ox-reddit-card__time {
+  color: var(--octc-color-text-muted);
+}
+
+.ox-reddit-card__title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.35;
+  color: var(--octc-color-text);
+}
+
+.ox-reddit-card__body {
+  margin: 0.625rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--octc-color-text-muted);
+}
+
+.ox-reddit-card__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 420px;
+  margin-top: 0.875rem;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  border-radius: 8px;
+  object-fit: cover;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-reddit-card__meta {
+  margin-top: 0.875rem;
+  font-size: 0.75rem;
+}
+
+.ox-reddit-card__metric strong {
+  color: var(--octc-color-text);
+}
+
+.ox-reddit-card__original {
+  padding: 0.625rem 1rem;
+  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
+  background: var(--octc-color-bg-alt);
+  font-size: 0.8125rem;
+}
+
+.ox-reddit-card--fallback,
+.ox-reddit-card.error {
+  border-style: dashed;
+}