Codex · IX

  - 

     ,  , ,   . CSS variablemey  ;  .      , ,      .

 theme fixedbe'.   CSS -   .      .

   ,  qlhwI'pu'     .  .    ,    .

Default

CSS Hutlh, attribute Hutlh. naDev button 'ej popup wa' charcoal rItlh SeH. theme="dark" 'oH, default, vaj qonchugh pagh choH.

Buy now

  

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

 theme

theme="light" yIchel 'ej button 'ej popup chIS-rurbogh moj. wa' attribute, CSS Hutlh.

Get access

  

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

, theme fixed 

    CSS  ,  .  ,   ,   .  .

 

indigo    indigo , CSS variablemey - .    .

Buy the eBook

  

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #4f46e5;
  --cm-button-color: #fff;
  --cm-button-radius: 9999px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #1e1b4b;
  --cm-color: #e0e7ff;
  --cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 9999px;
}

Terminal

 ,  monospace ,  .    .    .

> buy_license

  

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #001b00;
  --cm-button-color: #39ff14;
  --cm-button-radius: 0;
  --cm-font: 'Courier New', monospace;
  /* the popup, styled to match */
  --cm-modal-bg: #000;
  --cm-color: #39ff14;
  --cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
  border: 1px solid #39ff14;
  border-radius: 0;
}
coin-moebius-buy::part(provider) {
  border-radius: 0;
}



 pink     pink .        .

Add to cart

  

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #ec4899;
  --cm-button-color: #fff;
  --cm-button-radius: 14px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff1f7;
  --cm-color: #831843;
  --cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 12px;
}

Gradient

gradient  ,   .    .

Reserve a spot

  

coin-moebius-buy::part(button) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 2rem;
  font-weight: 700;
}
coin-moebius-buy {
  /* the popup, picking up the gradient's colors */
  --cm-modal-bg: #f5f3ff;
  --cm-color: #4c1d95;
  --cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
  border-top: 4px solid #764ba2;
}



- ,  ,   .   .

Purchase

  

coin-moebius-buy {
  /* the button */
  --cm-button-bg: transparent;
  --cm-button-color: #374151;
  --cm-button-radius: 6px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff;
  --cm-color: #374151;
  --cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
  border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

-  

   .   , cardDaq ,        .   .

 ?

- .    .

Leave a tip

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #b45309;
  --cm-button-color: #fff;
  --cm-button-radius: 8px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #fffaf3;
  --cm-color: #7c4a02;
  --cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
}

  

editable-=""      , -, ,    . , default ,    fixed     .          ,     .

Theming reference

  .  variablemey ; ::()-  .

CSS custom properties

coin-moebius-  ( , custom  )  :

Property	Default	 
`--cm-font`	`system-ui, --system, BlinkMacSystemFont, sans-serif`	    modal       .
`--cm-color`	`#ededed` (theme="light"  `#1f1f1f`)	     .
`--cm-button-bg`	`#222` (theme="light"  `#f5f5f5`)	  . default-   .
`--cm-button-color`	`#ededed` (theme="light"  `#1f1f1f`)	  .
`--cm-button-radius`	`6px`	  radius. pill  `999px`,   `0` .
`--cm-modal-bg`	`#222` (theme="light"  `#f5f5f5`)	  .
`--cm-modal-overlay`	`rgba(0, 0, 0, 0.45)`	 modal   .

::() 

 variablemey  ,  CSS- component   .   :

Part	Element
`button`	 .
`modal`	  -  .
`dialog`	  modal box.
`provider`	   - .
`provider-icon`	    .
`provider-name`	  .
`close`	wIvwI' bIngDaq "qIl" button.
`instructions`	-     (  +  ).

 & 

default-  .   ,  theme="light" .   ,     ,     .  ?  variablemey     .

 

1-  -  : 120ms hover , modal z-index,     /padding. -  ,    ::()  !important ;    CSS variable   .  < href="https://github.com/aquarian-metals/coin-moebius/issues" target="_blank" ="">SDK  tracker  .

-  

   , ,       .   -   download .

←  

,  

       .  , card .

  