1
0

main.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. html, body {
  2. background-color: #eee;
  3. }
  4. body {
  5. padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
  6. }
  7. .container > footer p {
  8. text-align: center; /* center align it with the container */
  9. }
  10. .container {
  11. width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
  12. }
  13. /* The white background content wrapper */
  14. .content {
  15. background-color: #fff;
  16. padding: 20px;
  17. margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  18. -webkit-border-radius: 0 0 6px 6px;
  19. -moz-border-radius: 0 0 6px 6px;
  20. border-radius: 0 0 6px 6px;
  21. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  22. -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  23. box-shadow: 0 1px 2px rgba(0,0,0,.15);
  24. min-height: 10px;
  25. }
  26. /* Page header tweaks */
  27. .page-header {
  28. background-color: #f5f5f5;
  29. padding: 20px 20px 10px;
  30. margin: -20px -20px 20px;
  31. }
  32. /* Styles you shouldn't keep as they are for displaying this base example only */
  33. .content .span10,
  34. .content .span4 {
  35. min-height: 500px;
  36. }
  37. /* Give a quick and non-cross-browser friendly divider */
  38. .content .span4 {
  39. padding-left: 9px;
  40. margin-left: 10px;
  41. border-left: 1px solid #eee;
  42. }
  43. .topbar .btn {
  44. border: 0;
  45. }
  46. .topbar p {
  47. color: #888;
  48. }
  49. #username {
  50. width: 200px;
  51. }
  52. #main {
  53. position: relative;
  54. overflow: hidden;
  55. }
  56. #onError, #onChat {
  57. display: none;
  58. }
  59. #messages {
  60. position: absolute;
  61. bottom: 60px;
  62. }
  63. #talk {
  64. position: absolute;
  65. bottom: 0;
  66. left: 0;
  67. right: 0;
  68. width: auto;
  69. height: 40px
  70. }
  71. .message {
  72. padding: 4px 0;
  73. border-bottom: 1px solid #eee;
  74. position: relative;
  75. }
  76. .message span {
  77. width: 70px;
  78. overflow: hidden;
  79. text-align: right;
  80. font-weight: bold;
  81. margin-right: 5px;
  82. display: inline-block;
  83. vertical-align: top;
  84. position: relative;
  85. top: -1px;
  86. }
  87. .message p {
  88. display: inline-block;
  89. margin: 0;
  90. width: 500px;
  91. }
  92. .message.me {
  93. background: #FFC;
  94. }
  95. .message.gm {
  96. background: #D9FBE7;
  97. }
  98. .message.join, .message.quit {
  99. background: #D9E7FB;
  100. }