index.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. html,body{
  2. margin: 0;
  3. padding: 0;
  4. font-family: Arial, sans-serif;
  5. }
  6. #game-container {
  7. width: 100%;
  8. height: 100%;
  9. z-index: 1;
  10. }
  11. #inventory {
  12. position: absolute;
  13. display: none;
  14. width: 300px;
  15. height: 300px;
  16. top: 100px;
  17. left: 100px;
  18. background-color: white;
  19. color: black;
  20. }
  21. #chat {
  22. position: absolute;
  23. display: block;
  24. height: 60px;
  25. bottom: 30px;
  26. left: 30px;
  27. right: 30px;
  28. background-color: rgba(255, 255, 255, 0.3);
  29. color: black;
  30. overflow: hidden;
  31. pointer-events: none;
  32. }
  33. #chat-input {
  34. width: 100%;
  35. padding: 5px;
  36. font-size: 16px;
  37. position: absolute;
  38. bottom: 0;
  39. background-color: transparent;
  40. color: white;
  41. font-weight: bold;
  42. border: 2px solid gray;
  43. pointer-events: auto;
  44. text-shadow: 0 0 5px black;
  45. }
  46. #chat-input:focus {
  47. border: 2px solid limegreen;
  48. }
  49. #chat-output {
  50. height: auto;
  51. font-size: 16px;
  52. padding: 5px;
  53. display: flex;
  54. flex-direction: column;
  55. }
  56. #chat-output span {
  57. display: inline-flex;
  58. padding-left: 5px;
  59. padding-right: 5px;
  60. color: white;
  61. font-weight: bold;
  62. pointer-events: auto;
  63. margin-right: auto;
  64. text-shadow: 0 0 5px black;
  65. }