mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 16:45:51 +08:00
fe20cb4b56
This prevents 'jumping' as the video loads. This change will require posts to be rebaked before it takes effect.
581 lines
11 KiB
SCSS
581 lines
11 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;
|
|
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");
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
&.user-onebox {
|
|
.fa {
|
|
margin-right: 5px;
|
|
}
|
|
.full-name,
|
|
.location {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// instagram fixes
|
|
.instagram-images {
|
|
clear: both;
|
|
position: relative;
|
|
|
|
.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;
|
|
}
|
|
|
|
.instagram-image {
|
|
padding: 5px 5px 5px 5px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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 - 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-wrap;
|
|
padding-top: 3px;
|
|
margin-left: 70px;
|
|
}
|
|
.date {
|
|
clear: left;
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
// Onebox - Imgur - Album
|
|
.onebox.imgur-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%;
|
|
}
|
|
}
|