@opentiny/vue-theme/wizard/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-wizard{--tv-Wizard-font-size:var(--tv-font-size-default, 14px);--tv-Wizard-icon-color:var(--tv-color-icon-hover, #191919);--tv-Wizard-normal-icon-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Wizard-text-color:var(--tv-color-text, #191919);--tv-Wizard-detail-border-radius:var(--tv-border-radius-md, 6px);--tv-Wizard-detail-bg-color:var(--tv-color-warn-bg, #ff8800);--tv-Wizard-icon-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Wizard-icon-border-color:var(--tv-color-border-active, #191919);--tv-Wizard-node-text-color:var(--tv-color-text, #191919);--tv-Wizard-node-size:var(--tv-font-size-heading-xl, 32px);--tv-Wizard-lines-width:60px;--tv-Wizard-lines-margin-horizontal:var(--tv-space-md, 8px);--tv-Wizard-first-lines-bg-color:transparent;--tv-Wizard-lines-bg-color:var(--tv-color-bg-primary, #191919);--tv-Wizard-lines-normal-bg-color:var(--tv-color-bg-disabled-control-checked, #dbdbdb);--tv-Wizard-time-lines-bg-color:var(--tv-color-bg-primary, #191919);--tv-Wizard-time-last-lines-bg-color:var(--tv-color-bg-primary, #191919);--tv-Wizard-last-lines-bg-color:transparent;--tv-Wizard-chart-icon-bg-color:var(--tv-color-bg-header, #f0f0f0);--tv-Wizard-right-lines-doing-bg-color:var(--tv-color-bg-disabled-control-checked, #dbdbdb);--tv-Wizard-node-doing-font-weight:var(--tv-font-weight-bold, 600);--tv-Wizard-lines-normal-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-Wizard-lines-normal-border-weight:var(--tv-border-width, 1px);--tv-Wizard-node-title-margin-top:var(--tv-space-md, 8px);--tv-Wizard-button-group-margin-top:36px;--tv-Wizard-button-margin-left:var(--tv-space-lg, 12px);--tv-Wizard-vertical-line-width:var(--tv-border-width, 1px);--tv-Wizard-vertical-line-height:60px;--tv-Wizard-vertical-icon-position:absolute;--tv-Wizard-vertical-line-position-top:54px;--tv-Wizard-vertical-icon-position-top:-40px;--tv-Wizard-vertical-node-box-height:calc(var(--tv-Wizard-vertical-line-height) + var(--tv-Wizard-node-size) + 16px);--tv-Wizard-vertical-text-margin-left:21.5px;--tv-Wizard-vertical-desc-margin-top:0px;--tv-Wizard-vertical-title-line-height:var(--tv-line-height-number, 1.5);--tv-Wizard-vertical-title-font-size:var(--tv-font-size-default, 14px);--tv-Wizard-vertical-desc-font-size:var(--tv-font-size-sm, 12px);--tv-Wizard-vertical-desc-text-color:var(--tv-color-text-weaken, #808080);--tv-Wizard-vertical-wait-desc-text-color:var(--tv-color-text, #191919);--tv-Wizard-time-node-size:var(--tv-font-size-heading-xl, 32px);--tv-Wizard-time-node-border-weight:0;--tv-Wizard-time-node-icon-width:var(--tv-font-size-heading-xl, 32px);--tv-Wizard-time-node-icon-height:var(--tv-font-size-heading-xl, 32px);--tv-Wizard-time-node-icon-color:var(--tv-color-icon-hover, #191919);--tv-Wizard-time-node-bg-color:var(--tv-color-act-primary-text-inverse-tint-active, #ffffff);--tv-Wizard-time-left-min-width:120px;--tv-Wizard-time-left-margin-right:var(--tv-space-md, 8px);--tv-Wizard-time-left-position-top:-28px;--tv-Wizard-time-left-point-position-top:-15px;--tv-Wizard-time-left-icon-margin-right:10px;--tv-Wizard-time-left-icon-color:var(--tv-color-icon, #808080);--tv-Wizard-time-left-icon-margin-left:var(--tv-space-md, 8px);--tv-Wizard-time-left-icon-size:var(--tv-font-size-heading-xs, 16px);--tv-Wizard-time-left-line-height:var(--tv-line-height-number, 1.5);--tv-Wizard-time-dot-size:var(--tv-font-size-sm, 12px);--tv-Wizard-time-right-text-align:left;--tv-Wizard-time-right-margin-left:15.5px;--tv-Wizard-time-right-padding-vertical:0px;--tv-Wizard-time-right-title-margin-bottom:0px}.tiny-wizard .tiny-wizard__normal .tiny-wizard__steps{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.tiny-wizard .tiny-wizard__normal .tiny-wizard__steps-item:first-child .tiny-wizard__chart-line:first-child{background:var(--tv-Wizard-first-lines-bg-color);border-color:var(--tv-Wizard-first-lines-bg-color)}.tiny-wizard .tiny-wizard__normal .tiny-wizard__steps-item:last-child .tiny-wizard__chart-line:last-child{background:var(--tv-Wizard-last-lines-bg-color);border-color:var(--tv-Wizard-last-lines-bg-color)}.tiny-wizard .tiny-wizard__normal .tiny-wizard__chart span{display:inline-block}.tiny-wizard .tiny-wizard__normal .tiny-wizard__name{margin-top:var(--tv-Wizard-node-title-margin-top);overflow:hidden;text-align:center}.tiny-wizard .tiny-wizard__normal .tiny-wizard__name .name{width:100%;font-size:var(--tv-Wizard-font-size)}.tiny-wizard .tiny-wizard__normal .tiny-wizard__button{margin-top:var(--tv-Wizard-button-group-margin-top);text-align:left}.tiny-wizard .tiny-wizard__normal .tiny-wizard__button .tiny-button+.tiny-button{margin-left:var(--tv-Wizard-button-margin-left)}.tiny-wizard .tiny-wizard__vertical{padding-top:20px;padding-left:20px}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon{color:var(--tv-Wizard-icon-color);background:var(--tv-Wizard-icon-bg-color);border:1px solid var(--tv-Wizard-icon-border-color)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon .tiny-wizard__chart-line,.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon .tiny-wizard__chart-line.is-time-line{background:var(--tv-Wizard-icon-bg-color);border-color:var(--tv-Wizard-icon-bg-color)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-line{background:var(--tv-Wizard-right-lines-doing-bg-color);border-color:var(--tv-Wizard-right-lines-doing-bg-color)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-name>.name{font-weight:var(--tv-Wizard-node-doing-font-weight)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item:last-child>ul .tiny-wizard__chart-line{background:0 0}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item:last-child>.tiny-wizard__node-wrapper>.tiny-wizard__chart-line{background:var(--tv-Wizard-last-lines-bg-color);border-color:var(--tv-Wizard-last-lines-bg-color)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item .tiny-wizard__node-wrapper{height:var(--tv-Wizard-vertical-node-box-height)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item:not(.is-ready,.is-doing) .tiny-wizard__chart-name .name{color:var(--tv-Wizard-vertical-wait-desc-text-color)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-line{height:var(--tv-Wizard-vertical-line-height);width:var(--tv-Wizard-vertical-line-width);top:var(--tv-Wizard-vertical-line-position-top);position:relative;display:inline-block}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-name{position:relative;top:-15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);margin-left:var(--tv-Wizard-vertical-text-margin-left);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:var(--tv-Wizard-vertical-title-font-size);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-name .name{color:var(--tv-Wizard-node-text-color);line-height:var(--tv-Wizard-vertical-title-line-height)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-name .children-name{color:var(--tv-Wizard-vertical-desc-text-color);font-size:var(--tv-Wizard-vertical-desc-font-size);margin-top:var(--tv-Wizard-vertical-desc-margin-top);line-height:var(--tv-Wizard-vertical-title-line-height)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-icon{position:var(--tv-Wizard-vertical-icon-position);left:50%;top:var(--tv-Wizard-vertical-icon-position-top);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__time-wrapper{position:relative;left:50%;top:-14px;-webkit-transform:translateX(-50%);transform:translateX(-50%);fill:var(--tv-Wizard-time-node-icon-color);font-size:24px;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--tv-Wizard-time-node-size);height:var(--tv-Wizard-time-node-size);display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:50%;text-align:center;background:var(--tv-Wizard-time-node-bg-color);border:var(--tv-Wizard-time-node-border-weight) solid var(--tv-Wizard-icon-bg-color);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__time-wrapper .tiny-svg{width:var(--tv-Wizard-time-node-icon-width);height:var(--tv-Wizard-time-node-icon-height)}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-children{position:relative}.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-children .children-name{position:absolute;margin-left:15px}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__node-wrapper{height:auto}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__steps-item>ul .tiny-wizard__chart-line{background:var(--tv-Wizard-time-lines-bg-color);border-color:var(--tv-Wizard-time-lines-bg-color)}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__steps-item:last-child>ul .tiny-wizard__chart-line{background:var(--tv-Wizard-time-last-lines-bg-color)}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__steps-item .tiny-wizard__chart-line{top:0;margin-left:0;height:88px}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__steps-item .tiny-wizard__chart-line.is-time-line{background:var(--tv-Wizard-time-lines-bg-color);border-color:var(--tv-Wizard-time-lines-bg-color)}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__chart-icon{position:relative;top:-14px}.tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard .tiny-wizard .tiny-wizard__vertical.is-time-line-flow .tiny-wizard__chart-children.is-ready .tiny-wizard__chart-line{background:var(--tv-Wizard-icon-bg-color);border-color:var(--tv-Wizard-icon-bg-color)}.tiny-wizard .tiny-wizard__date{position:relative;top:var(--tv-Wizard-time-left-position-top);right:15px;margin-right:var(--tv-Wizard-time-left-margin-right);min-width:var(--tv-Wizard-time-left-min-width);width:auto;color:var(--tv-Wizard-text-color);font-size:var(--tv-Wizard-font-size);line-height:var(--tv-Wizard-time-left-line-height);display:inline-block;text-align:right}.tiny-wizard .tiny-wizard__date .date-icon{margin-left:var(--tv-Wizard-time-left-icon-margin-left);margin-right:var(--tv-Wizard-time-left-icon-margin-right);font-size:var(--tv-Wizard-time-left-icon-size);fill:var(--tv-Wizard-time-left-icon-color)}.tiny-wizard .tiny-wizard__date span{vertical-align:middle}.tiny-wizard .tiny-wizard__date.time-line-text{top:var(--tv-Wizard-time-left-point-position-top);font-weight:var(--tv-Wizard-node-doing-font-weight)}.tiny-wizard .tiny-wizard__steps-item.is-ready .name{color:var(--tv-Wizard-node-text-color)}.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-icon{color:var(--tv-Wizard-icon-color);background:var(--tv-Wizard-icon-bg-color);border:1px solid var(--tv-Wizard-icon-border-color)}.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-line{background:var(--tv-Wizard-lines-bg-color);border-color:var(--tv-Wizard-lines-bg-color)}.tiny-wizard .tiny-wizard__steps-item ul{list-style:none}.tiny-wizard .tiny-wizard__chart{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-wizard .tiny-wizard__chart>.tiny-wizard__chart-svg{height:var(--tv-Wizard-node-size)}.tiny-wizard .tiny-wizard__chart>.tiny-wizard__chart-svg>.tiny-svg{font-size:var(--tv-Wizard-node-size);fill:var(--tv-Wizard-node-text-color)}.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__chart-icon,.tiny-wizard .tiny-wizard__chart-children.is-ready .tiny-wizard__chart-icon,.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon,.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-icon{color:var(--tv-Wizard-icon-color);background:var(--tv-Wizard-icon-bg-color);border:1px solid var(--tv-Wizard-icon-border-color)}.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__name .name,.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__name .name{font-weight:var(--tv-Wizard-node-doing-font-weight)}.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__chart-line,.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-line{background:var(--tv-Wizard-lines-bg-color);border-color:var(--tv-Wizard-lines-bg-color)}.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__chart-line:last-child,.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-line:last-child{background-color:var(--tv-Wizard-right-lines-doing-bg-color)}.tiny-wizard .tiny-wizard__chart-detail{padding:var(--tv-Wizard-time-right-padding-vertical) 8px;border-radius:2px;border-radius:var(--tv-Wizard-detail-border-radius,2px);min-height:26px;height:auto;line-height:1;margin-left:var(--tv-Wizard-time-right-margin-left);text-align:var(--tv-Wizard-time-right-text-align);display:inline-block;position:absolute;top:-14px}.tiny-wizard .tiny-wizard__chart-detail:hover{background:var(--tv-Wizard-detail-bg-color)}.tiny-wizard .tiny-wizard__chart-detail:hover::before{content:'';width:0;height:0;margin-top:-4px;border-style:solid;border-width:4px 4px 4px 0;border-color:transparent var(--tv-Wizard-detail-bg-color);position:absolute;left:-4px;top:10px}.tiny-wizard .tiny-wizard__chart-detail:hover .detail-title,.tiny-wizard .tiny-wizard__chart-detail:hover .tiny-user-contact__role{color:var(--tv-Wizard-icon-color)}.tiny-wizard .tiny-wizard__chart-detail .detail-title{color:var(--tv-Wizard-text-color);font-size:var(--tv-Wizard-font-size);font-weight:700;margin-bottom:var(--tv-Wizard-time-right-title-margin-bottom);line-height:var(--tv-Wizard-vertical-title-line-height)}.tiny-wizard .tiny-wizard__chart-icon{width:var(--tv-Wizard-node-size);height:var(--tv-Wizard-node-size);line-height:var(--tv-Wizard-node-size);border-radius:50%;font-size:var(--tv-Wizard-font-size);text-align:center;background:var(--tv-Wizard-chart-icon-bg-color);color:var(--tv-Wizard-normal-icon-color);display:inline-block;border:var(--tv-Wizard-lines-normal-border-weight) solid var(--tv-Wizard-lines-normal-border-color)}.tiny-wizard .tiny-wizard__chart-icon.time-line-icon{width:var(--tv-Wizard-time-dot-size);height:var(--tv-Wizard-time-dot-size);line-height:var(--tv-Wizard-time-dot-size)}.tiny-wizard .tiny-wizard__chart-children .tiny-wizard__chart-line .tiny-wizard__chart-icon.time-line-icon{background-color:var(--tv-Wizard-time-lines-bg-color)}.tiny-wizard .tiny-svg,.tiny-wizard .tiny-wizard__chart-icon,.tiny-wizard .tiny-wizard__chart-name,.tiny-wizard .tiny-wizard__date{cursor:pointer}.tiny-wizard .tiny-wizard__chart-line{height:1px;background:var(--tv-Wizard-lines-normal-bg-color);width:var(--tv-Wizard-lines-width)}.tiny-wizard .tiny-wizard__chart-line:first-child{margin-right:var(--tv-Wizard-lines-margin-horizontal)}.tiny-wizard .tiny-wizard__chart-line:last-child{margin-left:var(--tv-Wizard-lines-margin-horizontal)}.tiny-wizard .tiny-user-contact .dropdown-part .tiny-user-head,.tiny-wizard .tiny-user-contact .tiny-svg{display:none}.tiny-wizard .tiny-user-contact .tiny-user-contact__role span{display:inline-block}