src/app/gallery/gallery.component.scss
@import 'bootstrap/scss/functions';@import 'bootstrap/scss/variables';@import '../variables';@import 'bootstrap/scss/mixins'; .gallery { position: fixed; inset: 0; z-index: 1031; overflow: hidden; background: #000; background: rgb(0 0 0 / 90%); touch-action: none; .carousel { width: 100%; height: 100%; .carousel-numbers { bottom: auto; top: 20px; position: absolute; left: 50%; z-index: 15; padding: 0; list-style: none; text-align: center; color: $color-white; transform: translate(-50%, 0); text-shadow: 0 0 4px #000; } } .carousel-indicators { bottom: auto; top: 17px; li { width: 14px; height: 14px; background: transparent; border-radius: 7px; cursor: pointer; border: 1px solid #fff; margin: 0 4px; display: block; &.active { background: #fff; } } } .carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; text-align: center; background-color: transparent; } .carousel-control-close { position: absolute; top: 0; right: 0; left: auto; height: 15%; width: 15%; color: #fff; z-index: 1; background: none; border: none; outline: none; &:focus, &:active { border: none; outline: none; } .fa { margin-top: 15px; } } .carousel-inner { height: 100%; }}