main.css 901 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. }
  20. .footer {
  21. border: 1px solid black;
  22. grid-column: 1 / 5;
  23. grid-row: 3;
  24. }
  25. .contents {
  26. border: 1px solid black;
  27. grid-column: 1 / 4;
  28. grid-row: 2;
  29. }
  30. .chat {
  31. border: 1px solid black;
  32. grid-column: 4 / 5;
  33. grid-row: 2;
  34. padding: 1em;
  35. display: flex;
  36. flex-flow: column;
  37. }
  38. .chatbox-container {
  39. width: 100%;
  40. align-self: flex-end;
  41. }
  42. #chatbox {
  43. width: 100%;
  44. }
  45. .messages {
  46. overflow: auto;
  47. margin-bottom: auto;
  48. }
  49. .author {
  50. font-weight: bold;
  51. color: #900;
  52. }
  53. .msg {
  54. padding: 0.2em;
  55. }