defaultViewer.html 857 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <style>
  2. .babylonjs-canvas {
  3. flex: 1;
  4. width: 100%;
  5. height: 100%;
  6. touch-action: none;
  7. }
  8. nav-bar {
  9. position: absolute;
  10. height: 160px;
  11. width: 100%;
  12. bottom: 0;
  13. background-color: rgba(0, 0, 0, 0.3);
  14. color: white;
  15. transition: 1s;
  16. align-items: flex-start;
  17. justify-content: space-around;
  18. display: flex;
  19. flex-direction: column;
  20. }
  21. /* Big screens have room for the entire navbar */
  22. @media screen and (min-width: 768px) {
  23. nav-bar {
  24. align-items: center;
  25. flex-direction: row;
  26. justify-content: space-between;
  27. height: 80px;
  28. }
  29. }
  30. </style>
  31. <canvas class="babylonjs-canvas" id="{{canvasId}}">
  32. </canvas>
  33. <nav-bar></nav-bar>