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 6.3KB

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