Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

bbb.playback.css 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /*
  2. BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
  3. Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).
  4. This program is free software; you can redistribute it and/or modify it under the
  5. terms of the GNU Lesser General Public License as published by the Free Software
  6. Foundation; either version 3.0 of the License, or (at your option) any later
  7. version.
  8. BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
  9. WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
  10. PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
  11. You should have received a copy of the GNU Lesser General Public License along
  12. with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  13. */
  14. html{
  15. }
  16. body {
  17. font-family: Verdana;
  18. background: #fff;
  19. padding-top: 30px;
  20. }
  21. h1 {
  22. text-align:center
  23. }
  24. br{
  25. display:none
  26. }
  27. /*
  28. * clearfix
  29. * see: http://css-tricks.com/snippets/css/clear-fix/
  30. */
  31. .clearfix:after {
  32. visibility: hidden;
  33. display: block;
  34. font-size: 0;
  35. content: " ";
  36. clear: both;
  37. height: 0;
  38. }
  39. * html .clearfix { zoom: 1; } /* IE6 */
  40. *:first-child+html .clearfix { zoom: 1; } /* IE7 */
  41. #playbackArea {
  42. width: 1360px; /* #slide.width + #chat.width + #audioRecording.width */
  43. height: 650px;
  44. margin: 0 auto;
  45. overflow: hidden;
  46. }
  47. #audioRecordingWrapper{
  48. float: left;
  49. width: 800px;
  50. }
  51. #audioRecording{
  52. display: block;
  53. margin-left: auto;
  54. margin-right: auto;
  55. width: 100%;
  56. }
  57. #audioRecordingWrapper .acorn-controls, #videoRecordingWrapper .acorn-controls{
  58. position: relative;
  59. top: 0;
  60. left: -810px;
  61. width: 730px;
  62. }
  63. #playbackControls{
  64. width: 1360px;
  65. margin: 0 auto;
  66. margin-top: -50px;
  67. }
  68. #autoscrollWrapper{
  69. float: left;
  70. margin-left: 10px;
  71. margin-top: 8px;
  72. font-size: 14px;
  73. }
  74. .webcam{
  75. width: 402px;
  76. height: 300px;
  77. }
  78. #video{
  79. width: 402px;
  80. background: white;
  81. }
  82. /* To remove the white space on top of the audio tag in Firefox
  83. * See: http://stackoverflow.com/questions/9527453/firefox-and-html5-audio-element-dont-play-well-together
  84. */
  85. @-moz-document url-prefix() {
  86. #audioRecordingWrapper{
  87. position: relative;
  88. height: 28px;
  89. }
  90. #audioRecording {
  91. position: absolute;
  92. bottom: 0;
  93. }
  94. }
  95. #presentation {
  96. float: left;
  97. position: relative;
  98. height: 600px;
  99. }
  100. #slide {
  101. background-image: url('../logo.png');
  102. text-align: center;
  103. border: 0px solid #ccc;
  104. width: 800px;
  105. height: 600px; /* same as slide images */
  106. position: relative;
  107. top: -12px;
  108. }
  109. /* Visually hides text
  110. * see: yaccessibilityblog.com/library/css-clip-hidden-content.html
  111. */
  112. .visually-hidden {
  113. position: absolute !important;
  114. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  115. clip: rect(1px, 1px, 1px, 1px);
  116. padding: 0 !important;
  117. border: 0 !important;
  118. height: 1px !important;
  119. width: 1px !important;
  120. overflow: hidden;
  121. }
  122. #mediaArea {
  123. float: right;
  124. background: white;
  125. width: 402px;
  126. }
  127. #chatAndMediaArea{
  128. float: right;
  129. background: white;
  130. height: 600px;
  131. width: 402px;
  132. }
  133. #chat{
  134. margin: 0 auto;
  135. padding: 0 10px;
  136. border: 0px solid #ccc;
  137. height: 300px;
  138. overflow: auto;
  139. }
  140. #chat div{
  141. padding:0px;
  142. font-size:13px;
  143. }
  144. #big {display:none}
  145. #mid {display:none}
  146. #thumbnails {
  147. float: left;
  148. width: 130px;
  149. height: 600px; /* same as #slide */
  150. background: #fff;
  151. border: 0px solid #bbb;
  152. margin-right: 10px;
  153. overflow-y: scroll;
  154. overflow-x: hidden;
  155. }
  156. #thumbnails img.thumbnail {
  157. width: 100px;
  158. height: auto;
  159. border: 0px solid #eee;
  160. margin: 5px;
  161. cursor: pointer;
  162. vertical-align: bottom;
  163. }
  164. #thumbnails .thumbnail-wrapper {
  165. position: relative;
  166. margin: 0;
  167. padding: 0;
  168. }
  169. #thumbnails .thumbnail-wrapper.active {
  170. background-color: #D9EDF7;
  171. }
  172. #thumbnails .thumbnail-wrapper.active img.thumbnail {
  173. border-color: #3A87AD;
  174. }
  175. #thumbnails .thumbnail-label {
  176. color: #fff;
  177. background: #3A87AD;
  178. font-weight: bold;
  179. font-size: 12px;
  180. position: absolute;
  181. bottom: 5px;
  182. left: 5px;
  183. max-width: 90px;
  184. text-align: center;
  185. display: none;
  186. padding: 2px 5px;
  187. cursor: pointer;
  188. }
  189. #accInfo{
  190. margin: 20px auto;
  191. font-size:0.75em;
  192. text-align: center;
  193. clear: both;
  194. padding-top: 75px;
  195. }
  196. #footer{
  197. margin: 20px auto;
  198. font-size:0.75em;
  199. color: #666;
  200. text-align: center;
  201. clear: both;
  202. padding-top: 35px;
  203. }
  204. .circle {
  205. height: 12px;
  206. width: 12px;
  207. border-radius: 50%;
  208. }
  209. #cursor {
  210. position: relative;
  211. background: red;
  212. z-index: 10;
  213. }
  214. #load-recording-msg {
  215. text-align: center;
  216. height: 50px;
  217. width: 200px;
  218. position: absolute;
  219. left: 50%;
  220. margin-left: -100px;
  221. top:60%;
  222. }