From 07fba6f1d8322fbd596f0977b93b5163028924d8 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 10 Feb 2017 16:16:33 +0100
Subject: [PATCH] Allow overriding typography of slim control bar text

Allow overriding for phone, desktop or in general.
---
 .../default/mixins/indicator_typography.scss      | 10 +++++++---
 .../default/player_controls/slim/control_bar.scss | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss b/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss
index 9358e9f30e..23d0380579 100644
--- a/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/mixins/indicator_typography.scss
@@ -8,9 +8,9 @@ $indicator-typography: () !default;
 /// Typography of indicators on phone.
 $indicator-phone-typography: () !default;
 
-@mixin indicator-typography {
+@mixin indicator-typography($overrides: (), $desktop-overrides: (), $phone-overrides: ()) {
   @include standard-typography(
-    $indicator-typography,
+    map-merge($indicator-typography, $overrides),
     (
       font-size: 0.92em,
       letter-spacing: 0.2em,
@@ -18,9 +18,13 @@ $indicator-phone-typography: () !default;
     )
   );
 
+  @include desktop {
+    @include typography($desktop-overrides);
+  }
+
   @include phone {
     @include standard-typography(
-      $indicator-phone-typography,
+      map-merge($indicator-phone-typography, $phone-overrides),
       (
         font-size: 0.8em,
         letter-spacing: 0.1em,
diff --git a/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss b/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss
index ad7dc2468a..8e4ac4473b 100644
--- a/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss
@@ -17,6 +17,15 @@ $slim-player-controls-progress-bar-color: $main-color !default;
 /// Color of the part of the progress bar indicating the load progress.
 $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2) !default;
 
+/// Typography for text displayed next to play button
+$slim-player-controls-control-bar-text-typography: () !default;
+
+/// Typography for text displayed next to play button in desktop layout
+$slim-player-controls-control-bar-text-desktop-typography: () !default;
+
+/// Typography for text displayed next to play button in phone layout
+$slim-player-controls-control-bar-text-phone-typography: () !default;
+
 %player_controls {
   &-control_bar {
     position: absolute;
@@ -50,7 +59,11 @@ $slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2)
     color: $slim-player-controls-color;
     text-shadow: 1px 1px 4px $indicator-text-shadow-color;
 
-    @include indicator-typography;
+    @include indicator-typography(
+      $overrides: $slim-player-controls-control-bar-text-typography,
+      $phone-overrides: $slim-player-controls-control-bar-text-phone-typography,
+      $desktop-overrides: $slim-player-controls-control-bar-text-desktop-typography
+    );
 
     @include phone {
       left: 50px;