style.css 892 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. body {
  2. font-family: Arial, sans-serif;
  3. margin: 20px;
  4. display: flex;
  5. gap: 20px;
  6. }
  7. #sidebar {
  8. width: 200px;
  9. border-right: 1px solid #ccc;
  10. padding-right: 15px;
  11. }
  12. #main {
  13. flex: 1;
  14. }
  15. .bulb-item {
  16. padding: 5px;
  17. cursor: pointer;
  18. border: 1px solid #aaa;
  19. border-radius: 5px;
  20. margin-bottom: 5px;
  21. }
  22. .bulb-item.selected {
  23. background: #e0e0ff;
  24. }
  25. #visualization {
  26. width: 200px;
  27. height: 250px;
  28. border: 2px solid #333;
  29. border-radius: 10px;
  30. margin-top: 20px;
  31. background: #111;
  32. position: relative;
  33. overflow: visible;
  34. display: flex;
  35. justify-content: center;
  36. align-items: flex-end;
  37. padding-bottom: 15px;
  38. }
  39. #light {
  40. width: 80px;
  41. height: 80px;
  42. border-radius: 50%;
  43. background: radial-gradient(circle, #000 0%, #000 100%);
  44. transition: background 0.25s ease, box-shadow 0.35s ease;
  45. z-index: 2;
  46. }