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 {