gobierto-vizzs
Version:
Shared data visualizations for Gobierto projects
277 lines (234 loc) • 4.69 kB
CSS
:root {
--gv-white: #fff;
--gv-black: #000;
--gv-grey: #c4c4c4;
--gv-color-1: #008e9c;
--gv-color-2: #12365b;
--gv-color-3: #ff776d;
--gv-color-4: #f8b205;
--gv-color-5: #a6cee3;
--gv-color-6: #1f78b4;
--gv-color-7: #b2df8a;
--gv-color-8: #33a02c;
--gv-color-9: #fb9a99;
--gv-color-10: #e31a1c;
--gv-color-11: #fdbf6f;
--gv-color-12: #ff7f00;
}
.gv-container {
position: relative;
}
.gv-tooltip {
opacity: 0;
z-index: 100;
height: auto;
color: var(--gv-black);
background-color: var(--gv-white);
border: 1px solid var(--gv-grey);
border-radius: 4px;
padding: .5rem;
position: absolute;
overflow-y: auto;
box-shadow: 0 0 3px #0003;
}
.gv-tooltip:empty {
display: none;
}
.beeswarm-tooltip-id {
text-transform: uppercase;
border-bottom: 1px solid var(--gv-grey);
font-size: 1rem;
font-weight: bold;
}
.beeswarm-tooltip-values {
justify-content: space-between;
align-items: center;
margin-top: .5rem;
display: flex;
}
.beeswarm-tooltip-date {
color: var(--gv-grey);
text-align: center;
font-size: .75rem;
}
.beeswarm-tooltip-radius {
font-size: .875rem;
font-weight: bold;
}
.tooltip-barchart-stacked-title {
border-bottom: 1px solid var(--gv-grey);
margin-bottom: .5rem;
padding-bottom: .25rem;
font-weight: bold;
display: block;
}
.tooltip-barchart-stacked-grid {
grid-template-columns: 16px 1fr 1fr;
align-items: center;
margin-bottom: .5rem;
display: grid;
}
.tooltip-barchart-stacked-grid-key-color {
width: 16px;
height: 16px;
display: inline-block;
}
.tooltip-barchart-stacked-grid-key, .tooltip-barchart-stacked-grid-value {
padding: 0 .25rem;
font-size: 1rem;
display: inline-block;
}
.tooltip-barchart-stacked-grid-key {
text-transform: capitalize;
text-align: left;
font-weight: bold;
}
.tooltip-barchart-stacked-grid-value {
text-align: right;
}
.axis-x-legend {
text-transform: capitalize;
fill: #828282;
font-size: 14px;
font-weight: bold;
}
.gv-legend-bar-stacked {
flex-direction: column;
gap: .875rem;
max-width: 150px;
display: flex;
position: absolute;
top: 10px;
left: 10px;
}
.gv-legend-bar-stacked-right {
left: inherit;
right: 10px;
}
.bar-stack-label-rect {
border-radius: 4px;
flex: none;
width: 16px;
height: 16px;
}
.bar-stacked-legend-text {
fill: #828282;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
overflow: hidden;
}
.bar-stack-label {
cursor: pointer;
align-items: center;
gap: .25rem;
display: flex;
}
.gv-plot .axis-x {
color: var(--gv-grey);
font-size: .875rem;
}
.gv-tooltip-bar-stacked {
width: max-content;
}
.gv-plot .axis-y {
text-transform: uppercase;
font-size: .875rem;
}
.bar-chart-small-tooltip-title {
text-transform: uppercase;
border-bottom: 1px solid var(--gv-grey);
font-size: .75rem;
font-weight: bold;
}
.bar-chart-small-tooltip-value {
color: var(--gv-black);
font-size: .75rem;
}
.treemap-breadcrumb {
align-items: center;
height: 100%;
font-size: .875rem;
display: flex;
}
.treemap-breadcrumb > :last-child {
font-weight: bold;
}
.treemap-item {
color: var(--gv-white);
box-sizing: border-box;
width: max-content;
max-width: calc(100% - 2px);
padding: .5rem;
font-size: .875rem;
overflow: hidden;
}
.treemap-item * {
overflow: hidden;
}
.treemap-tooltip-block:not(:first-child) {
padding-top: .5rem;
}
.treemap-tooltip-block:not(:last-child) {
padding-bottom: .5rem;
}
.treemap-tooltip-block + .treemap-tooltip-block {
border-top: 1px solid var(--gv-grey);
}
.treemap-tooltip-id {
text-transform: uppercase;
font-size: .875rem;
font-weight: bold;
}
.treemap-tooltip-values {
font-size: .875rem;
}
.gv-container {
display: grid;
}
.gv-legend {
flex-wrap: wrap;
grid-area: 1 / -1;
place-self: start end;
margin: -.25em -1em;
font-size: .875rem;
display: flex;
}
.gantt-legend-item {
align-items: center;
max-width: 25vw;
margin: .25em 1em;
display: flex;
}
.gantt-legend-item > :not(:first-child) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.gantt-legend-item > :first-child {
flex-shrink: 0;
margin-right: .5em;
}
.gantt-legend-item i {
width: 1em;
height: 1em;
}
.gantt-tooltip-id {
border-bottom: 1px solid var(--gv-grey);
font-size: 1rem;
font-weight: bold;
}
.gantt-tooltip-values {
color: var(--gv-grey);
justify-content: space-between;
align-items: center;
margin-top: .5rem;
font-size: .75rem;
font-weight: bold;
display: flex;
}
.gantt-tooltip-values > :not(:first-child) {
margin-left: 1em;
font-weight: normal;
}
/*# sourceMappingURL=index.css.map */