/**** FONTS ****/ :host { color: {{g.theme.foreground1}}; font-family: {{g.theme.font}}; display: inline-block; position: relative; font-size: 1em; margin: 0; padding: 0; } .large-headline { font-size: 3.5em; font-weight: 500; line-height: 0.95; font-family: {{g.theme.defaultFontStyle === 'serif' ? g.theme.serifFont : g.theme.font}}; } .medium-headline { font-size: 2.5em; font-weight: 500; line-height: 0.95; font-family: {{g.theme.defaultFontStyle === 'serif' ? g.theme.serifFont : g.theme.font}}; } .headline { font-size: 1.7em; font-weight: 500; line-height: 1; font-family: {{g.theme.defaultFontStyle === 'serif' ? g.theme.serifFont : g.theme.font}}; } .mainpoint { font-size: 1.35em; font-weight: 400; line-height: 1.3; } .submainpoint { font-size: 1.12em; font-weight: 400; line-height: 1.2; } .serif, .th-serif { font-family: {{g.theme.serifFont}}; } .sans-serif, .th-sans-serif { font-family: {{g.theme.sansSerifFont}}; } /* applies to everything inside of the component with this class */ :host(.serif), :host(.th-serif), :host(.serif) /deep/ *, :host(.th-serif) /deep/ * { font-family: {{g.theme.serifFont}}; } /* applies to everything inside of the component with this class */ :host(.sans-serif), :host(.th-sans-serif), :host(.sans-serif) /deep/ *, :host(.th-sans-serif) /deep/ * { font-family: {{g.theme.sansSerifFont}}; } .subpoint { font-size: 1.0em; font-weight: 300; line-height: 1.2; } .chart { font-size: 0.95em; font-weight: 400; text-align: center; line-height: 1.3; } .label, .defaultvalue, .wrapped-values, .note { font-size: 0.85em; font-weight: 600; line-height: 1.3; } .xLabel { font-size: 0.7em; font-weight: 600; } .wrapped-labels { word-break: normal; -ms-word-break: normal; word-break: normal; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .caps { text-transform: uppercase; } .center { text-align: center; } #container a { color: {{g.theme.accent0}} } .background-color { background-color: {{g.theme.background}}; } .d3-slider { border-color: {{g.theme.foreground1}}; } .d3-slider-handle { background: {{g.theme.foreground2}}; border: 1px solid {{g.theme.foreground1}}; } .word-wrap { /* Break text to wrap when very long and not broken (i.e. URLs) */ word-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /**** CHART STYLES ****/ .axis, .xLabel, .yLabel { fill: {{g.theme.foreground1}}; stroke: {{g.theme.foreground1}}; color:{{g.theme.foreground1}}; } .tick { fill: {{g.theme.foreground1}}; color:{{g.theme.foreground1}}; } .data0 { fill: {{g.theme.accent0}}; stroke: {{g.theme.accent0}}; color: {{g.theme.accent0}}; } .data1 { fill: {{g.theme.accent1}}; stroke: {{g.theme.accent1}}; color: {{g.theme.accent1}}; } .data2 { fill: {{g.theme.accent2}}; stroke: {{g.theme.accent2}}; color: {{g.theme.accent2}}; } .data3 { fill: {{g.theme.accent3}}; stroke: {{g.theme.accent3}}; color: {{g.theme.accent3}}; } .data4 { fill: {{g.theme.accent4}}; stroke: {{g.theme.accent4}}; color: {{g.theme.accent4}}; } .data5 { fill: {{g.theme.accent5}}; stroke: {{g.theme.accent5}}; color: {{g.theme.accent5}}; } .data6 { fill: {{g.theme.accent6}}; stroke: {{g.theme.accent6}}; color: {{g.theme.accent6}}; } .data7 { fill: {{g.theme.accent7}}; stroke: {{g.theme.accent7}}; color: {{g.theme.accent7}}; } .data8 { fill: {{g.theme.accent8}}; stroke: {{g.theme.accent8}}; color: {{g.theme.accent8}}; } .data9 { fill: {{g.theme.accent9}}; stroke: {{g.theme.accent9}}; color: {{g.theme.accent9}}; } .data10 { fill: {{g.theme.accent10}}; stroke: {{g.theme.accent10}}; color: {{g.theme.accent10}}; } .data11 { fill: {{g.theme.accent11}}; stroke: {{g.theme.accent11}}; color: {{g.theme.accent11}}; } .data12 { fill: {{g.theme.accent12}}; stroke: {{g.theme.accent12}}; color: {{g.theme.accent12}}; } .data13 { fill: {{g.theme.accent13}}; stroke: {{g.theme.accent13}}; color: {{g.theme.accent13}}; } .data14 { fill: {{g.theme.accent14}}; stroke: {{g.theme.accent14}}; color: {{g.theme.accent14}}; } .data15 { fill: {{g.theme.accent15}}; stroke: {{g.theme.accent15}}; color: {{g.theme.accent15}}; } .data16 { fill: {{g.theme.accent16}}; stroke: {{g.theme.accent16}}; color: {{g.theme.accent16}}; } .data17 { fill: {{g.theme.accent17}}; stroke: {{g.theme.accent17}}; color: {{g.theme.accent17}}; } .data18 { fill: {{g.theme.accent18}}; stroke: {{g.theme.accent18}}; color: {{g.theme.accent18}}; } .data19 { fill: {{g.theme.accent19}}; stroke: {{g.theme.accent19}}; color: {{g.theme.accent19}}; } .data20 { fill: {{g.theme.accent20}}; stroke: {{g.theme.accent20}}; color: {{g.theme.accent20}}; } .data21 { fill: {{g.theme.accent21}}; stroke: {{g.theme.accent21}}; color: {{g.theme.accent21}}; } .data22 { fill: {{g.theme.accent22}}; stroke: {{g.theme.accent22}}; color: {{g.theme.accent22}}; } .data23 { fill: {{g.theme.accent23}}; stroke: {{g.theme.accent23}}; color: {{g.theme.accent23}}; } .data24 { fill: {{g.theme.accent24}}; stroke: {{g.theme.accent24}}; color: {{g.theme.accent24}}; } .data25 { fill: {{g.theme.accent25}}; stroke: {{g.theme.accent25}}; color: {{g.theme.accent25}}; } .data26 { fill: {{g.theme.accent26}}; stroke: {{g.theme.accent26}}; color: {{g.theme.accent26}}; } .fill-background { fill: {{g.theme.background}}; } .fill-foreground { fill: {{g.theme.foreground1}}; } .fill-foreground2 { fill: {{g.theme.foreground2}}; } .stroke-background { stroke: {{g.theme.background}}; } .stroke-foreground { stroke: {{g.theme.foreground1}}; } .no-fill { fill: none; } .no-stroke { stroke: none; } .background0 { background-color: {{g.theme.accent0}}; } /**** QUOTEBOX STYLES ****/ .quotebox { border: 3px solid {{g.theme.foreground2}}; border-bottom: none; } .img-container, .border-bottom { border-top: 2px solid {{g.theme.foreground2}}; } .img { border: 4px solid {{g.theme.accent0}}; } /**** TWEET STYLES ****/ .tweetbox { border: 3px solid {{g.theme.foreground2}}; border-bottom: none; } .icon { width: 22px; position: absolute; margin-top: -11px; margin-left: 75%; } .icon-wrapper { border-top: 3px solid {{g.theme.foreground2}}; } /**** STORIES STYLES ****/ .story-link { color: {{g.theme.foreground1}}; } .story-title { font-size: 1.3em; font-weight: 400; line-height: 1.2; } .photo-container { border: 2px solid {{g.theme.foreground2}}; } span.selected-story { color: {{g.theme.foreground1}}; } /**** MAP STYLES ****/ .mark { fill: {{g.theme.foreground1}}; } .map-border { stroke: {{g.theme.foreground1}}; fill: {{g.theme.background}}; } .active { fill: {{g.theme.foreground2}}; stroke-width: 2px; } /**** BY-LINE ****/ .wsj { background: {{g.theme.logo || "url('/bower_components/thelma-components/images/wsj60.jpg')"}}; } .marketwatch { background: {{g.theme.logo || "url('/bower_components/thelma-components/images/marketwatch.jpg')"}}; } }