main.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. * { box-sizing: border-box; }
  2. body {
  3. font-family: "Fira Sans";
  4. }
  5. .page {
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. display: grid;
  10. grid-template-columns: 25% 25% 25% 25%;
  11. grid-template-rows: 50px auto 50px;
  12. width: 100%;
  13. height: 100%;
  14. }
  15. .header {
  16. border: 1px solid black;
  17. grid-column: 1 / 5;
  18. grid-row: 1;
  19. display: flex;
  20. flex-flow: row;
  21. align-items: center;
  22. justify-content: space-around;
  23. }
  24. .footer {
  25. border: 1px solid black;
  26. grid-column: 1 / 5;
  27. grid-row: 3;
  28. }
  29. .contents {
  30. border: 1px solid black;
  31. grid-column: 1 / 4;
  32. grid-row: 2;
  33. }
  34. .chat {
  35. border: 1px solid black;
  36. grid-column: 4 / 5;
  37. grid-row: 2;
  38. padding: 1em;
  39. display: flex;
  40. flex-flow: column;
  41. }
  42. .chatbox-container {
  43. width: 100%;
  44. align-self: flex-end;
  45. }
  46. #chatbox {
  47. width: 100%;
  48. }
  49. .messages {
  50. overflow: auto;
  51. margin-bottom: auto;
  52. }
  53. .author {
  54. font-weight: bold;
  55. color: #900;
  56. }
  57. .msg {
  58. padding: 0.2em;
  59. padding-left: 1.5em;
  60. text-indent:-1.5em;
  61. }