Skip to content

Instantly share code, notes, and snippets.

@irmaus
Last active April 26, 2017 04:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save irmaus/bd277552436c9a1d36491921ecc13fe0 to your computer and use it in GitHub Desktop.
Save irmaus/bd277552436c9a1d36491921ecc13fe0 to your computer and use it in GitHub Desktop.
You can also add some default styling for the shareprice table and share price chart by including the following styles
.irmau-small-chart .quoteapi-chart {
width: 200px;
height: 100px;
padding: 7px 13px 13px 32px;
font-size: 11px;
color: #2e2e2e;
}
.irmau-small-chart .quoteapi-chart-panel {
height: 80px;
background: #ccc;
}
.irmau-small-chart .quoteapi-chart-panel-plot-area {
padding: 0;
}
.irmau-small-chart .quoteapi-chart-xaxis-spacing {
width: 24px;
}
.irmau-small-chart .quoteapi-chart-yaxis-spacing {
height: 24px;
}
.irmau-small-chart .quoteapi-chart-xaxis-label {
margin-top: -3px;
}
.irmau-small-chart .quoteapi-chart-panel-border {
stroke: #2e2e2e;
}
.irmau-small-chart .quoteapi-chart-gridline {
stroke: #fff;
}
.irmau-small-chart .quoteapi-chart-minor-gridline {
stroke: none;
}
.irmau-small-chart .quoteapi-chart-tick {
stroke: none;
}
.irmau-small-chart .quoteapi-chart-price {
stroke: #009fd9;
stroke-width: 1px;
}
.irmau-small-chart .quoteapi-chart-price-fill {
fill: #9fcee0;
fill-opacity: 0.3;
}
/* main chart (and nav chart) */
.irmau-main-chart .quoteapi-chart {
width: 100%;
padding: 8px 50px 50px 50px;
font-size: 10px;
color: #2e2e2e;
}
.irmau-main-chart .quoteapi-chart-panel {
height: 250px;
background: #f2f2f2;
background: linear-gradient(0deg, #f2f2f2, #fff);
}
.irmau-main-chart .quoteapi-chart-panel-plot-area {
padding: 0;
}
.irmau-main-chart .quoteapi-chart-panel-border {
stroke: #858688;
stroke-opacity: 0.5;
}
.irmau-main-chart .quoteapi-chart-price {
stroke: #00429d;
stroke-width: 1px;
}
.irmau-main-chart .quoteapi-chart-price-fill {
fill: #00429d;
fill-opacity: 0.05;
}
.irmau-main-chart .quoteapi-chart-volume {
stroke: #496396;
stroke-opacity: 0.4;
}
.irmau-main-chart .quoteapi-chart-announcement-marker {
fill: #496396;
}
.irmau-main-chart .quoteapi-chart-price-sensitive-announcement-marker {
fill: #496396;
}
.irmau-nav-chart .quoteapi-chart-panel {
height: 90px;
}
.irmau-nav-chart .quoteapi-chart-price {
stroke-width: 1.5px;
}
.irmau-nav-chart .quoteapi-nav-chart-outside-range {
fill: #fff;
fill-opacity: 0.666;
}
.irmau-nav-chart .quoteapi-nav-chart-gadget {
stroke: #9b9c9d;
}
.sptable{
margin: 0 auto !important;
}
.sptable .columns {
width:8.3%;
padding: 0;
}
.sptable .column:last-child:not(:first-child), .sptable .columns:last-child:not(:first-child){
float: left;
}
.sptable h4 {
font-size: 14px;
text-align: center;
margin: 0;
min-height: 60px;
background: #CCC;
color: #444;
padding: 10px 0;
}
.sptable p {
margin: 0;
text-align: center;
background: #EEE;
padding: 10px 0;
min-height: 50px;
}
.chart-button button:hover {
background:#063669;
border: 3px solid #063669;
color:#FFF;
box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}
.chart-button button {
border: 3px solid #CCC;
padding:10px 20px;
border-radius: 3px;
}
.chart-buttons {
text-align: center;
margin-bottom:20px;
}
.chart-tabs {
display:flex;
}
.chart-tab:hover {
background:rgba(0,0,0,0.10);
}
.chart-tab {
display:inline-block;
padding:5px 10px;
margin:0;
border:1px solid #CCC;
border-width: 1px 1px 0px 1px;
cursor:pointer;
}
.chart-tab-current {
background:rgba(0,0,0,0.05);
}
.chart-tab-content {
display:flex;
padding:20px 0;
border:1px solid #CCC;
}
.chart-buttons li:hover {
background:#063669;
color:#FFF;
text-shadow:1px 1px 2px #000;
border:1px solid #063669;
}
.chart-buttons li {
color:#444;
background:#FFF;
display: inline-block;
cursor: pointer;
padding: 4px 8px;
font-size:14px;
border-radius: 3px;
border:1px solid #CCC;
}
.centered {
text-align: center;
}
.irmau-from-to {
margin-bottom:20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment