Skip to content

Commit

Permalink
skip: add modern theme files
Browse files Browse the repository at this point in the history
  • Loading branch information
netil committed Oct 26, 2023
1 parent 01ae4ae commit 769f00a
Show file tree
Hide file tree
Showing 2 changed files with 316 additions and 0 deletions.
306 changes: 306 additions & 0 deletions dist/theme/modern.css
View file
Original file line number Diff line number Diff line change
@@ -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; }

10 changes: 10 additions & 0 deletions dist/theme/modern.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 769f00a

Please sign in to comment.