| 12345678910111213141516171819202122232425262728293031323334353637383940 |
- <style>
- .babylonjs-canvas {
- flex: 1;
- width: 100%;
- height: 100%;
- touch-action: none;
- }
- nav-bar {
- position: absolute;
- height: 160px;
- width: 100%;
- bottom: 0;
- opacity: 0.3;
- background-color: black;
- color: white;
- transition: 1s;
- align-items: center;
- justify-content: center;
- display: flex;
- flex-direction: column;
- }
- /* Big screens have room for the entire navbar */
- @media screen and (min-width: 768px) {
- nav-bar {
- flex-direction: row;
- justify-content: space-between;
- height: 80px;
- }
- }
- </style>
- <canvas class="babylonjs-canvas" id="{{canvasId}}">
- </canvas>
- <nav-bar></nav-bar>
|