Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge remote-tracking branch 'anastasia/FLUID-4649'

* anastasia/FLUID-4649:
  FLUID-4649: Ensure buttons enlarge with 'make inputs bigger'; height of control bar still doesn't enlarge
  • Loading branch information...
commit 2afc880e5bbf25b8881da221a5d27f2086f25513 2 parents 50a7791 + 6ce5f00
@jobara jobara authored
Showing with 49 additions and 66 deletions.
  1. +13 −27 css/VideoPlayer.css
  2. +36 −39 html/videoPlayer_template.html
View
40 css/VideoPlayer.css
@@ -56,6 +56,10 @@
width:100%;
position: relative;
pointer-events: all;
+ background-color: rgba(242, 242, 242, 0.75);
+ height: 2.05em;
+ box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.15);
+ padding-bottom: 1px; /* For Safari and Chrome. Without padding, button overlaps container border */
}
@@ -64,11 +68,12 @@
***********/
.fl-videoPlayer-button {
- width: 100%;
- height: 100%;
+ width: 2em;
+ height: 2em;
border: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
+ font-size: 1em;
}
.fl-videoPlayer-button:focus {
background-color: #3195C7;
@@ -78,28 +83,20 @@
.fl-theme-uio-by .fl-videoPlayer-button:focus,
.fl-theme-uio-bw .fl-videoPlayer-button:focus { background-color: #000000 !important; }
-.fl-videoPlayer-controller-buttons .fl-videoPlayer-button,
-.fl-videoPlayer-controller-buttons .fl-videoPlayer-button:hover {
+.fl-videoPlayer-controller .fl-videoPlayer-button,
+.fl-videoPlayer-controller .fl-videoPlayer-button:hover {
background-size: cover;
}
-.fl-videoPlayer-controller-buttons .fl-videoPlayer-button:hover {
+.fl-videoPlayer-controller .fl-videoPlayer-button:hover {
background-color: rgba(153, 153, 153, 0.45);
box-shadow: inset 0 0 0.25em rgba(0, 0, 0, 0.30);
}
-.fl-videoPlayer-controller-buttons {
- background-color: rgba(242, 242, 242, 0.75);
- width: 100%;
- height: 2.05em;
- box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.15);
- padding-bottom: 1px; /* For Safari and Chrome. Without padding, button overlaps container border */
-}
-
-.fl-theme-uio-by .fl-videoPlayer-controller-buttons,
-.fl-theme-uio-bw .fl-videoPlayer-controller-buttons { box-shadow: none !important; }
+.fl-theme-uio-by .fl-videoPlayer-controller,
+.fl-theme-uio-bw .fl-videoPlayer-controller { box-shadow: none !important; }
-.fl-videoPlayer-controller-buttons * {
+.fl-videoPlayer-controller * {
display: inline-block;
}
@@ -117,21 +114,10 @@
}
.fl-videoPlayer-controller-buttons-main {
float: left;
- width: 4.5em;
-}
-.fl-videoPlayer-controller-buttons-main > * {
- height: 100%;
- width: 45%;
}
.fl-videoPlayer-controller-buttons-secondary {
float: right;
- width: 7em;
-}
-.fl-videoPlayer-controller-buttons-secondary > * {
- height: 100%;
- width: 30%;
}
-
a.fl-videoPlayer-button-wrapper {
text-decoration: none;
}
View
75 html/videoPlayer_template.html
@@ -9,53 +9,50 @@
<div class="flc-videoPlayer-captionArea fl-videoPlayer-captionArea"></div>
<div class="flc-videoPlayer-controller fl-videoPlayer-controller">
-
- <div class="fl-videoPlayer-controller-buttons">
- <div class="fl-videoPlayer-controller-buttons-main">
- <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button"></button>
-
- <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
- <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button"></button>
- <div class="flc-videoPlayer-volumeControl"></div>
- </div>
+ <div class="fl-videoPlayer-controller-buttons-main">
+ <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button"></button>
+
+ <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
+ <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button"></button>
+ <div class="flc-videoPlayer-volumeControl"></div>
+ </div>
+ </div>
+
+ <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
+ <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber">
+ <a class="ui-slider-handle" href="#">
+ <span class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></span>/<span class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></span>
+ </a>
</div>
-
- <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
- <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber">
- <a class="ui-slider-handle" href="#">
- <span class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></span>/<span class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></span>
- </a>
- </div>
- <div class="flc-videoPlayer-buffered-progress fl-videoPlayer-buffered-progress">
- <div class="flc-progress fl-progress-popUp">
- <div class="flc-progress-bar fl-progress-theBar">
- <div class="flc-progress-indicator fl-progress-indicator">
- </div>
+ <div class="flc-videoPlayer-buffered-progress fl-videoPlayer-buffered-progress">
+ <div class="flc-progress fl-progress-popUp">
+ <div class="flc-progress-bar fl-progress-theBar">
+ <div class="flc-progress-indicator fl-progress-indicator">
</div>
</div>
</div>
</div>
+ </div>
- <div class="fl-videoPlayer-controller-buttons-secondary">
- <div class="flc-videoPlayer-captionControls-container fl-videoPlayer-captions">
- <button class="flc-videoPlayer-captions-button fl-videoPlayer-button"></button>
- <ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
- <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
- <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
- </ul>
- </div>
-
- <div class="flc-videoPlayer-transcriptControls-container fl-videoPlayer-transcript">
- <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button"></button>
- <ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
- <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
- <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
- </ul>
- </div>
-
- <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button"></button>
+ <div class="fl-videoPlayer-controller-buttons-secondary">
+ <div class="flc-videoPlayer-captionControls-container fl-videoPlayer-captions">
+ <button class="flc-videoPlayer-captions-button fl-videoPlayer-button"></button>
+ <ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
+ <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+ <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+ </ul>
+ </div>
+
+ <div class="flc-videoPlayer-transcriptControls-container fl-videoPlayer-transcript">
+ <button class="flc-videoPlayer-transcripts-button fl-videoPlayer-button"></button>
+ <ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
+ <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+ <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+ </ul>
</div>
+
+ <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-optional fl-videoPlayer-button"></button>
</div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.