el-tour.css 3.5 KB

1
  1. .el-tour{--el-tour-width:520px;--el-tour-padding-primary:12px;--el-tour-font-line-height:var(--el-font-line-height-primary);--el-tour-title-font-size:16px;--el-tour-title-text-color:var(--el-text-color-primary);--el-tour-title-font-weight:400;--el-tour-close-color:var(--el-color-info);--el-tour-font-size:14px;--el-tour-color:var(--el-text-color-primary);--el-tour-bg-color:var(--el-bg-color);--el-tour-border-radius:4px}.el-tour__hollow{transition:all var(--el-transition-duration) ease}.el-tour__content{border-radius:var(--el-tour-border-radius);width:var(--el-tour-width);padding:var(--el-tour-padding-primary);background:var(--el-tour-bg-color);box-shadow:var(--el-box-shadow-light);box-sizing:border-box;overflow-wrap:break-word}.el-tour__arrow{position:absolute;background:var(--el-tour-bg-color);width:10px;height:10px;pointer-events:none;transform:rotate(45deg);box-sizing:border-box}.el-tour__content[data-side^=top] .el-tour__arrow{border-top-color:transparent;border-left-color:transparent}.el-tour__content[data-side^=bottom] .el-tour__arrow{border-bottom-color:transparent;border-right-color:transparent}.el-tour__content[data-side^=left] .el-tour__arrow{border-left-color:transparent;border-bottom-color:transparent}.el-tour__content[data-side^=right] .el-tour__arrow{border-right-color:transparent;border-top-color:transparent}.el-tour__content[data-side^=top] .el-tour__arrow{bottom:-5px}.el-tour__content[data-side^=bottom] .el-tour__arrow{top:-5px}.el-tour__content[data-side^=left] .el-tour__arrow{right:-5px}.el-tour__content[data-side^=right] .el-tour__arrow{left:-5px}.el-tour__closebtn{position:absolute;top:0;right:0;padding:0;width:40px;height:40px;background:0 0;border:none;outline:0;cursor:pointer;font-size:var(--el-message-close-size,16px)}.el-tour__closebtn .el-tour__close{color:var(--el-tour-close-color);font-size:inherit}.el-tour__closebtn:focus .el-tour__close,.el-tour__closebtn:hover .el-tour__close{color:var(--el-color-primary)}.el-tour__header{padding-bottom:var(--el-tour-padding-primary)}.el-tour__header.show-close{padding-right:calc(var(--el-tour-padding-primary) + var(--el-message-close-size,16px))}.el-tour__title{line-height:var(--el-tour-font-line-height);font-size:var(--el-tour-title-font-size);color:var(--el-tour-title-text-color);font-weight:var(--el-tour-title-font-weight)}.el-tour__body{color:var(--el-tour-text-color);font-size:var(--el-tour-font-size)}.el-tour__body img,.el-tour__body video{max-width:100%}.el-tour__footer{padding-top:var(--el-tour-padding-primary);box-sizing:border-box;display:flex;justify-content:space-between}.el-tour__content .el-tour-indicators{display:inline-block;flex:1}.el-tour__content .el-tour-indicator{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--el-color-info-light-9);margin-right:6px}.el-tour__content .el-tour-indicator.is-active{background:var(--el-color-primary)}.el-tour.el-tour--primary{--el-tour-title-text-color:#fff;--el-tour-text-color:#fff;--el-tour-bg-color:var(--el-color-primary);--el-tour-close-color:#fff}.el-tour.el-tour--primary .el-tour__closebtn:focus .el-tour__close,.el-tour.el-tour--primary .el-tour__closebtn:hover .el-tour__close{color:var(--el-tour-title-text-color)}.el-tour.el-tour--primary .el-button--default{color:var(--el-color-primary);border-color:var(--el-color-primary);background:#fff}.el-tour.el-tour--primary .el-button--primary{border-color:#fff}.el-tour.el-tour--primary .el-tour-indicator{background:rgba(255,255,255,.15)}.el-tour.el-tour--primary .el-tour-indicator.is-active{background:#fff}.el-tour-parent--hidden{overflow:hidden}