@alicloud/cloud-charts
Version:

86 lines (85 loc) • 3.86 kB
CSS
:root {
--cloud-wgauge-text-color: var(--widgets-color-text-1, #333333);
--cloud-wgauge-font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
--cloud-wgauge-font-size-xs: var(--widgets-font-size-1, 12px);
--cloud-wgauge-font-size-small: var(--widgets-font-size-3, 16px);
--cloud-wgauge-font-size-medium: var(--widgets-font-size-5, 24px);
--cloud-wgauge-font-size-big: var(--widgets-font-size-6, 28px);
--font-size-big: var(--widgets-font-size-6, 28px);
--font-size-medium: var(--widgets-font-size-5, 24px);
--font-size-small: var(--widgets-font-size-3, 16px);
--cloud-wgauge-normal-color: var(--widgets-color-normal, #0064c8);
--cloud-wgauge-warning-color: var(--widgets-color-orange, #f98e1a);
--cloud-wgauge-error-color: var(--widgets-color-red, #e84738);
--cloud-wgauge-success-color: var(--widgets-color-green, #23b066);
--cloud-wgauge-help-color: var(--widgets-color-yellow, #fac31e);
--cloud-wgauge-mention-color: var(--widgets-color-purple, #6b67e0);
--cloud-wgauge-p1-color: var(--widgets-color-p1, #bf0030);
--cloud-wgauge-p2-color: var(--widgets-color-p2, #e84738);
--cloud-wgauge-p3-color: var(--widgets-color-p3, #f98e1a);
--cloud-wgauge-p4-color: var(--widgets-color-p4, #fac31e);
--cloud-wgauge-p5-color: var(--widgets-color-p5, #d1bb4f);
--cloud-wgauge-p6-color: var(--widgets-color-p6, #00bacf);
--cloud-wgauge-p7-color: var(--widgets-color-p7, #1289b8);
}
.cloud-wgauge-container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
width: 100%;
position: relative;
}
.cloud-wgauge-container .cloud-wgauge-text {
position: absolute;
color: var(--widgets-color-text-1, #333333);
font-size: var(--widgets-font-size-6, 28px);
font-weight: 500;
}
.cloud-wgauge-container .cloud-wgauge-text .cloud-wgauge-value-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
}
.cloud-wgauge-container .cloud-wgauge-text .cloud-wgauge-value-wrapper .cloud-wgauge-unit {
font-size: var(--widgets-font-size-3, 16px);
font-weight: 500;
font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
}
.cloud-wgauge-container .cloud-wgauge-text .cloud-wgauge-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
font-size: 14px;
font-weight: normal;
text-align: center;
letter-spacing: 0px;
color: var(--widgets-color-text-1, #333333);
}
.cloud-wgauge-container .cloud-wgauge-scale {
stroke: var(--widgets-color-text-2, #696969);
stroke-width: 2px;
}
.cloud-wgauge-container .cloud-wgauge-scale-num {
fill: var(--widgets-color-text-2, #696969);
font-weight: 510;
font-size: var(--widgets-font-size-1, 12px);
font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
}
.cloud-wgauge-container .cloud-wgauge-scale-num-big {
fill: var(--widgets-color-text-2, #696969);
font-weight: 510;
font-size: var(--widgets-font-size-3, 16px);
font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
}
.cloud-wgauge-container .cloud-wgauge-width-scale {
color: var(--widgets-color-text-1, #333333);
}
.cloud-wgauge-container .cloud-wgauge-svg {
position: relative;
}
.cloud-wgauge-container .cloud-wgauge-svg .cloud-wgauge-path {
stroke: var(--widgets-tooltip-cross-line, #d9d9d9);
}