threejs-primitives.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. div[data-primitive] {
  2. padding-bottom: 2em;
  3. border-bottom: 1px solid #888;
  4. margin-bottom: 2em;
  5. }
  6. div[data-primitive] .pair {
  7. display: flex;
  8. flex-direction: column-reverse;
  9. margin-bottom: 1em;
  10. }
  11. div[data-primitive] .shape {
  12. flex: 0 0 auto;
  13. width: 100%;
  14. height: 250px;
  15. }
  16. div[data-primitive] .desc {
  17. word-wrap: break-word;
  18. padding: 1em;
  19. min-width: 0;
  20. }
  21. div[data-primitive] .desc code {
  22. white-space: normal;
  23. }
  24. div[data-primitive] .input {
  25. display: inline-block;
  26. user-select: none;
  27. }
  28. div[data-primitive] .input::before {
  29. content:" ";
  30. }
  31. div[data-primitive] .input input[type=range] {
  32. width: 200px;
  33. }
  34. div[data-primitive] .input>div {
  35. position: absolute;
  36. display: inline-block;
  37. }
  38. div[data-primitive] .input input {
  39. position: absolute;
  40. }
  41. div[data-primitive] .input input[type=text] {
  42. background: #444;
  43. color: white;
  44. border: none;
  45. padding: 3px;
  46. }
  47. @media (max-width: 600px) {
  48. div[data-primitive] .input>div {
  49. right: 0;
  50. }
  51. div[data-primitive] .input input {
  52. opacity: 0.2;
  53. right: 1em;
  54. }
  55. }
  56. @media (max-width: 550px) {
  57. div[data-primitive] .shape {
  58. height: 120px;
  59. }
  60. }
  61. @media (max-width: 450px) {
  62. div[data-primitive] .pair {
  63. flex-direction: column-reverse;
  64. }
  65. div[data-primitive] .shape {
  66. margin: 0 auto;
  67. width: 100%;
  68. }
  69. }
  70. div[data-primitive] .desc {
  71. flex: 1 1 auto;
  72. }