add filtered post to preview

displays the role of the secondary accent
AprilSylph · Feb 23, 2022 · 5c7647b · 5c7647b
1 parent d3f4a06
commit 5c7647b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/options/ui.css b/src/options/ui.css
@@ -264,20 +264,28 @@ input[type="text"]:disabled {
 #preview .video svg { fill: var(--pink); }
 
 #preview .post {
-  padding: 5px 10px;
   border-radius: 3px;
+  overflow: hidden;
 
   background-color: var(--white);
   color: var(--black);
 }
 
 #preview .post p {
   display: flex;
-  margin: 0;
+  padding: 0 10px;
+  margin: 5px 0;
 }
 
-#preview .post p:not(:first-child) {
-  margin-top: 5px;
+#preview .post p.filtered {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin: 0;
+
+  background-color: var(--secondary-accent);
 }
 
 #preview .post p time {
@@ -289,6 +297,15 @@ input[type="text"]:disabled {
   font-size: 0.65rem;
 }
 
+#preview .post p.filtered small {
+  opacity: 0.65;
+}
+
+#preview .post p.filtered .filtered-tag {
+  color: var(--accent);
+  opacity: 1;
+}
+
 #transfer details[open] summary {
   margin-bottom: 1ch;
 }

diff --git a/src/options/ui.html b/src/options/ui.html
@@ -52,6 +52,13 @@ <h1>Preview</h1>
                 <p>An example post</p>
                 <p><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</small></p>
               </div>
+              <div class="post">
+                <p><time>Feb 23, 2022</time></p>
+                <p class="filtered">
+                  <small>This post contains filtered tags.</small>
+                  <small class="filtered-tag">#long post</small>
+                </p>
+              </div>
             </div>
           </div>
         </section>