Skip to content

Instantly share code, notes, and snippets.

@ahoyahoy
Last active April 26, 2021 06:00
Show Gist options
  • Select an option

  • Save ahoyahoy/2886e1395e43d08f4d7943f09d1c207f to your computer and use it in GitHub Desktop.

Select an option

Save ahoyahoy/2886e1395e43d08f4d7943f09d1c207f to your computer and use it in GitHub Desktop.
Purple Widget IFRAME -- Big
<script src="https://unpkg.com/@purple/pt-widgets/dist/purple-web-components.js"></script>
<!-- Setup here strategy ID -->
<pt-widget-page strategy="n651"></pt-widget>
<style>
/*
* customize style variables
*/
* {
--font-family: arial;
--widget-padding: 10px;
--widget-border: 1px solid #efefef;
--widget-border-radius: 5px;
--big-numbers-font-size: 16px;
--big-numbers-font-color: black;
--big-numbers-font-weight: normal;
--big-numbers-label-font-size: 12px;
--big-numbers-label-color: gray;
--small-numbers-font-size: 14px;
--small-numbers-font-color: black;
--small-numbers-font-weight: normal;
--small-numbers-label-color: gray;
--small-numbers-label-font-size: 12px;
--chart-font-size: 12px;
--chart-font-color: silver;
}
/*
* change only if you know what you are doing
*/
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
font-family: var(--font-family);
}
* {
text-decoration: none;
}
body {
padding: var(--widget-padding);
border: var(--widget-border);
border-radius: var(--widget-border-radius);
}
pt-widget-page .pt-widget-page .widget--numbers {
font-weight: var(--big-numbers-font-weight);
color: var(--big-numbers-color);
font-size: var(--big-numbers-font-size);
}
pt-widget-page .pt-widget-page .widget--numbers .row.big strong {
color: var(--big-numbers-label-color);
font-size: var(--big-numbers-label-font-size);
}
pt-widget-page .pt-widget-page .widget--numbers .row.small {
font-weight: var(--small-numbers-font-weight);
color: var(--small-numbers-color);
font-size: var(--small-numbers-font-size);
}
pt-widget-page .pt-widget-page .widget--numbers .row.small strong {
color: var(--small-numbers-label-color);
font-size: var(--small-numbers-label-font-size);
}
pt-widget-page .pt-widget-page .chartdiv {
font-size: var(--chart-font-size);
}
pt-widget-page .pt-widget-page .chartdiv g[role="region"] text {
fill: var(--chart-font-color);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment