mediaControlsEfl.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /*
  2. * Copyright (C) 2009, 2010, 2011 Apple Inc. All rights reserved.
  3. * Copyright (C) 2011 Samsung Electronics
  4. *
  5. * Redistribution and use in source and binary forms, with or without
  6. * modification, are permitted provided that the following conditions
  7. * are met:
  8. * 1. Redistributions of source code must retain the above copyright
  9. * notice, this list of conditions and the following disclaimer.
  10. * 2. Redistributions in binary form must reproduce the above copyright
  11. * notice, this list of conditions and the following disclaimer in the
  12. * documentation and/or other materials provided with the distribution.
  13. *
  14. * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  15. * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  16. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  17. * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  18. * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  19. * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  20. * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  21. * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  22. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  23. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  24. */
  25. /* EFLWebKit media controls. Extends mediaControls.css */
  26. audio {
  27. width: 300px;
  28. height: 20px;
  29. }
  30. audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
  31. display: -webkit-flex;
  32. -webkit-flex-direction: row;
  33. -webkit-align-items: center;
  34. -webkit-user-select: none;
  35. position: relative;
  36. bottom: 0;
  37. width: 100%;
  38. z-index: 0;
  39. overflow: hidden;
  40. height: 20px;
  41. text-align: right;
  42. }
  43. video:-webkit-full-page-media::-webkit-media-controls-panel {
  44. bottom: 0px;
  45. }
  46. audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
  47. -webkit-appearance: media-mute-button;
  48. display: -webkit-flex;
  49. width: 20px;
  50. height: 20px;
  51. position: relative;
  52. z-index: 2;
  53. background-color: initial;
  54. border: initial;
  55. color: inherit;
  56. }
  57. audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
  58. -webkit-appearance: media-play-button;
  59. display: -webkit-flex;
  60. width: 20px;
  61. height: 20px;
  62. background-color: initial;
  63. border: initial;
  64. color: inherit;
  65. }
  66. audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
  67. -webkit-appearance: media-controls-background;
  68. display: -webkit-flex;
  69. -webkit-flex-direction: row;
  70. -webkit-align-items: center;
  71. -webkit-justify-content: flex-end;
  72. -webkit-flex: 1 1;
  73. -webkit-user-select: none;
  74. height: 20px;
  75. }
  76. audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
  77. -webkit-appearance: media-current-time-display;
  78. -webkit-user-select: none;
  79. display: -webkit-flex;
  80. height: 10px;
  81. padding: 5px;
  82. text-align: center;
  83. font-size: 10px;
  84. color: black;
  85. letter-spacing: normal;
  86. word-spacing: normal;
  87. line-height: normal;
  88. text-transform: none;
  89. text-indent: 0;
  90. text-shadow: none;
  91. text-decoration: none;
  92. font-style: normal;
  93. font-weight: normal;
  94. font-family: serif;
  95. }
  96. audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
  97. display: none;
  98. }
  99. audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
  100. -webkit-appearance: media-slider;
  101. display: -webkit-flex;
  102. -webkit-flex: 1 1;
  103. height: 20px;
  104. padding: 0px 2px;
  105. background-color: initial;
  106. border: initial;
  107. color: inherit;
  108. margin: initial;
  109. }
  110. audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
  111. -webkit-appearance: media-volume-slider-container;
  112. position: absolute;
  113. height: 100px;
  114. width: 20px;
  115. bottom: 20px;
  116. z-index: 1;
  117. }
  118. audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
  119. -webkit-appearance: media-volume-slider;
  120. display: none;
  121. background-color: initial;
  122. border: initial;
  123. color: inherit;
  124. margin: initial;
  125. }
  126. audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
  127. -webkit-appearance: media-seek-back-button;
  128. display: -webkit-flex;
  129. width: 20px;
  130. height: 20px;
  131. background-color: initial;
  132. border: initial;
  133. color: inherit;
  134. }
  135. audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
  136. -webkit-appearance: media-seek-forward-button;
  137. display: -webkit-flex;
  138. width: 20px;
  139. height: 20px;
  140. background-color: initial;
  141. border: initial;
  142. color: inherit;
  143. }
  144. audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
  145. -webkit-appearance: media-fullscreen-button;
  146. display: -webkit-flex;
  147. width: 20px;
  148. height: 20px;
  149. background-color: initial;
  150. border: initial;
  151. color: inherit;
  152. }
  153. audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
  154. display: none;
  155. background-color: initial;
  156. border: initial;
  157. color: inherit;
  158. }
  159. audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
  160. display: none;
  161. background-color: initial;
  162. border: initial;
  163. color: inherit;
  164. }
  165. audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
  166. -webkit-appearance: media-toggle-closed-captions-button;
  167. display: -webkit-flex;
  168. width: 20px;
  169. height: 20px;
  170. background-color: initial;
  171. border: initial;
  172. color: inherit;
  173. }
  174. audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
  175. -webkit-appearance: media-volume-slider-mute-button;
  176. display: none;
  177. background-color: initial;
  178. border: initial;
  179. color: inherit;
  180. }