a.loading-onebox { &:before { content: ""; display: inline-flex; float: left; margin: 3px 5px 0 0; position: relative; height: 10px; width: 10px; border: 2px solid var(--primary-low-mid); border-right-color: transparent; border-radius: 50%; -webkit-animation: rotate-forever 1s infinite linear; animation: rotate-forever 1s infinite linear; } } .onebox-result { @include post-aside; margin-top: 15px; padding: 12px; font-size: $font-0; > .source { margin-bottom: 12px; margin-right: 10px; display: block; color: var(--primary); position: relative; height: 20px; .info { a { color: black; text-decoration: none; padding-right: 10px; } position: absolute; font-size: $font-0; img.favicon { margin-right: 3px; } } } .onebox-result-body { padding-top: 5px; img { max-height: 80%; max-width: 25%; height: auto; float: left; margin-right: 1em; } h3, h4 { margin: 0; } code { max-height: 400px; } .metrics { clear: both; padding-bottom: 25px; .metric { display: inline-block; padding-left: 33px; float: left; } } } } // RottenTomatoes Onebox .onebox-result { .onebox-result-body { img.verdict { float: none; margin-right: 7px; } img.popcorn { float: none; margin-left: 20px; margin-right: 5px; } } } @mixin onebox-favicon($class, $image) { &.#{$class} .source { background: absolute-image-url("/favicons/#{$image}.png") no-repeat 0% 50%; background-size: 16px 16px; padding-left: 20px; } } aside.onebox { border: 5px solid var(--primary-low); margin: 1em 0; padding: 1em; font-size: $font-0; background: var(--secondary); header { align-items: center; display: flex; margin-bottom: 1em; .d-icon { margin-right: 5px; margin-top: 2px; &.d-icon-fab-twitter { color: var(--twitter); } } a[href] { color: var(--primary-med-or-secondary-med); text-decoration: none; } } @include onebox-favicon("stackexchange", "stackexchange"); @include onebox-favicon("instagram", "instagram"); @include onebox-favicon("googledocs", "google_branding/logo_drive_48px"); @include onebox-favicon("googledrive", "google_branding/logo_drive_48px"); .onebox-body { clear: both; h3, h4 { font-size: $font-up-1; margin: 0 0 10px 0; } a[href] { color: var(--tertiary); text-decoration: none; } a[href]:visited { color: var(--tertiary); } img { max-height: 170px; max-width: 20%; @media all and (max-width: 600px) { max-width: 35%; } height: auto; float: left; margin-right: 1em; &.onebox-full-image { max-height: none; max-width: none; width: initial; height: initial; } } .github-body-container { margin: 1em 0 0 0; color: var(--primary-very-high); max-height: 400px; white-space: pre-wrap; overflow-y: auto; word-break: break-word; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; flex: 1 0 100%; box-sizing: border-box; .show-more { // padding on right for larger hitzone padding: 0.5em 1.5em 0em 0.25em; } } [style*="--aspect-ratio"] > :first-child { width: 100%; } [style*="--aspect-ratio"] > img { height: auto; } // this allows us to load all onebox images without jiggle // see: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/ @supports (--custom: property) { .aspect-image { max-height: 170px; --magic-ratio: calc(var(--aspect-ratio) + 0.15); width: calc(128px * var(--magic-ratio)); max-width: 20%; float: left; margin-right: 1em; height: auto; img { width: 100%; height: inherit; max-width: initial; max-height: initial; float: none; margin-right: none; } } // full size images for instagram, twitter, etc. .aspect-image-full-size { margin: 0.5em 0; max-height: 100%; width: calc(500px * var(--aspect-ratio)); max-width: 100%; img { width: 100%; height: inherit; max-width: initial; max-height: initial; float: none; } } [style*="--aspect-ratio"] { position: relative; } [style*="--aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); } [style*="--aspect-ratio"] > :first-child { position: absolute; top: 0; left: 0; height: 100%; } } // tighten bottom margin on last para p:last-child { margin-bottom: 4px; } // twitter fixes .tweet-images { display: block; clear: both; img.tweet-image { margin-top: 1em; max-width: 100%; max-height: 100%; float: none; } @include breakpoint(mobile-extra-large) { // Prevent twitter embeds from being taller than the mobile viewport iframe { max-height: 70vh; } } } &.user-onebox { .fa { margin-right: 5px; } .full-name, .location { margin-right: 10px; } } // instagram + reddit fixes .instagram-images, .scale-images { clear: both; position: relative; .instagram-image, .scale-image { padding: 5px 5px 5px 5px; max-width: 100%; max-height: 100%; float: none; } } .image-wrapper { display: block; position: relative; } .video-icon { &:before { opacity: 0.8; // ideally, the SVG used here should be in HTML and reference the SVG sprite content: svg-uri( '' ); } bottom: 15px; right: 10px; position: absolute; } } } @mixin gdocs-logo($type) { &.g-#{$type}-logo { background: absolute-image-url( "/favicons/google_branding/logo_#{$type}_48px.png" ) no-repeat; } } .googledocs-onebox-logo { width: 60px; height: 50px; float: left; @include gdocs-logo("docs"); @include gdocs-logo("forms"); @include gdocs-logo("sheets"); @include gdocs-logo("slides"); @include gdocs-logo("calendar"); @include gdocs-logo("drive"); } // Google Calendar Placeholder .gdocs-onebox-splash { background-color: var(--primary-low-mid); color: var(--primary); border: 1px inset var(--primary); .gdocs-onebox-logo { display: inline-block; width: 128px; height: 128px; &.g-calendar-logo { background: absolute-image-url( "/favicons/google_branding/logo_calendar_128px.png" ) no-repeat; } } } aside.onebox .onebox-body .onebox-avatar { max-height: none; max-width: none; height: 60px; width: 60px; } blockquote { aside.onebox { @include post-aside; } } pre.onebox { margin-bottom: 0; } // -- Onebox Github Code Blob -- pre.onebox code ol.lines li:before { position: absolute; display: inline-block; width: 35px; left: -40px; color: #afafaf; text-align: right; padding-right: 5px; font-size: $font-down-1; line-height: $line-height-large; content: counter(li-counter); counter-increment: li-counter; } pre.onebox code ol { margin-left: 0; line-height: $line-height-large; } pre.onebox code { background-color: var(--primary-very-low); } pre.onebox code li { padding-left: 5px; } pre.onebox code ol.lines { position: relative; margin: 0 0 0 40px; } pre.onebox code ol.lines li { list-style-type: none; padding-left: 5px; margin-left: 0; border-left: 1px solid #cfcfcf; min-height: 1.5em; //show empty li lines white-space: pre; } pre.onebox code li.selected { background-color: var(--highlight-low-or-medium); } pre.onebox code { white-space: normal; } .onebox-warning-message { margin-top: 5px; color: var(--primary-med-or-secondary-med); img.emoji { width: 20px; height: 20px; float: none; } } // Onebox - Github - PR, Commit & Issue .onebox.githubpullrequest, .onebox.githubcommit, .onebox.githubissue { .onebox-body { h4 { margin-bottom: 5px; } > .github-icon { // For backwards compatibility with old onebox float: left; margin-right: 5px; } } .github-row { display: flex; } .github-icon-container { display: flex; align-items: flex-start; margin-right: 5px; } .github-icon { fill: var(--primary-high); width: 40px; height: 40px; } .branches { font-size: $font-down-1; code { word-break: break-all; } } .github-info-container { width: 100%; } .github-info { display: flex; align-items: center; flex-wrap: wrap; width: 100%; > div { margin: 2.5px 0; } > div:not(:last-child) { margin-right: 15px; } .lines { font-weight: bold; .added { color: var(--success); } .removed { color: var(--danger); } } } .onebox-avatar-inline { height: 20px; width: 20px; border-radius: 2px; float: none; margin: 0; padding: 0; vertical-align: middle; max-width: none; } .labels span { // !important required to override inline style attribute background-color: var(--primary-medium) !important; color: var(--secondary) !important; padding: 2px 4px !important; } .emoji { max-height: 15px; margin: 0.2em; min-width: 15px; } } .onebox.githubactions { h4 { margin-top: 5px; margin-bottom: 5px; } .github-row { display: flex; } .github-icon-container { display: flex; align-items: flex-start; margin-right: 5px; } .github-icon { fill: var(--primary-medium); width: var(--font-up-3); height: var(--font-up-3); } .github-icon-success { fill: var(--success); } .github-icon-failure { fill: var(--danger); } .github-icon-pending { fill: #dbab0a; } .github-info { color: var(--primary-high); } .github-run-number { color: var(--primary-medium); } } //Onebox - Github - Pull request .onebox-body .github-commit-status { background: #f5f5f5; border-radius: 5px; margin: 0 0 5px 100px; padding: 10px; } .onebox-body .status_tag { display: inline-block; color: #fff; padding: 1px 4px; border-radius: 3px; font-weight: bold; margin-bottom: 5px; text-transform: capitalize; } .onebox-body .build_status { padding: 2px; font-size: $font-down-1; } .onebox-body .status_tag.open { background-color: #6cc644; } .onebox-body .status_tag.merged { background-color: #6e5494; } .onebox-body .status_tag.closed { background-color: #bd2c00; } //Onebox - Twitter - Status aside.onebox.twitterstatus .onebox-body { h4 { margin-bottom: 0; } } // thumbnail, oddly, ONLY applies to twitter avatar .onebox.twitterstatus { .thumbnail, .thumbnail.onebox-avatar { width: 36px; height: 36px; margin-right: 12px; } .twitter-screen-name { font-size: var(--font-down-1); } .tweet .tweet-description { white-space: pre-line; } p, .tweet { clear: left; padding: 1em 0; .quoted { border: 1px solid var(--primary-low); padding: 0.5em 1em; margin-top: 1em; white-space: normal; .quoted-link { color: inherit; } .quoted-title { font-weight: bold; margin: 0.5em 0; padding: 0; span { font-weight: lighter; color: var(--primary-medium); } } div { margin-bottom: 5px; } } } .date { display: flex; line-height: $line-height-small; .timestamp { color: var(--primary-medium); } } .like, .retweet { align-items: center; color: var(--primary-medium); display: flex; margin-left: 0.75em; svg { fill: currentColor; margin-right: 0.25em; } } } // Onebox - Imgur/Flickr - Album .onebox.imgur-album, .onebox.flickr-album { .outer-box { position: absolute; z-index: z("base"); font-size: $font-down-1; color: #fff; background-color: rgba(0, 0, 0, 0.6); @include ellipsis; max-width: 100%; padding: 5px 0; .inner-box { padding-left: 10px; padding-right: 10px; overflow: hidden; @include ellipsis; .album-title { width: 100%; font-size: $font-up-1; line-height: $line-height-large; color: #ccc; text-decoration: none; } } } } // resize stackexchange onebox image aside.onebox.stackexchange .onebox-body { img:not(.onebox-avatar) { max-height: 60%; max-width: 10%; } .tags { color: gray; } } .onebox-metadata { color: var(--primary-med-or-secondary-med); } aside.onebox.xkcd .onebox-body img { float: none; max-height: unset; } // pdf onebox .onebox.pdf .onebox-body { .pdf-onebox-logo { width: 60px; height: 50px; float: left; background: absolute-image-url("/favicons/pdf_64px.png") no-repeat; background-size: 48px 48px; display: inline-block; } .filesize { color: gray; } } // allowlistedgeneric twitter labels .onebox.allowlistedgeneric, .onebox.whitelistedgeneric { .label1, .label2 { color: var(--primary-med-or-secondary-med); } .label1 { float: left; } .label2 { float: right; } } .onebox { &.allowlistedgeneric, &.whitelistedgeneric, &.gfycat, &.githubfolder { .site-icon { width: 16px; height: 16px; margin-right: 0.5em; } } &.category-onebox { border: 1px solid var(--primary-low); padding-left: calc(1em - 5px); margin-left: 5px; } } .onebox.gfycat p { span.label1 a { white-space: nowrap; } } .onebox.instagram { div.instagram-description { color: var(--primary-med-or-secondary-med); padding-top: 10px; } } .onebox.reddit { div.aspect-image-full-size { position: relative; } div.description { color: var(--primary-med-or-secondary-med); } } .onebox.githubfolder { .thumbnail { width: 60px; height: 60px; &.onebox-full-image { max-height: 60px; max-width: 60px; } } .label1 { color: var(--primary-med-or-secondary-med); } } .onebox.githubcommit { pre.message { padding: 0; } } // mobile specific style .mobile-view article.onebox-body { border-top: none; } // Google Photos Album .onebox.google-photos-album { @extend .imgur-album; } aside.onebox.mixcloud-preview { padding: 0; border: 0; height: 120px; background-color: #1c1f21; article.onebox-body img { padding: 0; max-height: 120px; } .onebox-body { a[href], a[href]:visited, a[href]:hover { color: #d1d1d1; } .video-icon { position: relative; top: 17px; height: 100%; float: left; padding-left: 6px; } .mixcloud-text { padding-left: 170px; font-family: sans-serif; h3 { font-size: 13px; font-weight: 300; margin: 0; padding-top: 15px; height: 20px; } h4 { font-size: 12px; font-weight: 200; } color: gray; } } } @supports (aspect-ratio: 1) { // Not supported on iOS < 15. For those devices, we just // use the fixed width/height attributes on the iframe .youtube-onebox { width: 100%; height: auto; aspect-ratio: 16/9; } } // Force oneboxed videos to 16:9 aspect ratio .onebox.video-onebox, .video-container { position: relative; padding: 0 0 56.25% 0; width: 100%; video { position: absolute; width: 100%; height: 100%; } } iframe.vimeo-onebox { width: 100%; height: auto; aspect-ratio: 16/9; } @supports not (aspect-ratio: auto) { iframe.vimeo-onebox { width: 690px; height: 388px; } } .video-container { .notice { background-color: var(--highlight-medium); padding: 10px 20px; position: absolute; width: calc(100% - 40px); animation: 0.5s fadeIn; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .onebox-placeholder-container { position: relative; width: 100%; padding: 0 0 48.25% 0; background-color: var(--primary-low); .placeholder-icon { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; &.image { &:before { opacity: 0.8; content: svg-uri( '' ); } } &.video { &:before { opacity: 0.8; content: svg-uri( '' ); } } &.audio { &:before { opacity: 0.4; content: svg-uri( '' ); } } &.map { &:before { opacity: 0.4; content: svg-uri( '' ); } } &.generic { &:before { opacity: 0.4; content: svg-uri( '' ); } } } } aside.onebox.preview-error .site-icon { width: 16px; height: 16px; margin-right: 0.5em; }