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;