2 files changed, 16 insertions, 14 deletions

diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 2d520b5..0fddad1 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -11,26 +11,28 @@ mixin lightbox(images)
         }
         let thumbnailClasses = {
             'o-thumbnail': true,
+            'o-lightbox__thumbnail': true,
         }
+        let inverseTheme = {
+            "static-black": "static-white",
+            "static-white": "static-black",
+        }[attributes.theme]
 
         if (attributes.theme) {
             classes[`o-lightbox--${attributes.theme}`] = true;
-            linksClasses[`s-links--${attributes.theme}`] = true;
-            thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
+            linksClasses[`s-links--${inverseTheme}`] = true;
+            thumbnailClasses[`o-thumbnail--${inverseTheme}`] = true;
         }
 
     div(class=classes)
-        header.o-lightbox__header
-            div(class=linksClasses)
-                block
-            +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
-
         each img, i in images
             img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        if images.length > 1
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+        .o-lightbox__controls
+            if images.length > 1
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +button(theme=inverseTheme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
 
         .o-lightbox__thumbnails
             each img, i in images
@@ -38,7 +40,7 @@ mixin lightbox(images)
                     let classes = { 'is-selected': i === 0 }
                     Object.assign(classes, thumbnailClasses)
 
-                a.o-thumbnail(class=classes href='#image-' + i)
+                a(class=classes href='#image-' + i)
                     img.o-thumbnail__image(src=img)
             button(class=thumbnailClasses)
                 +icon('volume-2')(class='o-thumbnail__icon')
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 7e366c0..c4b9878 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -14,7 +14,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -27,7 +27,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png'])(theme='static-white')
+                +lightbox(['avatar.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -39,7 +39,7 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         +backdrop(maxHeight=true)
-            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black' interactive=true)
                 = "Let's try multiple links! "
                 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                     = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"