style(preview): refinements

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

Hide file tree

Showing 2 changed files with 59 additions and 12 deletions.
diff --git 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
@@ -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); */
   }
 }