.project-scene {width: 100%;height: 100%;aspect-ratio: 4/3; } @media (min-width: 319px) {.project-scene {aspect-ratio: 3/2;} } @media (min-width: 576px) {.project-scene {aspect-ratio: 1088/658;} } .project-scene .scene-content {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%; } .project-scene .scene-content .scene-plane {width: 100%;height: 100%;position: relative; } .project-scene .scene-loader {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: white;z-index: 10;display: flex;align-items: center;justify-content: center;visibility: visible;opacity: 1;transition-property: opacity, visibility;transition-duration: 0.25s; } .project-scene .scene-loader.hidden {visibility: hidden;opacity: 0; } .project-scene .scene-loader.unload .spinner-border {display: none; } .project-scene .scene-tool {position: absolute;top: 0;padding: 0.625rem;width: 18.9375rem;z-index: 1;max-height: calc(100% - 8rem);display: none; } .project-scene .scene-tool .tab-pane {border: 0; } .project-scene .scene-tool .tab-content > .tab-pane:not(.active) {display: none; } .project-scene .scene-tool .card {border: 0;box-shadow: none; } .project-scene .scene-tool .card-header {padding: 1rem; } .project-scene .scene-tool .card-body {padding: 1rem; } .project-scene .scene-tool .card-text {display: block;margin: 0; } .project-scene .scene-tool .nav {margin-bottom: 2px;border: 0;flex-wrap: nowrap; } .project-scene .scene-tool .nav .nav-link {display: flex;flex-direction: column;align-items: center;justify-content: space-between;border: 0;width: 4.1875rem;height: 4.125rem;font-size: 0.75rem;text-transform: uppercase;padding: 0.9375rem;background: transparent;margin-right: 0.3125rem;color: #000;padding: 0.3125rem; } .project-scene .scene-tool .nav .nav-link.active {background: #fff; } .project-scene .scene-tool .nav .nav-link .img-fluid {display: block;margin-bottom: 0;flex-grow: 1;object-fit: scale-down; } .project-scene .scene-tool .btn-color {width: 100%;aspect-ratio: 1/1;margin-bottom: 1rem;border: solid 1px var(--light);box-shadow: none; } .project-scene .scene-tool .btn-color.active {border-color: var(--primary); } .modal .project-scene {width: calc(100vw - 1rem);height: calc(100vh - 1rem); } .modal .project-scene .toolbar {display: none; } .modal .project-scene .scene-tool {display: block; }