style.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. html,body{
  2. width: 100%;
  3. height: 100%;
  4. padding: 0;
  5. margin: 0;
  6. overflow: hidden;
  7. }
  8. .unselectable{
  9. cursor: default;
  10. display: block;
  11. margin: auto;
  12. margin-bottom: 1em;
  13. vertical-align: middle;
  14. text-align: center;
  15. }
  16. .fill{
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .row{
  21. display: table-row;
  22. }
  23. .cell{
  24. display: table-cell;
  25. }
  26. .date_cell{
  27. word-wrap: normal;
  28. white-space: pre;
  29. word-break: keep-all;
  30. }
  31. .unselectable,#tabs-list div.tab{
  32. -webkit-touch-callout: none;
  33. -webkit-user-select: none;
  34. -khtml-user-select: none;
  35. -moz-user-select: none;
  36. -ms-user-select: none;
  37. user-select: none;
  38. }
  39. .close-button{
  40. float: right;
  41. font-weight: bold;
  42. font-size: 24px;
  43. margin-top: -5px;
  44. font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
  45. line-height: 17px;
  46. margin-top: 0;
  47. display: block;
  48. }
  49. .close-button:hover{
  50. color: red;
  51. }
  52. #head{
  53. right: 0;
  54. top: 0;
  55. width: 100%;
  56. height: 40px;
  57. border-bottom-style: solid;
  58. background-color: white;
  59. transition: height 0.3s;
  60. z-index: 10;
  61. font-size: 10px;
  62. font-family:verdana,sans-serif;
  63. background-color: #DFEFFF;
  64. }
  65. #info{
  66. display: table;
  67. width: 100%;
  68. }
  69. #title{
  70. display: table-cell;
  71. }
  72. #topic{
  73. display: table-cell;
  74. text-align: right;
  75. }
  76. #content{
  77. width: 100%;
  78. height: calc(100% - 61px);
  79. top: 41px;
  80. left: 0;
  81. font-size: 10px;
  82. font-family:verdana,sans-serif;
  83. line-height:13px;
  84. background-color: #DFEFFF;
  85. }
  86. #content-list li:nth-child(even) {
  87. background-color: #cae4ff;
  88. }
  89. #content-list a, #content-list a:hover, #content-list a:active , #content-list a:active, #content-list a:link {
  90. color:blue;
  91. text-decoration: none;
  92. border-bottom: 1px solid rgba(0, 0, 255, 0.3);
  93. }
  94. #content-list a:hover {
  95. text-decoration: none;
  96. text-shadow: 0 0 4px rgba(0, 40, 170, 0.5);
  97. }
  98. #settings,#users{
  99. font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
  100. font-size: 12px;
  101. bottom: 0;
  102. height: 19px;
  103. background-color: white;
  104. border-left-style: solid;
  105. border-top-style: solid;
  106. margin-top: -1px;
  107. transition: width 0.5s, height 0.5s, right 0.5s;
  108. }
  109. #settings span,#users span{
  110. cursor: pointer;
  111. }
  112. #users{
  113. right: 0;
  114. width: 36px;
  115. z-index: 1;
  116. background-color: #cae4ff;
  117. }
  118. #settings{
  119. width: 50px;
  120. border-top-color: rgba(102, 153, 255, 0.6);
  121. border-right-style: solid;
  122. right: 36px;
  123. background-color: #cae4ff;
  124. }
  125. #settings.hovered,#users.hovered{
  126. height: 21px;
  127. }
  128. #settings.open,#users.open{
  129. width: 150px;
  130. height: 100%;
  131. right: 0;
  132. z-index: 20;
  133. }
  134. #settings.open{
  135. width: 300px;
  136. }
  137. #settings input, #settings select {
  138. background-color: #DFEFFF;
  139. border-radius: 2px;
  140. border: solid 1px rgba(102, 153, 255, 0.9);
  141. }
  142. #entry{
  143. width: 100%;
  144. border-top-style: solid;
  145. height: 19px;
  146. bottom: 0;
  147. }
  148. #input{
  149. width: calc(100% - 126px);
  150. height: 17px;
  151. margin: 0;
  152. padding: 1px;
  153. border-style: none;
  154. clear: none;
  155. bottom: 0;
  156. left: 0;
  157. background-color: #cae4ff;
  158. }
  159. #send{
  160. clear: none;
  161. bottom: 0;
  162. right: 88px;
  163. width: 48px;
  164. padding: 0;
  165. padding-bottom: 4px;
  166. margin: 0;
  167. height: 19px;
  168. border-style: none;
  169. border-left: 1px solid;
  170. background-color: #cae4ff;
  171. transition: background-color 0.2s;
  172. font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
  173. font-size: 12px;
  174. vertical-align: top;
  175. text-align: center;
  176. }
  177. #send:hover{
  178. background-color: #DFEFFF;
  179. }
  180. #send.clicked{
  181. background-color: rgba(102, 153, 255, 0.9);
  182. }
  183. #popup-title, #send {
  184. font-variant: small-caps;
  185. }
  186. #content,#head,#users,#entry,#input,#send,#settings{
  187. border-color: rgba(102, 153, 255, 0.6);
  188. border-top-color: rgba(102, 153, 255, 0.9);
  189. border-width: 1px;
  190. position: absolute;
  191. overflow: hidden;
  192. }
  193. #content{
  194. overflow-y: scroll;
  195. }
  196. #users,#input,#send,#settings{
  197. position: fixed;
  198. }
  199. #content-list,#user-list,#settings-list,#tabs-list{
  200. list-style-type: none;
  201. margin: 0;
  202. padding: 0;
  203. overflow-y: auto;
  204. word-wrap: break-word;
  205. white-space: pre-wrap;
  206. word-break: break-all;
  207. }
  208. #content-list,#user-list,#tabs-list{
  209. width: 100%;
  210. height: 100%;
  211. }
  212. #content-list,#settings-list{
  213. display: table;
  214. table-layout: fixed;
  215. }
  216. #settings-list > li{
  217. line-height: 4px;
  218. }
  219. #user-list{
  220. font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
  221. font-size: 15px;
  222. }
  223. #user-list li:nth-child(even) {
  224. background-color: #DFEFFF;
  225. border: solid 1px #6699ff;
  226. border-left: 0px;
  227. border-right: 0px;
  228. }
  229. #tabs-list{
  230. width: calc(100% - 42px);
  231. height: 20px;
  232. position: absolute;
  233. left: 0;
  234. top: 20px;
  235. overflow: hidden;
  236. }
  237. #tabs-list div.tab{
  238. float: left;
  239. max-width: 200px;
  240. overflow: hidden;
  241. position: relative;
  242. height: 18px;
  243. margin-bottom: -1px;
  244. }
  245. #tabs-list div.tab.clicked{
  246. background-color: #cae4ff;
  247. border: solid 1px #6699ff;
  248. border-bottom-width: 0px;
  249. }
  250. #tabs-scroll-left{
  251. position: absolute;
  252. right: 20px;
  253. top: 20px;
  254. height: 20px;
  255. width: 20px;
  256. }
  257. #tabs-scroll-right{
  258. position: absolute;
  259. right: 0;
  260. top: 20px;
  261. height: 20px;
  262. width: 20px;
  263. }
  264. #tabs-list div.tab, #tabs-scroll-right,#tabs-scroll-left{
  265. border-top-right-radius: 3px;
  266. border-top-left-radius: 3px;
  267. border: 1px solid rgba(102, 153, 255, 0.3);
  268. border-top-color: rgba(102, 153, 255, 0.6);
  269. border-width: 1px;
  270. border-bottom-width: 0px;
  271. padding: 0;
  272. margin: 0;
  273. background-color: white;
  274. cursor: pointer;
  275. clear: none;
  276. display: block;
  277. -webkit-box-align: center;
  278. -moz-box-align: center;
  279. box-align: center;
  280. text-align: center;
  281. vertical-align: center;
  282. line-height: 16px;
  283. background-color: #DFEFFF;
  284. }
  285. #tabs-list div.tab{
  286. padding-right: 15px;
  287. }
  288. #tabs-list div.tab:hover, #tabs-scroll-right:hover,#tabs-scroll-left:hover{
  289. background-color: #cae4ff;
  290. }
  291. #tabs-scroll-left.disabled, #tabs-scroll-right.disabled{
  292. background-color: #cae4ff;
  293. border: solid 1px #6699ff;
  294. border-bottom-width: 0px;
  295. }