You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

main.css 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. * {
  2. -webkit-user-select: none;
  3. user-select: none;
  4. }
  5. html, body{
  6. margin:0px;
  7. height:100%;
  8. color: #424242;
  9. font-family:'Helvetica Neue', Helvetica, sans-serif;
  10. font-weight: 400;
  11. background: #000000;
  12. overflow-x: hidden;
  13. }
  14. #chatspace,
  15. #contactlist {
  16. display:none;
  17. position:absolute;
  18. float: right;
  19. top: 0px;
  20. bottom: 0px;
  21. right: 0px;
  22. width: 20%;
  23. max-width: 200px;
  24. overflow: hidden;
  25. /* background-color:#dfebf1;*/
  26. background-color:#FFFFFF;
  27. border-left:1px solid #424242;
  28. z-index: 5;
  29. }
  30. #settings {
  31. display:none;
  32. }
  33. #nowebrtc {
  34. display:none;
  35. }
  36. #settingsButton {
  37. visibility: hidden;
  38. }
  39. .toolbar_span {
  40. display: inline-block;
  41. position: relative;
  42. }
  43. .button {
  44. display: inline-block;
  45. position: relative;
  46. color: #FFFFFF;
  47. top: 0px;
  48. padding: 10px 0px;
  49. width: 38px;
  50. cursor: pointer;
  51. font-size: 11pt;
  52. text-align: center;
  53. text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.6);
  54. z-index: 1;
  55. }
  56. .toolbar_span>span {
  57. display: inline-block;
  58. position: absolute;
  59. font-size: 7pt;
  60. color: #ffffff;
  61. text-align:center;
  62. cursor: pointer;
  63. }
  64. #chatButton {
  65. -webkit-transition: all .5s ease-in-out;
  66. -moz-transition: all .5s ease-in-out;
  67. transition: all .5s ease-in-out;
  68. }
  69. /*#ffde00*/
  70. #chatButton.active {
  71. -webkit-text-shadow: -1px 0 10px #00ccff,
  72. 0 1px 10px #00ccff,
  73. 1px 0 10px #00ccff,
  74. 0 -1px 10px #00ccff;
  75. -moz-text-shadow: 1px 0 10px #00ccff,
  76. 0 1px 10px #00ccff,
  77. 1px 0 10px #00ccff,
  78. 0 -1px 10px #00ccff;
  79. text-shadow: -1px 0 10px #00ccff,
  80. 0 1px 10px #00ccff,
  81. 1px 0 10px #00ccff,
  82. 0 -1px 10px #00ccff;
  83. }
  84. #recordButton {
  85. -webkit-transition: all .5s ease-in-out;
  86. -moz-transition: all .5s ease-in-out;
  87. transition: all .5s ease-in-out;
  88. }
  89. /*#ffde00*/
  90. #recordButton.active {
  91. -webkit-text-shadow: -1px 0 10px #00ccff,
  92. 0 1px 10px #00ccff,
  93. 1px 0 10px #00ccff,
  94. 0 -1px 10px #00ccff;
  95. -moz-text-shadow: 1px 0 10px #00ccff,
  96. 0 1px 10px #00ccff,
  97. 1px 0 10px #00ccff,
  98. 0 -1px 10px #00ccff;
  99. text-shadow: -1px 0 10px #00ccff,
  100. 0 1px 10px #00ccff,
  101. 1px 0 10px #00ccff,
  102. 0 -1px 10px #00ccff;
  103. }
  104. a.button:hover,
  105. a.bottomToolbarButton:hover {
  106. top: 0px;
  107. cursor: pointer;
  108. background: rgba(255, 255, 255, 0.1);
  109. border-radius: 6px;
  110. background-clip: padding-box;
  111. -webkit-border-radius: 6px;
  112. -webkit-background-clip: padding-box;
  113. }
  114. .no-fa-video-camera, .fa-microphone-slash {
  115. color: #636363;
  116. }
  117. .header_button_separator {
  118. display: inline-block;
  119. position:relative;
  120. top: 5;
  121. width: 1px;
  122. height: 20px;
  123. background: #373737;
  124. }
  125. .bottom_button_separator {
  126. display: inline-block;
  127. position: relative;
  128. left: 5;
  129. width: 20px;
  130. height: 1px;
  131. background: #373737;
  132. }
  133. input[type='text'], input[type='password'], textarea {
  134. display: inline-block;
  135. font-size: 14px;
  136. padding: 5px;
  137. background: #f3f3f3;
  138. border-radius: 3px;
  139. font-weight: 100;
  140. line-height: 20px;
  141. height: 40px;
  142. color: #333;
  143. text-align: left;
  144. border:1px solid #ACD8F0;
  145. outline: none; /* removes the default outline */
  146. resize: none; /* prevents the user-resizing, adjust to taste */
  147. }
  148. input[type='text'], input[type='password'], textarea:focus {
  149. box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
  150. replacement to the outline */
  151. }
  152. textarea {
  153. overflow: hidden;
  154. word-wrap: break-word;
  155. resize: horizontal;
  156. }
  157. button.no-icon {
  158. padding: 0 1em;
  159. }
  160. button {
  161. border: none;
  162. height: 35px;
  163. padding: 0 1em 0 2em;
  164. position: relative;
  165. border-radius: 3px;
  166. font-weight: bold;
  167. color: #fff;
  168. line-height: 35px;
  169. background: #2c8ad2;
  170. }
  171. button, input, select, textarea {
  172. margin: 0;
  173. vertical-align: baseline;
  174. }
  175. button, input[type="button"], input[type="reset"], input[type="submit"] {
  176. cursor: pointer;
  177. -webkit-appearance: button;
  178. }
  179. form {
  180. display: block;
  181. }
  182. #downloadlog {
  183. position: absolute;
  184. bottom: 5;
  185. left: 5;
  186. overflow: visible;
  187. z-index: 100;
  188. color: rgba(255,255,255,.50);
  189. }
  190. #bottomToolbar {
  191. display:block;
  192. position: absolute;
  193. right: 0;
  194. margin-right: 5px;
  195. bottom: 40px;
  196. width: 29px;
  197. border-radius: 6px;
  198. color: #FFF;
  199. border: 1px solid rgba(256, 256, 256, 0.2);
  200. background: rgba(0,0,0,0.8);
  201. z-index: 6; /*+1 from #remoteVideos*/
  202. }
  203. .bottomToolbarButton {
  204. display: inline-block;
  205. position: relative;
  206. color: #FFFFFF;
  207. top: 0;
  208. padding-top: 6px;
  209. margin: 2px;
  210. width: 25px;
  211. height: 20px;
  212. cursor: pointer;
  213. font-size: 10pt;
  214. text-align: center;
  215. text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
  216. z-index: 1;
  217. }
  218. .active {
  219. color: #00ccff;
  220. }
  221. .bottomToolbar_span>span {
  222. display: inline-block;
  223. position: absolute;
  224. font-size: 7pt;
  225. color: #ffffff;
  226. text-align: center;
  227. cursor: pointer;
  228. }
  229. .glow
  230. {
  231. text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
  232. }
  233. .watermark {
  234. display: block;
  235. position: absolute;
  236. top: 15;
  237. width: 186px;
  238. height: 74px;
  239. background-size: contain;
  240. background-repeat: no-repeat;
  241. z-index: 2;
  242. }
  243. .leftwatermark {
  244. display: none;
  245. left: 15;
  246. background-image:url(../images/watermark.png);
  247. background-position: center left;
  248. }
  249. .rightwatermark {
  250. display: none;
  251. right: 15;
  252. background-position: center right;
  253. }
  254. .poweredby {
  255. display: none;
  256. position: absolute;
  257. left: 25;
  258. bottom: 7;
  259. font-size: 11pt;
  260. color: rgba(255,255,255,.50);
  261. text-decoration: none;
  262. z-index: 100;
  263. }