@import "common/foundation/variables"; @import "common/foundation/mixins"; a.loading-onebox { background: { image: image-url("spinner_96.gif"); position: 0; size: 20px; height: 25px; repeat: no-repeat; }; padding-left: 25px; } .onebox-result { margin-top: 15px; padding: 12px 25px 12px 12px; border-left: 5px solid $primary_border_color; background: lighten($secondary_background_color, 76%); font-size: 14px; > .source { margin-bottom: 12px; margin-right: 10px; display: block; color: $primary_text_color; position: relative; height: 20px; .info { a { color: black; text-decoration: none; padding-right: 10px; } position: absolute; font-size: 14px; 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: 0px !important; } 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: image-url("favicons/#{$image}.png"); background-repeat: no-repeat; padding-left: 20px; } } aside.onebox { margin-top: 15px; padding: 12px 25px 12px 12px; border-left: 5px solid $primary_border_color; background: lighten($secondary_background_color, 76%); font-size: 14px; header { a[href] { color: $primary_text_color; 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('amazon', 'amazon'); .onebox-body { clear: both; h3 { font-size: 1.17em; } a[href] { color: $link_color; text-decoration: none; } a[href]:visited { color: $link_color; } img { max-height: 80%; max-width: 25%; height: auto; float: left; margin-right: 10px; } } }