vue-devui/action-timeline/style.css

DevUI components based on Vite and Vue3

.dp-action-timeline{background-color:var(--devui-base-bg, #ffffff);padding:0 20px;position:relative}.dp-action-timeline .dp-action-timeline-title{font-size:var(--devui-font-size-sm, 12px);padding-top:12px}.dp-action-timeline .dp-action-timeline-title>p{position:relative;z-index:2;background-color:var(--devui-base-bg, #ffffff);padding:8px 0}.dp-action-timeline .dp-action-timeline-item{display:flex;position:relative;padding:12px 0}.dp-action-timeline .dp-action-timeline-item.list-last-item:before{content:"";position:absolute;top:24px;height:calc(100% - 24px);left:10px;border-left:4px solid var(--devui-base-bg, #ffffff);z-index:2}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon{width:24px;height:24px;margin-right:8px;border-radius:50%;background-color:var(--devui-list-item-hover-bg, #f2f2f3);position:relative;z-index:3}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before,.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after{content:"";position:absolute;height:2px;width:2px;left:11px;background-color:var(--devui-base-bg, #ffffff);z-index:3}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before{top:-2px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after{bottom:-2px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon{background:none}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before{top:7px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before{bottom:7px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon .list-empty-icon-dot{position:absolute;width:6px;height:6px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);top:9px;left:9px;border-radius:50%}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon .icon{width:24px;font-size:var(--devui-font-size-icon, 16px);color:var(--devui-icon-text, #71757f);text-align:center;line-height:24px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-info .icon{color:var(--devui-info, #5e7ce0)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-danger .icon{color:var(--devui-danger, #f66f6a)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-success .icon{color:var(--devui-success, #50d4ab)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-warning .icon{color:var(--devui-warning, #fac20a)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-data{flex:1;word-break:break-all}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-item-date{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f)}.dp-action-timeline .dp-action-timeline-item .border-bottom{position:absolute;bottom:0;width:calc(100% - 12px);height:1px;margin-left:12px;background-color:var(--devui-dividing-line, #f2f2f3)}.dp-action-timeline .dp-action-timeline-item.vertical-list-item{display:flex;flex-direction:column}.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top{display:flex;align-items:center;justify-content:space-between}.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top .vertical-list-item-top-left{display:flex;align-items:center}.dp-action-timeline .border-left{position:absolute;bottom:0;left:31px;width:2px;height:100%;background-color:var(--devui-dividing-line, #f2f2f3);z-index:1}.dp-action-timeline:first-child .border-left{height:calc(100% - 26px)}.dp-action-timeline-operation-container .dp-action-timeline-operation{margin:0 18px;padding:4px 0;height:32px;font-size:var(--devui-font-size-lg, 14px);text-align:center;border:1px solid var(--devui-form-control-line, #d7d8da);background-color:var(--devui-base-bg, #ffffff);border-radius:4px;cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.dp-action-timeline-operation-container .dp-action-timeline-operation:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-info{background-color:var(--devui-info-bg, #e9edfa)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-danger{background-color:var(--devui-danger-bg, #ffd5d4)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-success{background-color:var(--devui-success-bg, #cffcee)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-warning{background-color:var(--devui-warning-bg, #ffe1c7)}.dp-action-timeline-status-line .border-left{display:none}.dp-action-timeline-status-line .dp-action-timeline-item:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-line, #d7d8da)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-info:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-info-line, #5e7ce0)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-danger:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-danger-line, #f66f6a)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-success:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-success-line, #50d4ab)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-warning:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-warning-line, #fa9841)}.dp-action-timeline-status-line .dp-action-timeline-item.list-last-item:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-base-bg, #ffffff)}