Make image viewer actually fit the whole page

1 files changed, 14 insertions, 1 deletions

diff --git a/style.css b/style.css
index d7f87f81..44f970e8 100644
--- a/style.css
+++ b/style.css
@@ -609,13 +609,19 @@ table.popup-table .link{
     display: flex;

     gap: 1em;

     padding: 1em;

-    background-color: rgba(0,0,0,0.2);

+    background-color:rgba(0,0,0,0);

+    z-index: 1;

+    transition: 0.2s ease background-color;

+}

+.modalControls:hover {

+    background-color:rgba(0,0,0,0.9);

 }

 .modalClose {

     margin-left: auto;

 }

 .modalControls span{

     color: white;

+    text-shadow: 0px 0px 0.25em black;

     font-size: 35px;

     font-weight: bold;

     cursor: pointer;

@@ -640,6 +646,13 @@ table.popup-table .link{
     min-height: 0;

 }

 

+#modalImage{

+    position: absolute;

+    top: 50%;

+    left: 50%;

+    transform: translateX(-50%) translateY(-50%);

+}

+

 .modalPrev,

 .modalNext {

   cursor: pointer;