@trutoo/funnel-graph/dist/index.min.css

SVG Funnel Graph TypeScript Library.

:root{--text:#191970;--primary:#191970;--accent:#dc143c;--backdrop:rgba(0,0,0,0.75);--backdrop-text:#fff}.fg{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}.fg svg{display:block}.fg svg path,.fg svg stop{transition:all .4s ease}.fg.fg--vertical{padding-left:120px;padding-right:16px}.fg.fg--vertical .fg-labels{flex-direction:column}.fg.fg--vertical .fg-label{padding-top:24px}.fg.fg--vertical .fg-label:not(:first-child){border-top:1px solid #dc143c;border-top:1px solid var(--accent)}.fg.fg--vertical .fg-label .fg-segments{margin-top:0;margin-left:106px;width:calc(100% - 106px)}.fg.fg--vertical .fg-label .fg-segments ul{display:flex;justify-content:space-around}.fg:not(.fg--vertical){padding-top:64px;padding-bottom:16px}.fg:not(.fg--vertical) .fg-label{padding-left:24px}.fg:not(.fg--vertical) .fg-label:not(:first-child){border-left:1px solid rgba(0,0,0,.75);border-left:1px solid var(--backdrop)}.fg-container,.fg-labels{width:100%;height:100%}.fg-labels{position:absolute;display:flex;top:0;left:0;box-sizing:border-box}.fg-label{flex:1 1 0;position:relative}.fg-label .fg-label__value{font-size:24px;color:#191970;color:var(--text);line-height:18px;margin-bottom:6px}.fg-label .fg-label__title{font-size:12px;font-weight:700;color:#191970;color:var(--primary)}.fg-label .fg-label__percentage{font-size:16px;font-weight:700;color:#dc143c;color:var(--accent)}.fg-label .fg-label__segments{position:absolute;top:50%;transform:translateY(-50%);width:100%;left:0;padding:8px 24px;box-sizing:border-box;background-color:rgba(0,0,0,.75);background-color:var(--backdrop);margin-top:24px;opacity:0;transition:opacity .1s ease;cursor:default}.fg-label .fg-label__segments ul{margin:0;padding:0;list-style-type:none}.fg-label .fg-label__segments ul li{font-size:13px;line-height:16px;color:#fff;color:var(--backdrop-text);margin:18px 0}.fg-label .fg-label__segments ul li span{font-weight:700;color:#dc143c;color:var(--accent)}.fg-label:hover .fg-label__segments{opacity:1}.fg-sub-labels{display:flex;justify-content:center;margin-top:24px;position:absolute;width:100%;left:0}.fg-sub-label{display:flex;font-size:12px;color:#191970;color:var(--text);line-height:16px}.fg-sub-label:not(:first-child){margin-left:16px}.fg-sub-label .fg-sub-label__color{margin:2px 8px 2px 0;width:12px;height:12px;border-radius:50%;flex-shrink:0}