vue-tweet-pure/dist/vue-tweet-pure.css

A Vue 3 component for embedding tweets in your Vue.js applications.

.vue-tweet-theme{--tweet-container-margin:1.5rem 0;--tweet-header-font-size:.9375rem;--tweet-header-line-height:1.25rem;--tweet-body-font-size:1.25rem;--tweet-body-font-weight:400;--tweet-body-line-height:1.5rem;--tweet-body-margin:0;--tweet-quoted-container-margin:.75rem 0;--tweet-quoted-body-font-size:.938rem;--tweet-quoted-body-font-weight:400;--tweet-quoted-body-line-height:1.25rem;--tweet-quoted-body-margin:.25rem 0 .75rem 0;--tweet-info-font-size:.9375rem;--tweet-info-line-height:1.25rem;--tweet-actions-font-size:.875rem;--tweet-actions-line-height:1rem;--tweet-actions-font-weight:700;--tweet-actions-icon-size:1.25em;--tweet-actions-icon-wrapper-size:calc(var(--tweet-actions-icon-size) + .75em);--tweet-replies-font-size:.875rem;--tweet-replies-line-height:1rem;--tweet-replies-font-weight:700;--tweet-skeleton-gradient:var(--lightningcss-light,linear-gradient(270deg,#fafafa,#eaeaea,#eaeaea,#fafafa))var(--lightningcss-dark,linear-gradient(270deg,#15202b,#1e2732,#1e2732,#15202b));--tweet-border:var(--lightningcss-light,1px solid #cfd9de)var(--lightningcss-dark,1px solid #425364);--tweet-font-color:var(--lightningcss-light,#0f1419)var(--lightningcss-dark,#f7f9f9);--tweet-font-color-secondary:var(--lightningcss-light,#536471)var(--lightningcss-dark,#8b98a5);--tweet-bg-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#15202b);--tweet-bg-color-hover:var(--lightningcss-light,#f7f9f9)var(--lightningcss-dark,#1e2732);--tweet-quoted-bg-color-hover:var(--lightningcss-light,#00000008)var(--lightningcss-dark,#ffffff08);--tweet-color-blue-secondary:var(--lightningcss-light,#006fd6)var(--lightningcss-dark,#6bc9fb);--tweet-color-blue-secondary-hover:var(--lightningcss-light,#006fd61a)var(--lightningcss-dark,#6bc9fb1a);--tweet-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--tweet-color-blue-primary:#1d9bf0;--tweet-color-blue-primary-hover:#1a8cd8;--tweet-color-red-primary:#f91880;--tweet-color-red-primary-hover:#f918801a;--tweet-color-green-primary:#00ba7c;--tweet-color-green-primary-hover:#00ba7c1a;--tweet-verified-old-color:#829aab;--tweet-verified-blue-color:var(--tweet-color-blue-primary);--tweet-twitter-icon-color:var(--tweet-font-color)}:where(.vue-tweet-theme) *{box-sizing:border-box;margin:0;padding:0}:where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial}}:-webkit-any([data-theme=light],.light) :where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:-moz-any([data-theme=light],.light) :where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:-webkit-any([data-theme=light],.light) :where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:-moz-any([data-theme=light],.light) :where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:is([data-theme=light],.light) :where(.vue-tweet-theme){--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:-webkit-any([data-theme=dark],.dark) :where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:-moz-any([data-theme=dark],.dark) :where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:-webkit-any([data-theme=dark],.dark) :where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:-moz-any([data-theme=dark],.dark) :where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:is([data-theme=dark],.dark) :where(.vue-tweet-theme){--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.JrPdna_root{width:100%;min-width:250px;max-width:550px;color:var(--tweet-font-color);font-family:var(--tweet-font-family);box-sizing:border-box;border:var(--tweet-border);margin:var(--tweet-container-margin);background-color:var(--tweet-bg-color);border-radius:12px;font-weight:400;transition-property:background-color,box-shadow;transition-duration:.2s;overflow:hidden}.JrPdna_root:hover{background-color:var(--tweet-bg-color-hover)}.JrPdna_article{box-sizing:inherit;padding:.75rem 1rem;position:relative}.nN86_W_root{flex-direction:column;align-items:center;padding-bottom:.75rem;display:flex}.nN86_W_root>h3{margin-bottom:.5rem;font-size:1.25rem}._81i5Cq_verified{fill:currentColor;-webkit-user-select:none;user-select:none;vertical-align:text-bottom;max-width:20px;height:1.25em;max-height:20px;margin-left:.125rem}.RsfEUq_root{border:var(--tweet-border);width:100%;margin:var(--tweet-quoted-container-margin);cursor:pointer;border-radius:12px;transition-property:background-color,box-shadow;transition-duration:.2s;overflow:hidden}.RsfEUq_root:hover{background-color:var(--tweet-quoted-bg-color-hover)}.RsfEUq_article{box-sizing:inherit;position:relative}.dT-upq_verifiedOld{color:var(--tweet-verified-old-color)}.dT-upq_verifiedBlue{color:var(--tweet-verified-blue-color)}.dT-upq_verifiedGovernment{color:#829aab}._2tBG3G_header{line-height:var(--tweet-header-line-height);font-size:var(--tweet-header-font-size);white-space:nowrap;overflow-wrap:break-word;padding:.75rem .75rem 0;display:flex;overflow:hidden}._2tBG3G_avatar{width:20px;height:20px;position:relative}._2tBG3G_avatarSquare{border-radius:4px}._2tBG3G_author{margin:0 .5rem;display:flex}._2tBG3G_authorText{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}._2tBG3G_username{color:var(--tweet-font-color-secondary);text-overflow:ellipsis;margin-left:.125rem;text-decoration:none}._3hXyqa_root{font-size:var(--tweet-quoted-body-font-size);font-weight:var(--tweet-quoted-body-font-weight);line-height:var(--tweet-quoted-body-line-height);margin:var(--tweet-quoted-body-margin);overflow-wrap:break-word;white-space:pre-wrap;padding:0 .75rem}.nYjDHW_root{margin-top:.75rem;position:relative;overflow:hidden}.nYjDHW_rounded{border:var(--tweet-border);border-radius:12px}.nYjDHW_mediaWrapper{grid-auto-rows:1fr;gap:2px;width:100%;height:100%;display:grid}.nYjDHW_grid2Columns{grid-template-columns:repeat(2,1fr)}.nYjDHW_grid3>a:first-child{grid-row:span 2}.nYjDHW_grid2x2{grid-template-rows:repeat(2,1fr)}.nYjDHW_mediaContainer{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.nYjDHW_mediaLink{outline-style:none;text-decoration:none}.nYjDHW_skeleton{width:100%;padding-bottom:56.25%;display:block}.nYjDHW_image{object-fit:cover;object-position:center;width:100%;height:100%;margin:0;position:absolute;top:0;bottom:0;left:0}.rnM63W_anchor{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;border:1px solid #0000;border-radius:9999px;outline-style:none;align-items:center;padding:0 1rem;font-weight:700;text-decoration:none;transition:background-color .2s;display:flex}.rnM63W_videoButton{background-color:var(--tweet-color-blue-primary);cursor:pointer;border:4px solid #fff;border-radius:9999px;justify-content:center;align-items:center;width:67px;height:67px;transition-property:background-color;transition-duration:.2s;display:flex;position:relative}.rnM63W_videoButton:hover{background-color:var(--tweet-color-blue-primary-hover)}.rnM63W_videoButton:focus-visible{background-color:var(--tweet-color-blue-primary-hover)}.rnM63W_videoButtonIcon{color:#fff;fill:currentColor;-webkit-user-select:none;user-select:none;width:calc(50% + 4px);max-width:100%;height:calc(50% + 4px);margin-left:3px}.rnM63W_watchOnTwitter{position:absolute;top:12px;right:8px}.rnM63W_watchOnTwitter>a{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0f1419bf;min-width:2rem;min-height:2rem;font-size:.875rem;line-height:1rem}.rnM63W_watchOnTwitter>a:hover{background-color:#272c30bf}.rnM63W_viewReplies{background-color:var(--tweet-color-blue-primary);border-color:var(--tweet-color-blue-primary);min-height:2rem;font-size:.9375rem;line-height:1.25rem;position:relative}.rnM63W_viewReplies:hover{background-color:var(--tweet-color-blue-primary-hover)}.ZbIw1a_header{line-height:var(--tweet-header-line-height);font-size:var(--tweet-header-font-size);white-space:nowrap;overflow-wrap:break-word;padding-bottom:.75rem;display:flex;overflow:hidden}.ZbIw1a_avatar{width:48px;height:48px;position:relative}.ZbIw1a_avatarOverflow{border-radius:9999px;width:100%;height:100%;position:absolute;overflow:hidden}.ZbIw1a_avatarSquare{border-radius:4px}.ZbIw1a_avatarShadow{width:100%;height:100%;transition-property:background-color;transition-duration:.2s;box-shadow:inset 0 0 2px #00000008}.ZbIw1a_avatarShadow:hover{background-color:#1a1a1a26}.ZbIw1a_author{flex-direction:column;justify-content:center;max-width:calc(100% - 84px);margin:0 .5rem;display:flex}.ZbIw1a_authorLink{color:inherit;align-items:center;text-decoration:none;display:flex}.ZbIw1a_authorLink:hover{text-decoration-line:underline}.ZbIw1a_authorVerified{display:inline-flex}.ZbIw1a_authorLinkText{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.ZbIw1a_authorMeta,.ZbIw1a_authorFollow{display:flex}.ZbIw1a_username{color:var(--tweet-font-color-secondary);text-overflow:ellipsis;text-decoration:none}.ZbIw1a_follow{color:var(--tweet-color-blue-secondary);font-weight:700;text-decoration:none}.ZbIw1a_follow:hover{text-decoration-line:underline}.ZbIw1a_separator{padding:0 .25rem}.ZbIw1a_brand{margin-inline-start:auto}.ZbIw1a_twitterIcon{width:23.75px;height:23.75px;color:var(--tweet-twitter-icon-color);fill:currentColor;-webkit-user-select:none;user-select:none}._5nZaGq_root{color:var(--tweet-font-color-secondary);overflow-wrap:break-word;white-space:pre-wrap;margin-bottom:.25rem;font-size:.9375rem;line-height:1.25rem;text-decoration:none}._5nZaGq_root:hover{text-decoration-line:underline;text-decoration-thickness:1px}.KevUKq_root{font-weight:inherit;color:var(--tweet-color-blue-secondary);cursor:pointer;text-decoration:none}.KevUKq_root:hover{text-decoration-line:underline;text-decoration-thickness:1px}.b5eIca_root{font-size:var(--tweet-body-font-size);font-weight:var(--tweet-body-font-weight);line-height:var(--tweet-body-line-height);margin:var(--tweet-body-margin);overflow-wrap:break-word;white-space:pre-wrap}.Oh6FCq_root{color:inherit;font-size:var(--tweet-info-font-size);line-height:var(--tweet-info-line-height);text-decoration:none}.Oh6FCq_root:hover{text-decoration-line:underline;text-decoration-thickness:1px}.Mff3nG_info{color:var(--tweet-font-color-secondary);overflow-wrap:break-word;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-top:.125rem;display:flex}.Mff3nG_infoLink{color:inherit;height:var(--tweet-actions-icon-wrapper-size);width:var(--tweet-actions-icon-wrapper-size);font:inherit;border-radius:9999px;justify-content:center;align-items:center;margin-left:auto;margin-right:-4px;text-decoration:none;transition-property:background-color;transition-duration:.2s;display:flex}.Mff3nG_infoLink:hover{background-color:var(--tweet-color-blue-secondary-hover)}.Mff3nG_infoIcon{color:inherit;fill:currentColor;height:var(--tweet-actions-icon-size);-webkit-user-select:none;user-select:none}.Mff3nG_infoLink:hover>.Mff3nG_infoIcon{color:var(--tweet-color-blue-secondary)}.aX6RRG_actions{color:var(--tweet-font-color-secondary);border-top:var(--tweet-border);overflow-wrap:break-word;white-space:nowrap;text-overflow:ellipsis;align-items:center;margin-top:.25rem;padding-top:.25rem;display:flex}.aX6RRG_like,.aX6RRG_reply,.aX6RRG_copy{color:inherit;align-items:center;margin-right:1.25rem;text-decoration:none;display:flex}.aX6RRG_like:hover,.aX6RRG_reply:hover,.aX6RRG_copy:hover{background-color:#0000}.aX6RRG_like:hover>.aX6RRG_likeIconWrapper{background-color:var(--tweet-color-red-primary-hover)}.aX6RRG_like:hover>.aX6RRG_likeCount{color:var(--tweet-color-red-primary);text-decoration-line:underline}.aX6RRG_likeIconWrapper,.aX6RRG_replyIconWrapper,.aX6RRG_copyIconWrapper{width:var(--tweet-actions-icon-wrapper-size);height:var(--tweet-actions-icon-wrapper-size);border-radius:9999px;justify-content:center;align-items:center;margin-left:-.25rem;display:flex}.aX6RRG_likeIcon,.aX6RRG_replyIcon,.aX6RRG_copyIcon{height:var(--tweet-actions-icon-size);fill:currentColor;-webkit-user-select:none;user-select:none}.aX6RRG_likeIcon{color:var(--tweet-color-red-primary)}.aX6RRG_likeCount,.aX6RRG_replyText,.aX6RRG_copyText{font-size:var(--tweet-actions-font-size);font-weight:var(--tweet-actions-font-weight);line-height:var(--tweet-actions-line-height);margin-left:.25rem}.aX6RRG_reply:hover>.aX6RRG_replyIconWrapper{background-color:var(--tweet-color-blue-secondary-hover)}.aX6RRG_reply:hover>.aX6RRG_replyText{color:var(--tweet-color-blue-secondary);text-decoration-line:underline}.aX6RRG_replyIcon{color:var(--tweet-color-blue-primary)}.aX6RRG_copy{font:inherit;cursor:pointer;background:0 0;border:none}.aX6RRG_copy:hover>.aX6RRG_copyIconWrapper{background-color:var(--tweet-color-green-primary-hover)}.aX6RRG_copy:hover .aX6RRG_copyIcon{color:var(--tweet-color-green-primary)}.aX6RRG_copy:hover>.aX6RRG_copyText{color:var(--tweet-color-green-primary);text-decoration-line:underline}.ykg4nq_replies{padding:.25rem 0}.ykg4nq_link{color:var(--tweet-color-blue-secondary);-webkit-user-select:none;user-select:none;border:var(--tweet-border);border-radius:9999px;outline-style:none;justify-content:center;align-items:center;min-width:32px;min-height:32px;padding:0 1rem;text-decoration:none;transition-property:background-color;transition-duration:.2s;display:flex}.ykg4nq_link:hover{background-color:var(--tweet-color-blue-secondary-hover)}.ykg4nq_text{font-weight:var(--tweet-replies-font-weight);font-size:var(--tweet-replies-font-size);line-height:var(--tweet-replies-line-height);overflow-wrap:break-word;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.l4VFjW_skeleton{background-image:var(--tweet-skeleton-gradient);background-size:400% 100%;border-radius:5px;width:100%;animation:8s ease-in-out infinite l4VFjW_loading;display:block}@media (prefers-reduced-motion:reduce){.l4VFjW_skeleton{background-position:200% 0;animation:none}}@keyframes l4VFjW_loading{0%{background-position:200% 0}to{background-position:-200% 0}}.Wi8Y9q_root{pointer-events:none;padding-bottom:.25rem}