diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 5448ab78a7a..1782ee3d668 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -1,534 +1,536 @@
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;
- }
+ &: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;
+ @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;
- }
- }
- }
+ 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;
- }
- }
- }
+ .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;
- }
- }
+ .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;
- }
+ &.#{$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;
+ 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;
- }
- }
+ 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("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;
+ .onebox-body {
+ clear: both;
- h3,
- h4 {
- font-size: $font-up-1;
- margin: 0 0 10px 0;
- }
+ 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] {
+ color: dark-light-choose($tertiary, $tertiary);
+ text-decoration: none;
+ }
- a[href]:visited {
- color: dark-light-choose($tertiary, $tertiary);
- }
+ 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;
- }
- }
+ 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;
- }
+ [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;
+ // 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;
- }
- }
+ 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%;
+ // 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;
- }
- }
+ 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%;
- }
- }
+ [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;
- }
+ // tighten bottom margin on last para
+ p:last-child {
+ margin-bottom: 4px;
+ }
- // twitter fixes
- .tweet-images {
- display: block;
- clear: both;
+ // twitter fixes
+ .tweet-images {
+ display: block;
+ clear: both;
- img.tweet-image {
- margin-top: 1em;
- max-width: 100%;
- max-height: 100%;
- float: none;
- }
- }
+ 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;
- }
- }
+ &.user-onebox {
+ .fa {
+ margin-right: 5px;
+ }
+ .full-name,
+ .location {
+ margin-right: 10px;
+ }
+ }
- // instagram fixes
- .instagram-images {
- clear: both;
+ // instagram fixes
+ .instagram-images {
+ clear: both;
- .instagram-image {
- padding: 5px 5px 5px 5px;
- max-width: 100%;
- max-height: 100%;
- float: none;
- }
- }
- }
+ .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;
- }
+ &.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");
+ 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;
- }
- }
+ 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;
+ max-height: none;
+ max-width: none;
+ height: 60px;
+ width: 60px;
}
blockquote {
- aside.onebox {
- @include post-aside;
- }
+ 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;
+ 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;
+ margin-left: 0;
+ line-height: $line-height-large;
}
pre.onebox code {
- background-color: dark-light-choose(#fff, #000);
+ background-color: dark-light-choose(#fff, #000);
}
pre.onebox code li {
- padding-left: 5px;
+ padding-left: 5px;
}
pre.onebox code ol.lines {
- position: relative;
- margin: 0 0 0 40px;
+ 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;
+ 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);
+ background-color: dark-light-choose(#f8eec7, #541);
}
pre.onebox code {
- white-space: normal;
+ white-space: normal;
}
//Onebox - Github - Pull request
.onebox-body .github-commit-status {
- background: #f5f5f5;
- border-radius: 5px;
- margin: 0 0 5px 100px;
- padding: 10px;
+ 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;
+ 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;
+ padding: 2px;
+ font-size: $font-down-1;
}
.onebox-body .status_tag.open {
- background-color: #6cc644;
+ background-color: #6cc644;
}
.onebox-body .status_tag.merged {
- background-color: #6e5494;
+ background-color: #6e5494;
}
.onebox-body .status_tag.closed {
- background-color: #bd2c00;
+ background-color: #bd2c00;
}
.onebox-body .github-content-right {
- margin-left: 100px;
+ margin-left: 100px;
}
//Onebox - Twitter - Status
aside.onebox.twitterstatus .onebox-body {
- h4 {
- margin-bottom: 0;
- }
+ 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;
- }
+ .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;
+ .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;
+ .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;
- }
- }
- }
+ .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%;
- }
+ img:not(.onebox-avatar) {
+ max-height: 60%;
+ max-width: 10%;
+ }
- .tags {
- color: gray;
- }
+ .tags {
+ color: gray;
+ }
}
.onebox-metadata {
- color: dark-light-choose($primary-medium, $secondary-medium);
+ color: dark-light-choose($primary-medium, $secondary-medium);
}
.onebox.xkcd .onebox-body {
- img {
- max-width: 100% !important;
- float: none !important;
- }
+ 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;
- }
+ .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;
- }
+ .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;
- }
- }
+ &.whitelistedgeneric,
+ &.gfycat {
+ .site-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 3px;
+ }
+ }
}
.onebox.gfycat p {
- span.label1 a {
- white-space: nowrap;
- }
+ span.label1 a {
+ white-space: nowrap;
+ }
}
.onebox.instagram {
- div.instagram-description {
- color: dark-light-choose($primary-medium, $secondary-medium);
- padding-top: 10px;
- }
+ div.instagram-description {
+ color: dark-light-choose($primary-medium, $secondary-medium);
+ padding-top: 10px;
+ }
}
.onebox.githubcommit {
- pre.message {
- padding: 0;
- }
+ pre.message {
+ padding: 0;
+ }
}
// mobile specific style
.mobile-view article.onebox-body {
- border-top: none;
+ border-top: none;
}