From 129753c438f0f5f209aedf8cfffcc170c7e25f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Tue, 5 Dec 2023 01:42:43 +0900
Subject: [PATCH] style(preview): refinements

---
 static/style/inverted-style.css | 26 ++++++++++++++--------
 static/style/style.css          | 38 +++++++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
index db933a78..55dab4a5 100644
--- a/static/style/inverted-style.css
+++ b/static/style/inverted-style.css
@@ -57,10 +57,10 @@
   #issues-container.preview-active {
     transform: translateX(-50%);
   }
-  #issues-container.preview-active .issue-element-wrapper {
+  #issues-container.preview-active .issue-element-inner {
     opacity: 0.5;
-    transition: 0.33s all cubic-bezier(0, 1, 1, 1);
-    filter: blur(8px);
+    /* transition: 0.33s all cubic-bezier(0, 1, 1, 1); */
+    filter: blur(4px);
   }
   &::-webkit-scrollbar {
     display: none;
@@ -491,13 +491,14 @@
     /* display: block; */
     /* white-space: inherit; */
     position: absolute;
+    font-family: monospace;
   }
   .preview ul,
   .preview ol {
     padding-left: 12px;
-    /* width: calc(100% - 24px); */
-    margin-left: 12px;
+    margin-left: 4px;
   }
+
   .preview h1 {
     margin: 8px;
     /* text-align: center; */
@@ -511,6 +512,8 @@
     /* width: calc(100% - 48px); */
     max-width: 640px;
     overflow: scroll;
+    max-height: calc(100vh - 168px);
+    pointer-events: all;
   }
 
   .preview {
@@ -536,7 +539,6 @@
     display: flex;
     transform: translateX(0%);
     flex-wrap: wrap;
-    overflow: scroll;
     max-height: calc(100vh - 71px);
     pointer-events: none;
   }
@@ -550,9 +552,10 @@
   }
   .preview-header {
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     /* justify-content: space-between; */
-    margin-bottom: 8px;
+    /* margin-bottom: 8px; */
+    /* position: fixed; */
   }
   .preview-header > a {
     word-wrap: initial;
@@ -564,11 +567,16 @@
   .preview-body {
     margin: 16px;
     overflow: scroll;
-    width: calc(100% - 48px);
+    width: calc(100% - 32px);
+    /* margin-top: 48px; */
+    /* height: calc( 100% - 512px); */
+    overflow: hidden;
+    /* background: red; */
   }
   .preview-content {
     /* padding: 16px; */
     width: 100%;
+    /* position: relative; */
   }
   .preview button.close-preview {
     /* height: 100%; */
diff --git a/static/style/style.css b/static/style/style.css
index 818c6f16..55365f6c 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -512,10 +512,12 @@
     /* width: calc(100% - 48px); */
     max-width: 640px;
     overflow: scroll;
+    max-height: calc(100vh - 136px);
+    pointer-events: all;
   }
 
   .preview {
-    overflow: hidden;
+    /* overflow: hidden; */
     text-align: left;
     position: fixed;
     /* bottom: 0; */
@@ -537,10 +539,21 @@
     display: flex;
     transform: translateX(0%);
     flex-wrap: wrap;
-    overflow: scroll;
-    max-height: calc(100vh - 71px);
+    /* max-height: calc(100vh - 71px); */
+    /* background: red; */
+  }
+  .preview {
+    pointer-events: none;
+  }
+  .preview * {
     pointer-events: none;
   }
+  .preview.active {
+    pointer-events: all;
+  }
+  .preview.active * {
+    pointer-events: all;
+  }
   .close-preview svg {
     fill: #ffffff80;
   }
@@ -551,10 +564,16 @@
   }
   .preview-header {
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     /* justify-content: space-between; */
-    margin-bottom: 8px;
+    /* margin-bottom: 8px; */
+    /* position: fixed; */
+    justify-content: space-between;
+    align-items: center;
+    margin: auto 8px;
   }
+
+.preview-header {}
   .preview-header > a {
     word-wrap: initial;
   }
@@ -565,11 +584,18 @@
   .preview-body {
     margin: 16px;
     overflow: scroll;
-    width: calc(100% - 48px);
+    width: calc(100% - 32px);
+    /* margin-top: 48px; */
+    /* height: calc( 100% - 512px); */
+    overflow: hidden;
+    /* background: red; */
+    margin-bottom: 0;
+    margin-top: 8px;
   }
   .preview-content {
     /* padding: 16px; */
     width: 100%;
+    /* position: relative; */
   }
   .preview button.close-preview {
     /* height: 100%; */