Permalink
Browse files

Add further theme options for player controls

Allow to configure

* info box typography
* border radius of info box and classic progress bar

Add SassDoc groups for player control variants.
  • Loading branch information...
1 parent 418f90c commit 210cf3f0d57eb3dcc4c9f2d02ab6ed3d3840676f @tf tf committed Jun 30, 2016
View
@@ -10,4 +10,6 @@ groups:
indicators: "Indicators"
page-colors: "Page Colors"
page-typography: "Page Typography"
+ classic-player-controls: "Classic Player Controls"
+ slim-player-controls: "Classic Player Controls"
descriptionPath: app/assets/stylesheets/pageflow/themes/default/README.md
@@ -1,13 +1,22 @@
+////
+/// @group classic-player-controls
+////
+
/// Type of icons to use:
///
/// - `"icon-font"`: Circular buttons with font awesome icons.
///
-/// - `"sprite"`: Custom icons from `player_controls_sprite.png` in theme
-/// directory.
+/// - `"sprite"`: Use sprite image for play controls.
$classic-player-controls-icons: "icon-font" !default;
$classic-player-controls-icon-font-option: () !default;
+/// Image to use if `$classic-player-controls-icons` is `"sprite"`:
+///
+/// - `"default"`: Use sprite from default image.
+///
+/// - `"custom"`: Custom sprite from `player_controls_sprite.png` in
+/// theme directory.
$classic-player-controls-images: "default" !default;
@import "./classic/container";
@@ -1,3 +1,8 @@
+////
+/// @group classic-player-controls
+////
+
+/// Base typography settings for player controls.
$classic-player-controls-typography: $player-controls-typography !default;
%player_controls {
@@ -1,9 +1,16 @@
+////
+/// @group classic-player-controls
+////
+
/// Background color of the control bar.
$classic-player-controls-background-color: #191919 !default;
/// Color of the border around the control bar.
$classic-player-controls-border-color: #505050 !default;
+/// Color of the vertical separator right from the play button.
+$classic-player-controls-separator-color: $classic-player-controls-border-color !default;
+
/// Color of control bar text, current time and duration.
$classic-player-controls-text-color: #ddd !default;
@@ -16,6 +23,13 @@ $classic-player-controls-progress-bar-color: $main-color !default;
/// Color of the part of the progress bar indicating the load progress.
$classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.4) !default;
+/// Border radius of the progress bar.
+$classic-player-controls-progress-bar-border-radius: 4px !default;
+
+/// Width of the handle element. Can be used to ensure correct
+/// positioning of the handle when sprite images are used.
+$classic-player-controls-handle-width: 24px !default;
+
%player_controls {
&-control_bar {
position: absolute;
@@ -39,7 +53,7 @@ $classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0
left: 64px;
width: 0;
height: 60px;
- border-right: 2px solid $classic-player-controls-border-color;
+ border-right: 2px solid $classic-player-controls-separator-color;
}
@include phone {
@@ -110,13 +124,13 @@ $classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0
&-progress_bar_inner {
height: 100%;
- border-radius: 4px;
+ border-radius: $classic-player-controls-progress-bar-border-radius;
background-color: $classic-player-controls-progress-bar-background-color;
}
&-play_progress,
&-load_progress {
- border-radius: 4px;
+ border-radius: $classic-player-controls-progress-bar-border-radius;
position: absolute;
height: 100%;
}
@@ -135,7 +149,7 @@ $classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0
top: -15px;
left: 0;
height: 40px;
- width: 24px;
+ width: $classic-player-controls-handle-width;
&:before {
content: "";
@@ -1,9 +1,25 @@
+////
+/// @group classic-player-controls
+////
+
+/// Background color of the info box.
$classic-player-controls-info-box-background-color: rgba(39, 39, 39, 0.95) !default;
+/// Color of the text inside the info box.
$classic-player-controls-info-box-text-color: #fff !default;
+/// Text color of the info box header.
+$classic-player-controls-info-box-header-color: null !default;
+
+/// Typography settings for the info box.
$classic-player-controls-info-box-typography: () !default;
+/// Typography settings for the info box header.
+$classic-player-controls-info-box-header-typography: () !default;
+
+/// Display rounded corners at the top of the info box.
+$classic-player-controls-info-box-border-radius: 4px !default;
+
%player_controls {
&-info_box {
width: 87%;
@@ -22,6 +38,14 @@ $classic-player-controls-info-box-typography: () !default;
font-size: 0.84em;
}
+ h3 {
+ color: $classic-player-controls-info-box-header-color;
+
+ @include typography(
+ $classic-player-controls-info-box-header-typography
+ );
+ }
+
h3,
p {
margin: 15px 3%;
@@ -44,17 +68,19 @@ $classic-player-controls-info-box-typography: () !default;
width: 100%;
height: 100%;
background-color: $classic-player-controls-info-box-background-color;
- border: solid 3px $classic-player-controls-info-box-background-color;
+ border: solid 3px transparent;
z-index: -1;
- border-radius: 4px;
+
+ border-top-left-radius: $classic-player-controls-info-box-border-radius;
+ border-top-right-radius: $classic-player-controls-info-box-border-radius;
}
}
.js &-info_box {
pointer-events: none;
- margin: 0 0 63px 0;
+ margin: 0 0 54px 0;
width: 434px;
- bottom: 0;
+ bottom: 9px;
margin-bottom: 63px;
position: absolute;
left: 50%;
@@ -1,3 +1,8 @@
+////
+/// @group slim-player-controls
+////
+
+/// Base typograpy settings.
$slim-player-controls-typography: $player-controls-typography !default;
%player_controls {
@@ -1,3 +1,7 @@
+////
+/// @group slim-player-controls
+////
+
/// Color of player icons and text.
$slim-player-controls-color: #fff !default;
@@ -1,3 +1,7 @@
+////
+/// @group slim-player-controls
+////
+
/// Background color of info box.
$slim-player-controls-info-box-background-color: rgba(17, 17, 17, 0.9) !default;
@@ -7,6 +11,12 @@ $slim-player-controls-info-box-text-color: #fff !default;
/// Color of separator line between info box header and info box text.
$slim-player-controls-info-box-separator-line-color: #888 !default;
+/// Typography settings for the info box.
+$slim-player-controls-info-box-typography: () !default;
+
+/// Typography settings for the info box header.
+$slim-player-controls-info-box-header-typography: () !default;
+
%player_controls {
&-info_box {
width: 87%;
@@ -25,15 +35,23 @@ $slim-player-controls-info-box-separator-line-color: #888 !default;
h3,
p {
- font-size: 1.1em;
- margin: 15px 0;
- width: 100%;
- max-width: none;
+ @include typography(
+ $slim-player-controls-info-box-typography, (
+ font-size: 1.1em,
+ margin: 15px 0,
+ width: 100%,
+ max-width: none
+ )
+ );
}
h3 {
border-bottom: solid 1px $slim-player-controls-info-box-separator-line-color;
padding-bottom: 5px;
+
+ @include typography(
+ $slim-player-controls-info-box-header-typography
+ );
}
&.title_empty h3,

0 comments on commit 210cf3f

Please sign in to comment.