styling fix

ryanckulp · Dec 30, 2023 · e246a58 · e246a58
1 parent 9fbfdd3
commit e246a58
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 0 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -23,3 +23,86 @@
   @apply bg-green-400;
   background-color: #68d391;
 }
+
+.trix-content {
+  img {
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    color: #1b64f3;
+    text-decoration: underline;
+  }
+
+  .attachment-gallery {
+    > action-text-attachment,
+    > .attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      > action-text-attachment,
+      > .attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}
+
+button .trix-button-group--file-tools {
+  display: none !important;
+}
+
+.attachment--preview {
+  margin: 0.6em 0;
+  text-align: center;
+  width: 100%;
+}
+.attachment {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.tribute-container {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    background: #fff;
+    padding: 0.2em 1em;
+    min-width: 15em;
+    max-width: 100%;
+  }
+
+  .highlight {
+    background: blue;
+    color: #fff;
+
+    span {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/trix.css b/app/assets/stylesheets/trix.css
@@ -549,6 +549,7 @@ trix-editor .attachment__metadata .attachment__size {
   border-radius: 4px;
   overflow-x: auto;
   text-wrap: wrap;
+  color: #333;
 }
 .trix-content img {
   max-width: 100%;