style(preview): refinements

ubiquity · Dec 4, 2023 · 129753c · 129753c
1 parent ce45768
commit 129753c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 15 deletions.
diff --git 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
@@ -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%; */