@opentiny/vue-theme
Version:
An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
1 lines • 2.02 kB
CSS
.hui-chart{position:relative;height:100%}.tiny-chart{--tv-ChartCore-data-empty-text-color:var(--tv-color-text-weaken, #808080);--tv-ChartCore-data-empty-font-size:var(--tv-font-size-default, 14px);--tv-ChartCore-data-empty-bg-color:var(--tv-color-bg-secondary, #ffffff)}.tiny-chart-data-empty{position:absolute;left:0;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--tv-ChartCore-data-empty-bg-color);color:var(--tv-ChartCore-data-empty-text-color);font-size:var(--tv-ChartCore-data-empty-font-size)}.tiny-chart-component-loading{position:absolute;left:0;right:0;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--tv-ChartCore-data-empty-bg-color)}.tiny-chart-component-loading .circular{width:42px;height:42px;-webkit-animation:loading-rotate 2s linear infinite;animation:loading-rotate 2s linear infinite}.tiny-chart-component-loading .path{-webkit-animation:loading-dash 1.5s ease-in-out infinite;animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#20a0ff;stroke-linecap:round}.tiny-chart-mask-status{-webkit-filter:blur(1px);filter:blur(1px)}@-webkit-keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}}