From 769f00a7a9e2f4e8f31cdb42e9c7988f0832dcb1 Mon Sep 17 00:00:00 2001 From: netil Date: Thu, 26 Oct 2023 17:31:45 +0900 Subject: [PATCH] skip: add modern theme files --- dist/theme/modern.css | 306 ++++++++++++++++++++++++++++++++++++++ dist/theme/modern.min.css | 10 ++ 2 files changed, 316 insertions(+) create mode 100644 dist/theme/modern.css create mode 100644 dist/theme/modern.min.css diff --git a/dist/theme/modern.css b/dist/theme/modern.css new file mode 100644 index 000000000..06401d3f1 --- /dev/null +++ b/dist/theme/modern.css @@ -0,0 +1,306 @@ +/*! + * Copyright (c) 2017 ~ present NAVER Corp. + * billboard.js project is licensed under the MIT license + * + * billboard.js, JavaScript chart library + * https://naver.github.io/billboard.js/ + * + * @version 3.10.0 + */ +@charset "UTF-8"; +/*-- Insight Theme --*/ +/*-- Default color pattern --*/ +.bb-color-pattern { + background-image: url("#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;"); } + +/*-- Chart --*/ +.bb svg { + font-size: 12px; + font-family: -apple-system, "system-ui", "Noto Sans", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; + line-height: 1; } + +.bb path, .bb line { + fill: none; + stroke: #cecece; } + +.bb text, .bb .bb-button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + fill: #555; + font-size: 10.5px; } + +.bb-legend-item-title, +.bb-xgrid-focus, +.bb-ygrid-focus, +.bb-ygrid { + shape-rendering: crispEdges; } + +.bb-chart-arcs .bb-needle { + fill: #000; } + +/*-- Axis --*/ +.bb-axis { + shape-rendering: crispEdges; } + +.bb-axis-y text, .bb-axis-y2 text { + fill: #737373; } + +.bb-event-rects { + fill-opacity: 1 !important; } + .bb-event-rects .bb-event-rect { + fill: transparent; } + .bb-event-rects .bb-event-rect._active_ { + fill: rgba(39, 201, 3, 0.05); } + +.tick._active_ text { + fill: #00c83c !important; } + +/*-- Grid --*/ +.bb-grid { + pointer-events: none; } + .bb-grid line { + stroke: #f1f1f1; } + +.bb-xgrid-focus line, .bb-ygrid-focus line { + stroke: #d2bad8; } + +/*-- Text on Chart --*/ +.bb-text.bb-empty { + fill: #767676; } + +/*-- Line --*/ +.bb-line { + stroke-width: 1px; } + +/*-- Point --*/ +.bb-circle._expanded_ { + stroke-width: 2px; + stroke: red; } + +rect.bb-circle._expanded_, use.bb-circle._expanded_ { + stroke-width: 1px; } + +.bb-selected-circle { + fill: white; + stroke-width: 2px; } + +/*-- Bar --*/ +.bb-bar { + stroke-width: 0; } + .bb-bar._expanded_ { + fill-opacity: 0.75; } + +/*-- Candlestick --*/ +.bb-candlestick { + stroke-width: 1px; } + .bb-candlestick._expanded_ { + fill-opacity: 0.75; } + +/*-- Focus --*/ +.bb-target.bb-focused, .bb-circles.bb-focused { + opacity: 1; } + .bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step, .bb-circles.bb-focused path.bb-line, .bb-circles.bb-focused path.bb-step { + stroke-width: 2px; } + +.bb-target.bb-defocused, .bb-circles.bb-defocused { + opacity: 0.3 !important; } + .bb-target.bb-defocused .text-overlapping, .bb-circles.bb-defocused .text-overlapping { + opacity: .05 !important; } + +/*-- Region --*/ +.bb-region rect { + fill: #71808d; + fill-opacity: 0.1; } + +.bb-region.selected rect { + fill: #27c903; } + +/*-- Zoom region --*/ +.bb-zoom-brush { + fill-opacity: .1; + fill: #838181; } + +/*-- Brush --*/ +.bb-brush .extent { + fill-opacity: 0.1; } + +.bb-brush .selection { + fill: #838181; + fill-opacity: 0.2; } + +.bb-brush path { + stroke: #838181; } + +/*-- Select - Drag --*/ +/*-- Legend --*/ +.bb-legend-item { + user-select: none; } + .bb-legend-item line.bb-legend-item-tile { + stroke-linecap: round; + transform: translate(7px, 1px); + stroke-dasharray: 1 20; } + +.bb-legend-item-hidden { + opacity: 0.15; } + +.bb-legend-background { + opacity: 0.75; + fill: white; + stroke: lightgray; + stroke-width: 1; } + +/*-- Title --*/ +.bb-title { + font-size: 14px; } + +/*-- Treemap --*/ +.bb-chart-treemaps rect { + stroke: #000; + stroke-width: 0.5px; } + +/*-- Tooltip --*/ +.bb-tooltip-container { + z-index: 10; + font-family: -apple-system, "system-ui", "Noto Sans", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; + user-select: none; } + +.bb-tooltip { + border-collapse: separate; + border-spacing: 0; + empty-cells: show; + border: 1px solid #999; + color: #fff; + border-radius: 5px; + background-color: #404244; + text-align: left; + font-size: 11px; + white-space: nowrap; + opacity: 0.9; } + .bb-tooltip th { + font-size: 11px; + padding: 3px 6px 0 6px; + text-align: left; } + .bb-tooltip td { + padding: 3px; } + .bb-tooltip td:first-child { + padding-left: 7px; } + .bb-tooltip td:last-child { + padding-right: 8px; } + .bb-tooltip td > span, .bb-tooltip td > svg { + display: inline-block; + width: 7px; + height: 7px; + margin-right: 6px; + border-radius: 5px; + vertical-align: middle; } + .bb-tooltip td.value { + border-left: 1px solid transparent; + text-align: right; } + .bb-tooltip .bb-tooltip-title { + display: inline-block; + color: #aaa; + line-height: 20px; } + .bb-tooltip .bb-tooltip-detail table { + border-collapse: collapse; + border-spacing: 0; } + .bb-tooltip .bb-tooltip-detail .bb-tooltip-name, .bb-tooltip .bb-tooltip-detail .bb-tooltip-value { + font-size: 11px; + line-height: 13px; + padding: 4px 0 3px; + color: #444; + text-align: left; + font-weight: normal; } + .bb-tooltip .bb-tooltip-detail .bb-tooltip-value { + padding-left: 5px; + font-weight: 800; + font-size: 12px; } + +/*-- Area --*/ +.bb-area { + stroke-width: 0; + opacity: 0.2; } + +/*-- Arc --*/ +.bb-chart-arcs-title { + dominant-baseline: middle; + font-size: 1.3em; } + +text.bb-chart-arcs-gauge-title { + dominant-baseline: middle; + font-size: 2.7em; } + +.bb-chart-arcs { + /*-- Polar --*/ } + .bb-chart-arcs .bb-chart-arcs-background { + fill: #e0e0e0; + stroke: #ccc; } + .bb-chart-arcs .bb-chart-arcs-gauge-unit { + fill: #000; + font-size: 16px; } + .bb-chart-arcs .bb-chart-arcs-gauge-min, .bb-chart-arcs .bb-chart-arcs-gauge-max { + fill: #777; } + .bb-chart-arcs .bb-chart-arcs-title { + font-size: 1.8em; + fill: #000; + font-weight: 600; } + .bb-chart-arcs path.empty { + fill: #eaeaea; + stroke-width: 0; } + .bb-chart-arcs .bb-levels circle { + fill: none; + stroke: #cecece; + stroke-width: .5px; } + .bb-chart-arcs .bb-levels text { + fill: #848282; } + +.bb-chart-arc .bb-gauge-value { + fill: #000; } + +.bb-chart-arc path { + stroke: #fff; } + +.bb-chart-arc rect { + stroke: #fff; + stroke-width: 1; } + +.bb-chart-arc text { + fill: #fff; + font-size: 11px; } + +/*-- Radar --*/ +.bb-chart-radars .bb-levels polygon { + fill: none; + stroke: #cecece; + stroke-width: .5px; } + +.bb-chart-radars .bb-levels text { + fill: #848282; } + +.bb-chart-radars .bb-axis line { + stroke: #cecece; + stroke-width: .5px; } + +.bb-chart-radars .bb-axis text { + font-size: 1.15em; + cursor: default; } + +.bb-chart-radars .bb-shapes polygon { + fill-opacity: .2; + stroke-width: 1px; } + +/*-- Button --*/ +.bb-button { + position: absolute; + top: 10px; + right: 10px; } + .bb-button .bb-zoom-reset { + border: 1px solid #999; + background-color: #404244; + color: #fff; + opacity: 0.9; + padding: 5px; + border-radius: 5px; + cursor: pointer; } + diff --git a/dist/theme/modern.min.css b/dist/theme/modern.min.css new file mode 100644 index 000000000..672d615ab --- /dev/null +++ b/dist/theme/modern.min.css @@ -0,0 +1,10 @@ +@charset "UTF-8"; +/*! + * Copyright (c) 2017 ~ present NAVER Corp. + * billboard.js project is licensed under the MIT license + * + * billboard.js, JavaScript chart library + * https://naver.github.io/billboard.js/ + * + * @version 3.10.0 + */.bb-color-pattern{background-image:url(#7ea9fa;#ffcd1e;#d33043;#41c464;#c86b74;#006bc2;#2a7e41;#f27c00;#c159ff;#bed017;)}.bb svg{font-family:-apple-system,"system-ui",Noto Sans,Malgun Gothic,맑은 고딕,helvetica,Apple SD Gothic Neo,sans-serif;font-size:12px;line-height:1}.bb line,.bb path{fill:none;stroke:#cecece}.bb .bb-button,.bb text{fill:#555;font-size:10.5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid,.bb-ygrid-focus{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.bb-axis{shape-rendering:crispEdges}.bb-axis-y text,.bb-axis-y2 text{fill:#737373}.bb-event-rects{fill-opacity:1!important}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:rgba(39,201,3,.05)}.tick._active_ text{fill:#00c83c!important}.bb-grid{pointer-events:none}.bb-grid line{stroke:#f1f1f1}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#d2bad8}.bb-text.bb-empty{fill:#767676}.bb-line{stroke-width:1px}.bb-circle._expanded_{stroke-width:2px;stroke:red}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-circles.bb-focused,.bb-target.bb-focused{opacity:1}.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step,.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step{stroke-width:2px}.bb-circles.bb-defocused,.bb-target.bb-defocused{opacity:.3!important}.bb-circles.bb-defocused .text-overlapping,.bb-target.bb-defocused .text-overlapping{opacity:.05!important}.bb-region rect{fill:#71808d;fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush{fill-opacity:.1;fill:#838181}.bb-brush .extent{fill-opacity:.1}.bb-brush .selection{fill:#838181;fill-opacity:.2}.bb-brush path{stroke:#838181}.bb-legend-item{user-select:none}.bb-legend-item line.bb-legend-item-tile{stroke-linecap:round;stroke-dasharray:1 20;transform:translate(7px,1px)}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{fill:#fff;stroke:#d3d3d3;stroke-width:1;opacity:.75}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#000;stroke-width:.5px}.bb-tooltip-container{font-family:-apple-system,"system-ui",Noto Sans,Malgun Gothic,맑은 고딕,helvetica,Apple SD Gothic Neo,sans-serif;user-select:none;z-index:10}.bb-tooltip{background-color:#404244;border:1px solid #999;border-collapse:separate;border-radius:5px;border-spacing:0;color:#fff;empty-cells:show;opacity:.9;white-space:nowrap}.bb-tooltip,.bb-tooltip th{font-size:11px;text-align:left}.bb-tooltip th{padding:3px 6px 0}.bb-tooltip td{padding:3px}.bb-tooltip td:first-child{padding-left:7px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{border-radius:5px;display:inline-block;height:7px;margin-right:6px;vertical-align:middle;width:7px}.bb-tooltip td.value{border-left:1px solid transparent;text-align:right}.bb-tooltip .bb-tooltip-title{color:#aaa;display:inline-block;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{color:#444;font-size:11px;font-weight:400;line-height:13px;padding:4px 0 3px;text-align:left}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:12px;font-weight:800;padding-left:5px}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:#ccc}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-max,.bb-chart-arcs .bb-chart-arcs-gauge-min{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{fill:#000;font-size:1.8em;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#cecece;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:11px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#cecece;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#cecece;stroke-width:.5px}.bb-chart-radars .bb-axis text{cursor:default;font-size:1.15em}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;right:10px;top:10px}.bb-button .bb-zoom-reset{background-color:#404244;border:1px solid #999;border-radius:5px;color:#fff;cursor:pointer;opacity:.9;padding:5px} \ No newline at end of file