Custom style injection

[mchill]

Before submitting this feature request I have

• Reviewed the documentation and verified that my feature request isn't already a feature.
• Reviewed the existing feature requests and my feature has not been requested.
• Checked the tasks tagged issues and verified my feature is not covered

Please Describe The Problem To Be Solved
I use HTML and inline CSS to style my recipe instructions. This has a few limitations:

• No way to keep styles DRY across steps/recipes.
• Some styles are impossible to define inline. For example, you cannot add media queries for responsive layouts.

It would be nice to have an easy way to inject a custom global stylesheet that you can mount into the container.

(Optional): Suggest A Solution
I don't have experience with Vue or Nuxt, so unfortunately I don't have any good suggestions. But if you point me in the right direction, I'd be willing to take a go at implementing this.

Additional Information

• If the feature is accepted I'm willing to submit a PR to provide this feature

[mchill]

I attached an example of what I'm trying to accomplish. Right now I achieve this using the following workaround:

1. Mount a custom.css file in /app/assets

   @media (max-width: 959px) {
     .step img {
       width: 100%;
       padding-top: 16px;
     }
   }
   
   @media (min-width: 960px) {
     .step {
       display: flex;
       align-items: start;
     }
     .step img {
       width: 30%;
       padding-left: 16px;
     }
   }
   
   .ep {
     color: #48BEA6;
   }
2. Mount an overridden run.sh in /app

   # Production entry point for the frontend docker container
   
   sed -i 's#\[{ src: "~/assets/main.css" }, { src: "~/assets/style-overrides.scss" }\]#[{ src: "~/assets/main.css" }, { src: "~/assets/style-overrides.scss" }, { src: "~/assets/custom.css" }]#' nuxt.config.js
   yarn install
   yarn build
   
   # Web Server
   caddy start --config /app/Caddyfile
   
   # Start Node Application
   yarn start -p 3001
3. Wrap a step in the "step" class

   <div class="step">
     <div>
       In a small pot, combine <b>rice</b>, <b>1¼ cups water</b> <span class="ep"><b>(2¼ cups for 4 servings)</b></span>, and a <b>big pinch of salt</b>. Bring to a boil, then cover and reduce heat to low. Cook until rice is tender, 15-20 minutes. Keep covered off heat until ready to serve.
     </div>
     <img src="<url>"></img>
   </div>

[Tygo-van-den-Hurk]

I second this feature request. Has there been any progress/news/anything on this?

[brianyuen]

Got Mealie installed and this was one of my first thoughts. Would be great to have either a single text field to put in an externally hosted css file, or even one big textarea field to copy and paste css into. The values of the fields would be injected into the head of the document.