From ce457687e0a4d775c7be45d9427bb852b2e264f7 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:24:29 +0900
Subject: [PATCH] style(preview): refinements

---
 static/style/inverted-style.css | 50 +++++++++++++++++++++++++++------
 static/style/style.css          | 21 +++++++++++---
 2 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
index 0916f2d2..db933a78 100644
--- a/static/style/inverted-style.css
+++ b/static/style/inverted-style.css
@@ -57,6 +57,11 @@
   #issues-container.preview-active {
     transform: translateX(-50%);
   }
+  #issues-container.preview-active .issue-element-wrapper {
+    opacity: 0.5;
+    transition: 0.33s all cubic-bezier(0, 1, 1, 1);
+    filter: blur(8px);
+  }
   &::-webkit-scrollbar {
     display: none;
   }
@@ -116,7 +121,7 @@
   #issues-container > div:active {
     background-color: #7f7f7f40;
   }
-  h3 {
+  #issues-container h3 {
     line-height: 1;
     font-size: 16px;
     text-overflow: ellipsis;
@@ -437,12 +442,15 @@
     mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%);
     pointer-events: none;
   }
-  .preview blockquote{
+  .preview blockquote {
     margin-left: 16px;
     opacity: 0.66;
-}
-  .preview sup{
-    display: block
+  }
+  .preview sup {
+    display: block;
+  }
+  .preview hr {
+    border-color: #00000040;
   }
   .preview p {
     line-height: 1.25;
@@ -456,20 +464,45 @@
   }
   .preview pre {
     /* width: calc(100% - 48px); */
+    /* overflow: scroll; */
+    /* margin: 0; */
+    /* overflow: hidden; */
+    /* white-space: unset; */
+    /* position: relative; */
+    /* width: 50%; */
+    /* display: inline-block; */
+    /* background: red; */
+    /* overflow: hidden; */
+    /* margin: 0; */
+    /* white-space: unset; */
+    position: relative;
+    /* margin: 48px auto; */
+    display: inline-block;
+    width: 100%;
     overflow: scroll;
+    height: 48px;
   }
-  .preview code {
-    width: 100%;
-    white-space: initial;
+  .preview pre code {
+    /* width: 100%; */
+    /* white-space: initial; */
+    /* max-width: 100vw; */
+    /* overflow: hidden; */
+    /* display: inline-block; */
+    /* display: block; */
+    /* white-space: inherit; */
+    position: absolute;
   }
   .preview ul,
   .preview ol {
     padding-left: 12px;
+    /* width: calc(100% - 24px); */
+    margin-left: 12px;
   }
   .preview h1 {
     margin: 8px;
     /* text-align: center; */
     font-size: 24px;
+    margin-right: 16px;
   }
   .preview a {
     word-break: break-all;
@@ -551,5 +584,6 @@
     letter-spacing: 0;
     font-size: 16px;
     line-height: 1.25;
+    /* width: calc(100% - 24px); */
   }
 }
diff --git a/static/style/style.css b/static/style/style.css
index ae9e7a20..818c6f16 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -57,6 +57,11 @@
   #issues-container.preview-active {
     transform: translateX(-50%);
   }
+  #issues-container.preview-active .issue-element-inner {
+    opacity: 0.5;
+    /* transition: 0.33s all cubic-bezier(0, 1, 1, 1); */
+    filter: blur(4px);
+  }
   &::-webkit-scrollbar {
     display: none;
   }
@@ -437,12 +442,15 @@
     mask-image: radial-gradient(#00000020 0, #00000080 100%);
     pointer-events: none;
   }
-  .preview blockquote{
+  .preview blockquote {
     margin-left: 16px;
     opacity: 0.66;
-}
-  .preview sup{
-    display: block
+  }
+  .preview sup {
+    display: block;
+  }
+  .preview hr {
+    border-color: #ffffff40;
   }
   .preview p {
     line-height: 1.25;
@@ -483,15 +491,19 @@
     /* display: block; */
     /* white-space: inherit; */
     position: absolute;
+    font-family: monospace;
   }
   .preview ul,
   .preview ol {
     padding-left: 12px;
+    margin-left: 4px;
   }
+
   .preview h1 {
     margin: 8px;
     /* text-align: center; */
     font-size: 24px;
+    margin-right: 16px;
   }
   .preview a {
     word-break: break-all;
@@ -573,5 +585,6 @@
     letter-spacing: 0;
     font-size: 16px;
     line-height: 1.25;
+    /* width: calc(100% - 24px); */
   }
 }