less copy protection, more size visualization
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

84 lines
1.2 KiB

  1. html {
  2. height: 100%;
  3. overflow-x: hidden;
  4. overflow-y: hidden;
  5. color: #eee;
  6. }
  7. body {
  8. background: #111;
  9. display: flex;
  10. flex-direction: column;
  11. align-items: center;
  12. justify-content: flex-start;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. .entity {
  17. position: absolute;
  18. --height: 100px;
  19. height: var(--height);
  20. text-align: center;
  21. -webkit-user-drag: none;
  22. -khtml-user-drag: none;
  23. -moz-user-drag: none;
  24. -o-user-drag: none;
  25. transform: translate(-50%, -100%);
  26. }
  27. .selected {
  28. filter: drop-shadow(0px 0px 15px gold);
  29. }
  30. #main-area {
  31. display: flex;
  32. min-width: 100vw;
  33. height: 100%;
  34. flex-direction: row;
  35. }
  36. #options {
  37. flex: 1 0 15vw;
  38. background: #444;
  39. }
  40. #entities {
  41. position: relative;
  42. user-select: none;
  43. }
  44. #world {
  45. flex: 9 0 85vw;
  46. min-height: 90vh;
  47. max-height: 90vh;
  48. overflow: hidden;
  49. }
  50. #menubar {
  51. display: flex;
  52. flex-direction: row;
  53. justify-content: center;
  54. align-items: center;
  55. min-height: 10vh;
  56. min-width: 100vw;
  57. background: #222;
  58. }
  59. .menu-item {
  60. font-size: 24px;
  61. color: #ccc;
  62. margin: 20px;
  63. }
  64. #display {
  65. width: 100%;
  66. height: 100%;
  67. background: #333;
  68. }
  69. #options input {
  70. width: 50%;
  71. font-size: 150%;
  72. }