Styling tweaks for demo

3 files changed, 13 insertions, 8 deletions

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 6afe98d7..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
 .button,
 .button__count {
     align-items: center;
-    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -21,6 +19,8 @@
 
 // Buttons
 .button {
+    background: $color-button-background;
+    color: $color-button-text;
     font-weight: $font-weight-bold;
     padding-left: ($spacing-base * 1.25);
     padding-right: ($spacing-base * 1.25);
@@ -28,7 +28,7 @@
 
     &:hover,
     &:focus {
-        color: $color-button-text-hover;
+        background: $color-button-background-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,12 +65,14 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
+    background: $color-button-count-background;
+    color: $color-button-count-text;
     margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: $color-button-background;
+        border-right-color: $color-button-count-background;
         content: '';
         height: 0;
         position: absolute;
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
 a {
     border-bottom: 1px dotted currentColor;
     color: $color-link;
-    font-weight: $font-weight-bold;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index 2bdbb762..573b4cb0 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -5,7 +5,7 @@
 // Example players
 .plyr {
     border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    box-shadow: 0 2px 15px rgba(#000, 0.1);
     margin: $spacing-base auto;
 
     &.plyr--audio {
@@ -27,6 +27,10 @@
 }
 
 // Style full supported player
-.plyr__cite .icon {
-    margin-right: ceil($spacing-base / 6);
+.plyr__cite {
+    color: $color-gray-5;
+
+    .icon {
+        margin-right: ceil($spacing-base / 6);
+    }
 }