I need to put this code inside an html box, so it all has to be in line, but css style does not load-CodePudding

The code below does not load the styles in the CSS inline, did I declare a tag wrongly?The code below does not load the styles in the CSS inline, did I declare a tag wrongly? I need to put this code inside an html box, so it all has to be in line.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<style>
   :root {
    --color: #44cc44;
  }
  
  .my-btn-container .DlocalGoButton {
    background-color: var(--color);
    padding: 15px;
  }
</style>

<body>
  <center>
    <script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
      const s = document.createElement("script");
      s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
        const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
          t = e.parentNode,
          n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
          c = document.createElement("div");
        c.classList.add("my-btn-container");
        c.classList.add("my-btn-container"); // we are adding our own class to apply css
        c.id = n, t.insertBefore(c, e);
        new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
          country: "UY",
          currency: "UYU",
          amount: "17000",
          lang: "",
          text: "quiero inscribirme"
        })
      });
    </script>

  </center>

</body>

</html>

CodePudding user response：

You're trying to reference a variable, which I don't think is your intention:

.my-btn-container .DlocalGoButton {
  background-color: var(#44cc44); /*--Here, remove var()*/
  padding: 15px;
}

CodePudding user response：

Aren't you using javascript inside this style tag here?

<style>c.classList.add("my-btn-container");

Did you try using pure css in the whole style tag? Try declaring something simple to check if it's working at first, then work your way further, for example:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Test body color</h1>
</body>

<style>
body {
  color: red;
}
</style>
</html>