diff --git a/js/page/show.js b/js/page/show.js index ea04f9f06..a7c28030c 100644 --- a/js/page/show.js +++ b/js/page/show.js @@ -60,6 +60,9 @@ var FormatItem = React.createClass({ {mediaType == 'video' ? : null} +
+ +
); diff --git a/scss/_gui.scss b/scss/_gui.scss index 677622086..09a1b950a 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -1,5 +1,34 @@ @import "global"; +@mixin text-link($color: $color-primary, $hover-opacity: 0.70) { + color: $color; + .icon + { + &:first-child { + padding-right: 5px; + } + &:last-child:not(:only-child) { + padding-left: 5px; + } + } + + &:not(.no-underline) { + text-decoration: underline; + .icon { + text-decoration: none; + } + } + &:hover + { + opacity: $hover-opacity; + transition: opacity .225s ease; + text-decoration: underline; + .icon { + text-decoration: none; + } + } +} + .icon-fixed-width { /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */ width: (18em / 14); @@ -151,32 +180,12 @@ input[type="text"], input[type="search"] } .button-text { - color: $color-primary; - .icon - { - &:first-child { - padding-right: 5px; - } - &:last-child:not(:only-child) { - padding-left: 5px; - } - } - - &:not(.no-underline) { - text-decoration: underline; - .icon { - text-decoration: none; - } - } - &:hover - { - opacity: 0.70; - transition: opacity .225s ease; - text-decoration: underline; - .icon { - text-decoration: none; - } - } + @include text-link(); +} +.button-text-help +{ + @include text-link(#5b8c80); + font-size: 0.8em; } .icon:only-child {