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: 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-bottom: 1em; padding: 1em; font-size: $font-0; background: var(--secondary); header { align-items: center; display: flex; margin-bottom: 1em; a[href] { color: var(--primary-med-or-secondary-med); text-decoration: none; } } @include onebox-favicon("stackexchange", "stackexchange"); @include onebox-favicon("twitterstatus", "twitter"); @include onebox-favicon("wikipedia", "wikipedia"); @include onebox-favicon("githubblob", "github"); @include onebox-favicon("githubcommit", "github"); @include onebox-favicon("githubpullrequest", "github"); @include onebox-favicon("githubissue", "github"); @include onebox-favicon("githubfile", "github"); @include onebox-favicon("githubgist", "github"); @include onebox-favicon("amazon", "amazon"); @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; width: auto; float: left; margin-right: 1em; &.onebox-full-image { max-height: none; max-width: none; width: initial; height: initial; } } [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; } } .instagram-video-icon { &:before { opacity: 0.8; // ideally, the SVG used here should be in HTML and reference the SVG sprite content: svg-uri( '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>' ); } bottom: 15px; right: 10px; position: absolute; } } } @mixin gdocs-logo($type) { &.g-#{$type}-logo { background: 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: 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; } .github-content { margin: 5px 0 0 0; word-break: break-word; } .labels span { // !important required to override inline style attribute background-color: var(--primary-medium) !important; color: var(--secondary) !important; padding: 2px 4px !important; } } //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-body .github-content-right { margin-left: 100px; } //Onebox - Twitter - Status aside.onebox.twitterstatus .onebox-body { h4 { margin-bottom: 0; } } // thumbnail, oddly, ONLY applies to twitter avatar .onebox.twitterstatus { .thumbnail { width: 48px; height: 48px; } p, .tweet { white-space: pre-line; padding-top: 3px; margin-left: 70px; .quoted { border: 1px solid var(--primary-low); padding: 0px 14px 0px 12px; white-space: normal; margin-top: 15px; .quoted-link { color: inherit; } .quoted-title { font-weight: bold; margin: 5px 2px; span { font-weight: lighter; color: var(--primary-medium); } } div { margin-bottom: 5px; } } } .date { clear: left; } } // 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: 690px; 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); } .onebox.xkcd .onebox-body { img { max-width: 100% !important; float: none !important; } } // pdf onebox .onebox.pdf .onebox-body { .pdf-onebox-logo { width: 60px; height: 50px; float: left; background: 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; } } .onebox.twitterstatus { .like, .retweet { color: var(--primary-med-or-secondary-med); padding-left: 10px; svg { fill: currentColor; vertical-align: middle; } } } // mobile specific style .mobile-view article.onebox-body { border-top: none; } // Google Photos Album .onebox.google-photos-album { @extend .imgur-album; } // 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%; } } .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; &.video { &:before { opacity: 0.8; content: svg-uri( '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="grey" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>' ); } } &.audio { &:before { opacity: 0.4; content: svg-uri( '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.99 32.01c0-21.71-21.1-37.01-41.6-30.51L150.4 96c-13.3 4.2-22.4 16.5-22.4 30.5v261.42c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64V214.31l256-75.02v184.63c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64l-.01-351.99z"></path></svg>' ); } } &.map { &:before { opacity: 0.4; content: svg-uri( '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>' ); } } &.generic { &:before { opacity: 0.4; content: svg-uri( '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"></path></svg>' ); } } } }