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

package/dist/styles/twitter-full.css

@@ -0,0 +1,598 @@
+/*
+ * Host-prose isolation for full-fidelity Tweet cards.
+ *
+ * The full card replaces native elements — a `<figure>` root, `<img>`
+ * avatars and media, a `<blockquote>` for the quoted post — and an article
+ * stylesheet such as `@tailwindcss/typography` styles those by element. The
+ * component rules below the isolation block win wherever they set a
+ * property; this file covers the properties they never set, which is how a
+ * `.prose` article was adding image margins to avatars and quotation
+ * typography to the quoted post.
+ *
+ * Every selector doubles the root class (`.ox-tweet.ox-tweet--full`) so it
+ * outranks `.prose <element>` regardless of which stylesheet the host
+ * imports last. Generated quotes need a longer chain still: Tailwind writes
+ * them at `.prose blockquote p:first-of-type::before`.
+ */
+
+/*
+ * The card root is a `<figure>`, and the component sets its margin at one
+ * class of specificity — which `.prose figure` outranks. Restate it here
+ * through the same custom property, so a host that overrides the property
+ * still gets what it asked for.
+ */
+.ox-tweet.ox-tweet--full {
+  margin: var(--ox-tweet-container-margin);
+}
+
+.ox-tweet.ox-tweet--full * {
+  box-sizing: border-box;
+}
+
+.ox-tweet.ox-tweet--full :where(img, video, figure, picture, svg) {
+  margin: 0;
+}
+
+.ox-tweet.ox-tweet--full :where(p, ul, ol, li, dl, dd, dt, hr, h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  padding: 0;
+}
+
+.ox-tweet.ox-tweet--full :where(ul, ol) {
+  list-style: none;
+}
+
+.ox-tweet.ox-tweet--full :where(a) {
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+}
+
+.ox-tweet.ox-tweet--full :where(code, pre, kbd, samp) {
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background: none;
+}
+
+.ox-tweet.ox-tweet--full :where(code)::before,
+.ox-tweet.ox-tweet--full :where(code)::after {
+  content: none;
+}
+
+/* The quoted post is a `<blockquote>`, which prose styles the hardest. */
+.ox-tweet.ox-tweet--full .ox-tweet__quote {
+  font-style: normal;
+  font-weight: 400;
+  color: inherit;
+  quotes: none;
+}
+
+.ox-tweet.ox-tweet--full .ox-tweet__quote :where(p)::before,
+.ox-tweet.ox-tweet--full .ox-tweet__quote :where(p)::after,
+.ox-tweet.ox-tweet--full .ox-tweet__quote :where(p):first-of-type::before,
+.ox-tweet.ox-tweet--full .ox-tweet__quote :where(p):last-of-type::after {
+  content: none;
+}
+/*
+ * Opt-in full-card chrome for Twitter/X embeds.
+ * Loaded only when a page has .ox-tweet--full.
+ *
+ * Visual tokens and control icons follow the theme contract of:
+ *
+ *   react-tweet — https://github.com/vercel/react-tweet
+ *   Copyright (c) 2023 Luis Alvarez
+ *
+ *   sveltweet — https://github.com/ryoppippi/sveltweet
+ *   Copyright (c) 2024 ryoppippi
+ *
+ * Both are MIT-licensed. The permission notice is included because this
+ * stylesheet is a substantial portion of that visual contract. Ox Content
+ * does not vendor their JavaScript, React, or Svelte components.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included
+ * in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * X, Twitter, and related marks are trademarks of their respective owners.
+ */
+
+.ox-tweet--full {
+  --ox-tweet-container-margin: 1.5rem 0;
+  --ox-tweet-header-font-size: 0.9375rem;
+  --ox-tweet-body-font-size: 1.25rem;
+  --ox-tweet-body-line-height: 1.5rem;
+  --ox-tweet-quoted-body-font-size: 0.938rem;
+  --ox-tweet-info-font-size: 0.9375rem;
+  --ox-tweet-actions-font-size: 1rem;
+  --ox-tweet-actions-line-height: 1.25rem;
+  --ox-tweet-actions-font-weight: 700;
+  --ox-tweet-actions-icon-size: 1.25em;
+  --ox-tweet-actions-icon-wrapper-size: 2rem;
+  --ox-tweet-replies-font-size: 0.875rem;
+  --ox-tweet-replies-line-height: 1rem;
+  --ox-tweet-replies-font-weight: 700;
+  --ox-tweet-icon-size: 1.25em;
+  --ox-tweet-border: 1px solid rgb(207, 217, 222);
+  --ox-tweet-font-color: rgb(15, 20, 25);
+  --ox-tweet-font-color-secondary: rgb(83, 100, 113);
+  --ox-tweet-bg: #fff;
+  --ox-tweet-bg-hover: rgb(247, 249, 249);
+  --ox-tweet-quote-hover: rgba(0, 0, 0, 0.03);
+  --ox-tweet-color-blue: rgb(29, 155, 240);
+  --ox-tweet-color-blue-text: rgb(0, 111, 214);
+  --ox-tweet-color-blue-hover: rgba(0, 111, 214, 0.1);
+  --ox-tweet-color-red: rgb(249, 24, 128);
+  --ox-tweet-color-red-hover: rgba(249, 24, 128, 0.1);
+  --ox-tweet-color-green: rgb(0, 186, 124);
+  --ox-tweet-color-green-hover: rgba(0, 186, 124, 0.1);
+  --ox-tweet-verified-blue: var(--ox-tweet-color-blue);
+  --ox-tweet-verified-gold: rgb(226, 179, 64);
+  --ox-tweet-verified-gray: rgb(130, 154, 171);
+  --ox-tweet-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.727-8.83L1.254 2.25H8.08l4.257 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.36 5.64c-1.95-1.96-5.11-1.96-7.07 0L9.88 7.05 8.46 5.64l1.42-1.42c2.73-2.73 7.16-2.73 9.9 0 2.73 2.74 2.73 7.17 0 9.9l-1.42 1.42-1.41-1.42 1.41-1.41c1.96-1.96 1.96-5.12 0-7.07zm-2.12 3.53l-7.07 7.07-1.41-1.41 7.07-7.07 1.41 1.41zm-12.02.71l1.42-1.42 1.41 1.42-1.41 1.41c-1.96 1.96-1.96 5.12 0 7.07 1.95 1.96 5.11 1.96 7.07 0l1.41-1.41 1.42 1.41-1.42 1.42c-2.73 2.73-7.16 2.73-9.9 0-2.73-2.74-2.73-7.17 0-9.9z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 8.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5S11.17 7 12 7s1.5.67 1.5 1.5zM13 17v-5h-2v5h2zm-1 5.25c5.66 0 10.25-4.59 10.25-10.25S17.66 1.75 12 1.75 1.75 6.34 1.75 12 6.34 22.25 12 22.25zM20.25 12c0 4.56-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12 7.44 3.75 12 3.75s8.25 3.69 8.25 8.25z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.4-.46-2.91-.2-3.91.81s-1.27 2.52-.81 3.91c-1.31.67-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.4.46 2.91.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/%3E%3C/svg%3E");
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 550px;
+  min-width: 0;
+  margin: var(--ox-tweet-container-margin);
+  padding: 0.75rem 1rem;
+  overflow: hidden;
+  color: var(--ox-tweet-font-color);
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+  background: var(--ox-tweet-bg);
+}
+
+[data-theme="dark"] .ox-tweet--full,
+.dark .ox-tweet--full {
+  --ox-tweet-border: 1px solid rgb(66, 83, 100);
+  --ox-tweet-font-color: rgb(247, 249, 249);
+  --ox-tweet-font-color-secondary: rgb(139, 152, 165);
+  --ox-tweet-bg: rgb(21, 32, 43);
+  --ox-tweet-bg-hover: rgb(30, 39, 50);
+  --ox-tweet-quote-hover: rgba(255, 255, 255, 0.03);
+  --ox-tweet-color-blue-text: rgb(107, 201, 251);
+  --ox-tweet-color-blue-hover: rgba(107, 201, 251, 0.1);
+  --ox-tweet-verified-blue: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .ox-tweet--full {
+    --ox-tweet-border: 1px solid rgb(66, 83, 100);
+    --ox-tweet-font-color: rgb(247, 249, 249);
+    --ox-tweet-font-color-secondary: rgb(139, 152, 165);
+    --ox-tweet-bg: rgb(21, 32, 43);
+    --ox-tweet-bg-hover: rgb(30, 39, 50);
+    --ox-tweet-quote-hover: rgba(255, 255, 255, 0.03);
+    --ox-tweet-color-blue-text: rgb(107, 201, 251);
+    --ox-tweet-color-blue-hover: rgba(107, 201, 251, 0.1);
+    --ox-tweet-verified-blue: #fff;
+  }
+}
+
+.ox-tweet--full .ox-tweet__header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin: 0 0 0.75rem;
+  overflow: hidden;
+  font-size: var(--ox-tweet-header-font-size);
+  line-height: 1.25rem;
+  white-space: nowrap;
+}
+
+.ox-tweet--full .ox-tweet__avatar-link {
+  flex: 0 0 48px;
+}
+
+.ox-tweet--full .ox-tweet__avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.ox-tweet--full .ox-tweet__author {
+  min-width: 0;
+  margin: 0 0.5rem;
+}
+
+.ox-tweet--full .ox-tweet__author-name,
+.ox-tweet--full .ox-tweet__author-handle,
+.ox-tweet--full .ox-tweet__follow {
+  text-decoration: none;
+}
+
+.ox-tweet--full .ox-tweet__author-name {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  overflow: hidden;
+  font-weight: 700;
+  color: inherit;
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__author-name:hover,
+.ox-tweet--full .ox-tweet__follow:hover {
+  text-decoration: underline;
+}
+
+.ox-tweet--full .ox-tweet__author-meta {
+  display: flex;
+  min-width: 0;
+}
+
+.ox-tweet--full .ox-tweet__author-handle {
+  overflow: hidden;
+  color: var(--ox-tweet-font-color-secondary);
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__sep {
+  padding: 0 0.25rem;
+  color: var(--ox-tweet-font-color-secondary);
+}
+
+.ox-tweet--full .ox-tweet__follow {
+  font-weight: 700;
+  color: var(--ox-tweet-color-blue-text);
+}
+
+.ox-tweet--full .ox-tweet__brand {
+  margin-inline-start: auto;
+  color: inherit;
+}
+
+.ox-tweet--full .ox-tweet__badge,
+.ox-tweet--full .ox-tweet__icon {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 1.125em;
+  height: 1.125em;
+  background: currentColor;
+  -webkit-mask: var(--ox-tweet-icon-badge) center / contain no-repeat;
+  mask: var(--ox-tweet-icon-badge) center / contain no-repeat;
+}
+
+.ox-tweet--full .ox-tweet__icon {
+  width: var(--ox-tweet-icon-size);
+  height: var(--ox-tweet-icon-size);
+}
+
+.ox-tweet--full .ox-tweet__badge--blue {
+  color: var(--ox-tweet-verified-blue);
+}
+
+.ox-tweet--full .ox-tweet__badge--gold {
+  color: var(--ox-tweet-verified-gold);
+}
+
+.ox-tweet--full .ox-tweet__badge--gray {
+  color: var(--ox-tweet-verified-gray);
+}
+
+.ox-tweet--full .ox-tweet__icon--x {
+  -webkit-mask-image: var(--ox-tweet-icon-x);
+  mask-image: var(--ox-tweet-icon-x);
+}
+
+.ox-tweet--full .ox-tweet__icon--like {
+  color: var(--ox-tweet-color-red);
+  -webkit-mask-image: var(--ox-tweet-icon-like);
+  mask-image: var(--ox-tweet-icon-like);
+}
+
+.ox-tweet--full .ox-tweet__icon--reply {
+  color: var(--ox-tweet-color-blue);
+  -webkit-mask-image: var(--ox-tweet-icon-reply);
+  mask-image: var(--ox-tweet-icon-reply);
+}
+
+.ox-tweet--full .ox-tweet__icon--copy {
+  -webkit-mask-image: var(--ox-tweet-icon-copy);
+  mask-image: var(--ox-tweet-icon-copy);
+}
+
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__icon--copy {
+  -webkit-mask-image: var(--ox-tweet-icon-check);
+  mask-image: var(--ox-tweet-icon-check);
+}
+
+.ox-tweet--full .ox-tweet__icon--info {
+  -webkit-mask-image: var(--ox-tweet-icon-info);
+  mask-image: var(--ox-tweet-icon-info);
+}
+
+.ox-tweet--full .ox-tweet__reply {
+  margin: 0 0 0.25rem;
+  font-size: var(--ox-tweet-header-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__body {
+  margin: 0;
+  font-size: var(--ox-tweet-body-font-size);
+  font-weight: 400;
+  line-height: var(--ox-tweet-body-line-height);
+  overflow-wrap: break-word;
+}
+
+.ox-tweet--full .ox-tweet__body a,
+.ox-tweet--full .ox-tweet__quote-body a {
+  color: var(--ox-tweet-color-blue-text);
+  text-decoration: none;
+}
+.ox-tweet--full .ox-tweet__media {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  margin: 0.75rem 0 0;
+  overflow: hidden;
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="2"],
+.ox-tweet--full .ox-tweet__media[data-count="3"],
+.ox-tweet--full .ox-tweet__media[data-count="4"] {
+  grid-template-columns: 1fr 1fr;
+  aspect-ratio: 16 / 9;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="3"],
+.ox-tweet--full .ox-tweet__media[data-count="4"] {
+  grid-template-rows: 1fr 1fr;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="3"] > :first-child {
+  grid-row: span 2;
+}
+
+.ox-tweet--full .ox-tweet__media-item {
+  width: 100%;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+}
+
+.ox-tweet--full .ox-tweet__media[data-count="2"] .ox-tweet__media-item,
+.ox-tweet--full .ox-tweet__media[data-count="3"] .ox-tweet__media-item,
+.ox-tweet--full .ox-tweet__media[data-count="4"] .ox-tweet__media-item {
+  height: 100%;
+  object-fit: cover;
+}
+
+.ox-tweet--full .ox-tweet__media-fallback {
+  position: relative;
+}
+
+.ox-tweet--full .ox-tweet__watch {
+  margin-top: 0.375rem;
+  font-size: 0.8125rem;
+}
+
+.ox-tweet--full .ox-tweet__quote {
+  margin: 0.75rem 0 0;
+  padding: 0.75rem;
+  overflow: hidden;
+  border: var(--ox-tweet-border);
+  border-radius: 12px;
+}
+
+.ox-tweet--full .ox-tweet__quote-header {
+  margin: 0;
+}
+
+.ox-tweet--full .ox-tweet__quote .ox-tweet__avatar {
+  width: 20px;
+  height: 20px;
+}
+
+.ox-tweet--full .ox-tweet__quote-body {
+  margin: 0.25rem 0 0;
+  font-size: var(--ox-tweet-quoted-body-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__quote .ox-tweet__media {
+  margin-top: 0.75rem;
+}
+
+.ox-tweet--full .ox-tweet__info,
+.ox-tweet--full .ox-tweet__metrics,
+.ox-tweet--full .ox-tweet__actions {
+  display: flex;
+  align-items: center;
+  margin-top: 0.125rem;
+  overflow: hidden;
+  color: var(--ox-tweet-font-color-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ox-tweet--full .ox-tweet__actions {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top: var(--ox-tweet-border);
+}
+
+.ox-tweet--full .ox-tweet__metrics {
+  gap: 0.75rem;
+  font-size: var(--ox-tweet-actions-font-size);
+}
+
+.ox-tweet--full .ox-tweet__permalink,
+.ox-tweet--full .ox-tweet__info-help,
+.ox-tweet--full .ox-tweet__action,
+.ox-tweet--full .ox-tweet__replies-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ox-tweet--full .ox-tweet__permalink {
+  font-size: var(--ox-tweet-info-font-size);
+  line-height: 1.25rem;
+}
+
+.ox-tweet--full .ox-tweet__permalink:hover {
+  text-decoration: underline;
+}
+
+.ox-tweet--full .ox-tweet__info-help {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  margin-left: auto;
+  border-radius: 9999px;
+}
+
+.ox-tweet--full .ox-tweet__action {
+  display: flex;
+  align-items: center;
+  min-width: var(--ox-tweet-actions-icon-wrapper-size);
+  min-height: var(--ox-tweet-actions-icon-wrapper-size);
+  padding: 0;
+  margin: 0 1.25rem 0 0;
+  font-size: var(--ox-tweet-actions-font-size);
+  font-weight: var(--ox-tweet-actions-font-weight);
+  line-height: var(--ox-tweet-actions-line-height);
+  background: transparent;
+  border: 0;
+}
+
+.ox-tweet--full .ox-tweet__action-icon {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--ox-tweet-actions-icon-wrapper-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--ox-tweet-actions-icon-wrapper-size);
+  height: var(--ox-tweet-actions-icon-wrapper-size);
+  margin: 0 0.25rem 0 -0.25rem;
+  border-radius: 9999px;
+}
+
+.ox-tweet--full .ox-tweet__action .ox-tweet__icon {
+  width: var(--ox-tweet-actions-icon-size);
+  height: var(--ox-tweet-actions-icon-size);
+}
+
+.ox-tweet--full .ox-tweet__action--like:hover .ox-tweet__action-text {
+  color: var(--ox-tweet-color-red);
+  text-decoration-line: underline;
+}
+
+.ox-tweet--full .ox-tweet__action--like:hover .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-red-hover);
+}
+
+.ox-tweet--full .ox-tweet__action--reply:hover .ox-tweet__action-text {
+  color: var(--ox-tweet-color-blue-text);
+  text-decoration-line: underline;
+}
+
+.ox-tweet--full .ox-tweet__action--reply:hover .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-blue-hover);
+}
+
+.ox-tweet--full .ox-tweet__action--copy:hover,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] {
+  color: var(--ox-tweet-color-green);
+}
+
+.ox-tweet--full .ox-tweet__action--copy:hover .ox-tweet__action-icon,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-green-hover);
+}
+
+.ox-tweet--full .ox-tweet__action--copy:hover .ox-tweet__action-text,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__action-text {
+  color: var(--ox-tweet-color-green);
+  text-decoration-line: underline;
+}
+
+.ox-tweet--full .ox-tweet__copied-text {
+  display: none;
+}
+
+.ox-tweet--full .ox-tweet__copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__copy-text {
+  display: none;
+}
+
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__copied-text {
+  display: inline;
+}
+
+.ox-tweet--full .ox-tweet__replies {
+  padding: 0.25rem 0;
+  margin: 0;
+}
+
+.ox-tweet--full .ox-tweet__replies-link {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 1rem;
+  font-size: var(--ox-tweet-replies-font-size);
+  font-weight: var(--ox-tweet-replies-font-weight);
+  line-height: var(--ox-tweet-replies-line-height);
+  color: var(--ox-tweet-color-blue-text);
+  border: var(--ox-tweet-border);
+  border-radius: 9999px;
+}
+
+.ox-tweet--full .ox-tweet__replies-link:hover {
+  background-color: var(--ox-tweet-color-blue-hover);
+}
+
+@media (max-width: 400px) {
+  .ox-tweet--full {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .ox-tweet--full .ox-tweet__follow,
+  .ox-tweet--full .ox-tweet__sep {
+    display: none;
+  }
+}

package/dist/styles/youtube.css

@@ -0,0 +1,87 @@
+/* ox-content YouTube Plugin - iframe styles */
+
+.ox-youtube {
+  margin: 1.5rem 0;
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--octc-color-bg-alt);
+}
+
+.ox-youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Placeholder when iframe hasn't loaded */
+.ox-youtube::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--octc-color-bg-alt) 0%, var(--octc-color-border) 100%);
+  z-index: -1;
+}
+
+/* Play button placeholder */
+.ox-youtube-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-size: cover;
+  background-position: center;
+}
+
+.ox-youtube-placeholder::after {
+  content: "";
+  width: 68px;
+  height: 48px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E")
+    center/contain no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.ox-youtube-placeholder:hover::after {
+  transform: scale(1.1);
+}
+
+/* Title overlay */
+.ox-youtube-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ox-youtube {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+    width: calc(100% + 1.5rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ox-youtube-placeholder::after {
+    transition: none;
+  }
+
+  .ox-youtube-placeholder:hover::after {
+    transform: none;
+  }
+}