diff --git a/static/styles/lightbox.scss b/static/styles/lightbox.scss index 2d14c5fd83..b5c4a0d5dd 100644 --- a/static/styles/lightbox.scss +++ b/static/styles/lightbox.scss @@ -207,56 +207,58 @@ } } -#lightbox_overlay .center .arrow { - display: inline-block; - vertical-align: top; - margin-top: 25px; - padding: 5px 10px; +#lightbox_overlay .center { + .arrow { + display: inline-block; + vertical-align: top; + margin-top: 25px; + padding: 5px 10px; - color: hsl(0, 0%, 100%); - font-size: 1.8em; - font-weight: 100; + color: hsl(0, 0%, 100%); + font-size: 1.8em; + font-weight: 100; - transform: scaleY(2); - cursor: pointer; + transform: scaleY(2); + cursor: pointer; - opacity: 0.5; - transition: all 0.3s ease; -} + opacity: 0.5; + transition: all 0.3s ease; -#lightbox_overlay .center .arrow:hover { - opacity: 1; -} + &:hover { + opacity: 1; + } + } -#lightbox_overlay .center .image-list { - position: relative; - display: inline-block; - padding: 15px 0px 12px 0px; - height: 50px; - font-size: 0px; + .image-list { + position: relative; + display: inline-block; + padding: 15px 0px 12px 0px; + height: 50px; + font-size: 0px; - max-width: 40vw; - overflow: hidden; - white-space: nowrap; -} + max-width: 40vw; + overflow: hidden; + white-space: nowrap; -#lightbox_overlay .center .image-list .image { - display: inline-block; - vertical-align: top; - width: 50px; - height: 50px; - margin: 0px 2px; + .image { + display: inline-block; + vertical-align: top; + width: 50px; + height: 50px; + margin: 0px 2px; - background-color: hsla(0, 0%, 94%, 0.2); - opacity: 0.5; + background-color: hsla(0, 0%, 94%, 0.2); + opacity: 0.5; - background-size: cover; - background-position: center; - cursor: pointer; -} + background-size: cover; + background-position: center; + cursor: pointer; -#lightbox_overlay .center .image-list .image.selected { - opacity: 1; + &.selected { + opacity: 1; + } + } + } } #lightbox_overlay .image-actions .button {