diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 1e867d52..8b79784a 100644 --- 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 index 8216ba8c..5bc03d2e 100644 --- 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%;