mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 01:32:23 +08:00
615039f228
Bump onebox version to include new github rendering, and add relevant CSS Avatars are reduced in size significantly, and icons are added to easily differentiate PRs and commits. The 'Issue:' prefix is removed from issue oneboxes, to make them consistent with commits and PRs.
674 lines
14 KiB
SCSS
674 lines
14 KiB
SCSS
a.loading-onebox {
|
|
&:before {
|
|
content: "";
|
|
display: inline-flex;
|
|
float: left;
|
|
margin: 3px 5px 0 0;
|
|
position: relative;
|
|
height: 10px;
|
|
width: 10px;
|
|
border: 2px solid $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: $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: 10px;
|
|
}
|
|
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 $primary-low;
|
|
margin-bottom: 1em;
|
|
padding: 12px 25px 12px 12px;
|
|
font-size: $font-0;
|
|
|
|
header {
|
|
margin-bottom: 8px;
|
|
a[href] {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
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("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: dark-light-choose($tertiary, $tertiary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[href]:visited {
|
|
color: dark-light-choose($tertiary, $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: 10px;
|
|
&.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: 10px;
|
|
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 {
|
|
max-height: 500px;
|
|
width: calc(500px * var(--aspect-ratio));
|
|
max-width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: inherit;
|
|
max-width: initial;
|
|
max-height: initial;
|
|
float: none;
|
|
padding: 5px 5px 5px 5px;
|
|
}
|
|
}
|
|
|
|
[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: 10px;
|
|
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: blend-primary-secondary(30%);
|
|
color: $primary;
|
|
border: 1px inset $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;
|
|
}
|
|
}
|
|
|
|
// -- 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: dark-light-choose(#fff, #000);
|
|
}
|
|
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: dark-light-choose(#f8eec7, #541);
|
|
}
|
|
|
|
pre.onebox code {
|
|
white-space: normal;
|
|
}
|
|
|
|
// Onebox - Github - PR, Commit & Issue
|
|
.onebox.githubpullrequest,
|
|
.onebox.githubcommit,
|
|
.onebox.githubissue {
|
|
.github-icon {
|
|
float: left;
|
|
margin-right: 10px;
|
|
fill: $primary-high;
|
|
}
|
|
|
|
.onebox-avatar-inline {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
//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 $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: $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");
|
|
overflow: hidden;
|
|
font-size: $font-down-1;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
padding: 5px 0;
|
|
|
|
.inner-box {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
|
|
.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: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
// whitelistedgeneric twitter labels
|
|
.onebox.whitelistedgeneric {
|
|
.label1,
|
|
.label2 {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
.label1 {
|
|
float: left;
|
|
}
|
|
.label2 {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.onebox {
|
|
&.whitelistedgeneric,
|
|
&.gfycat {
|
|
.site-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.onebox.gfycat p {
|
|
span.label1 a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.onebox.instagram {
|
|
div.instagram-description {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
.onebox.githubcommit {
|
|
pre.message {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.onebox.twitterstatus {
|
|
.like,
|
|
.retweet {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
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 {
|
|
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: $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>'
|
|
);
|
|
}
|
|
}
|
|
&.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>'
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|