Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Aral Balkan
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 days ago

FML *smdh*

#stripe #checkout #managedPayments #darkMode #responsiveness #CSS #web #dev

Screenshot of CSS file (detail):

#checkout {
  /*
    Since we have almost no control over the appearance of the embedded iframe and since it appears to be hardcoded to some narrow max width, use a CSS transform to make it fit the existing design when we’re at full width. Safari’s clearly snapshotting a bitmap as it blurs this but Safari today messes up so many things, so… 🤷
  */
  @media screen and (min-width: 585px) {
    transform: scale(1.27);
    transform-origin: top left;
    margin-left: -10em;

    /*
      Ensure bottom of the embedded form isn’t hidden.
    */
    margin-bottom: 14em;
  }

  /* Kludge dark mode support. Because clearly a $100B+ company that handles >$2T in  transactions can’t do it themselves. */
  @media screen and (prefers-color-scheme: dark) {
    /* Invert all elements on the body while attempting to not alter the hue substantially. */
    filter: invert(100%) hue-rotate(180deg);
  }
}
Screenshot of CSS file (detail): #checkout { /* Since we have almost no control over the appearance of the embedded iframe and since it appears to be hardcoded to some narrow max width, use a CSS transform to make it fit the existing design when we’re at full width. Safari’s clearly snapshotting a bitmap as it blurs this but Safari today messes up so many things, so… 🤷 */ @media screen and (min-width: 585px) { transform: scale(1.27); transform-origin: top left; margin-left: -10em; /* Ensure bottom of the embedded form isn’t hidden. */ margin-bottom: 14em; } /* Kludge dark mode support. Because clearly a $100B+ company that handles >$2T in transactions can’t do it themselves. */ @media screen and (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ filter: invert(100%) hue-rotate(180deg); } }
Screenshot of CSS file (detail): #checkout { /* Since we have almost no control over the appearance of the embedded iframe and since it appears to be hardcoded to some narrow max width, use a CSS transform to make it fit the existing design when we’re at full width. Safari’s clearly snapshotting a bitmap as it blurs this but Safari today messes up so many things, so… 🤷 */ @media screen and (min-width: 585px) { transform: scale(1.27); transform-origin: top left; margin-left: -10em; /* Ensure bottom of the embedded form isn’t hidden. */ margin-bottom: 14em; } /* Kludge dark mode support. Because clearly a $100B+ company that handles >$2T in transactions can’t do it themselves. */ @media screen and (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ filter: invert(100%) hue-rotate(180deg); } }
  • Copy link
  • Flag this post
  • Block
Aral Balkan
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 days ago

Context: https://mastodon.ar.al/@aral/116126593177980252

  • Copy link
  • Flag this comment
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.34 no JS en
Automatic federation enabled
Log in
Instance logo
  • Explore
  • About
  • Members
  • Code of Conduct