From 8ab4d38b6e0955d2f357dc8499fcbd5e66fa5be9 Mon Sep 17 00:00:00 2001
From: Vaibhav <vrongmeal@gmail.com>
Date: Mon, 10 Jun 2019 11:06:54 +0530
Subject: [PATCH] css: Use SCSS nesting in lightbox.scss for `.image-preview`.

---
 static/styles/lightbox.scss | 44 ++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/static/styles/lightbox.scss b/static/styles/lightbox.scss
index e9c5812b95..4ec3a03926 100644
--- a/static/styles/lightbox.scss
+++ b/static/styles/lightbox.scss
@@ -14,33 +14,33 @@
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-}
 
-#lightbox_overlay .image-preview img {
-    max-height: 100%;
-    max-width: 100%;
+    img {
+        max-height: 100%;
+        max-width: 100%;
 
-    background-color: hsl(0, 0%, 100%);
-    background-image:
-        -moz-linear-gradient(45deg, hsl(0, 0%, 80%) 25%, transparent 25%),
-        -moz-linear-gradient(-45deg, hsl(0, 0%, 80%) 25%, transparent 25%),
-        -moz-linear-gradient(45deg, transparent 75%, hsl(0, 0%, 0%) 75%),
-        -moz-linear-gradient(-45deg, transparent 75%, hsl(0, 0%, 0%) 75%);
-    background-image:
-        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, hsl(0, 0%, 80%)), color-stop(.25, transparent)),
-        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsl(0, 0%, 80%)), color-stop(.25, transparent)),
-        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, hsl(0, 0%, 80%))),
-        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, hsl(0, 0%, 80%)));
+        background-color: hsl(0, 0%, 100%);
+        background-image:
+            -moz-linear-gradient(45deg, hsl(0, 0%, 80%) 25%, transparent 25%),
+            -moz-linear-gradient(-45deg, hsl(0, 0%, 80%) 25%, transparent 25%),
+            -moz-linear-gradient(45deg, transparent 75%, hsl(0, 0%, 0%) 75%),
+            -moz-linear-gradient(-45deg, transparent 75%, hsl(0, 0%, 0%) 75%);
+        background-image:
+            -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, hsl(0, 0%, 80%)), color-stop(.25, transparent)),
+            -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsl(0, 0%, 80%)), color-stop(.25, transparent)),
+            -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, hsl(0, 0%, 80%))),
+            -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, hsl(0, 0%, 80%)));
 
-    -moz-background-size: 20px 20px;
-    background-size: 20px 20px;
-    -webkit-background-size: 20px 20px;
+        -moz-background-size: 20px 20px;
+        background-size: 20px 20px;
+        -webkit-background-size: 20px 20px;
 
-    background-position: 0 0, 50px 0, 50px -50px, 0px 50px;
-}
+        background-position: 0 0, 50px 0, 50px -50px, 0px 50px;
+    }
 
-#lightbox_overlay .image-preview canvas {
-    cursor: pointer;
+    canvas {
+        cursor: pointer;
+    }
 }
 
 #lightbox_overlay .exit {