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