chin-ui/index.css

个人ui库

.cui-button{--cui-button-height: 46px}.cui-button{cursor:pointer;width:auto;padding:0 var(--cui-padding);height:var(--cui-button-height);border-radius:var(--cui-radius);font-size:var(--cui-font-size);display:flex;align-items:center;justify-content:center;transition:var(--cui-time)}.cui-button.primary{color:var(--cui-color);background:var(--cui-background)}.cui-button.primary span{border-color:var(--cui-color)}.cui-button.primary:hover,.cui-button.primary.active{background:var(--cui-background-active)}.cui-button.solid{border:1px solid var(--cui-background);color:var(--cui-background)}.cui-button.solid i{border-color:var(--cui-background)}.cui-button.solid:hover,.cui-button.solid.active{border-color:var(--cui-background-active);color:var(--cui-background-active)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cui-button.loading{pointer-events:none}.cui-button.loading i{display:block}.cui-button i{width:var(--cui-font-size);height:var(--cui-font-size);margin-left:4px;border:2px solid;border-bottom-color:transparent!important;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite;display:none}.cui-message{--cui-message-top: 66px;--cui-message-item-space: 10px;--cui-message-item-height: 50px;--cui-message-item-max-width: 300px;--cui-message-item-shadow: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)) }.cui-message{position:fixed;top:var(--cui-message-top);left:0;height:100%;width:100%;z-index:999;pointer-events:none;display:flex;justify-content:center}.cui-message .cui-message-item:nth-child(1){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (1 - 1))}.cui-message .cui-message-item:nth-child(2){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (2 - 1))}.cui-message .cui-message-item:nth-child(3){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (3 - 1))}.cui-message .cui-message-item:nth-child(4){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (4 - 1))}.cui-message .cui-message-item:nth-child(5){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (5 - 1))}.cui-message .cui-message-item:nth-child(6){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (6 - 1))}.cui-message .cui-message-item:nth-child(7){top:calc((var(--cui-message-item-height) + var(--cui-message-item-space)) * (7 - 1))}.cui-message .cui-message-item{position:absolute;display:flex;align-items:center;max-width:var(--cui-message-item-max-width);height:var(--cui-message-item-height);border-radius:var(--cui-radius-big);padding:0 var(--cui-padding);background:var(--cui-background-base);opacity:0;animation:opacity .5s forwards,opacityEnd .5s 2s forwards;filter:var(--cui-message-item-shadow);white-space:nowrap}@keyframes opacity{0%{opacity:0;transform:translateY(30%)}to{opacity:1;transform:translateY(0)}}@keyframes opacityEnd{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30%)}}.cui-message .cui-message-item .icon{width:calc(var(--cui-font-size) * 2);height:calc(var(--cui-font-size) * 2);background-size:cover!important;margin-right:var(--cui-message-item-space)}.cui-message .cui-message-item .text{flex:1;font-size:var(--cui-font-size);color:var(--cui-color-text)}.cui-message .cui-message-item .text p{max-width:calc(var(--cui-message-item-max-width) * .72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cui-modal{--cui-modal-shadow: drop-shadow(0 0 10px rgba(0, 0, 0, .2)) }.cui-modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;opacity:0;visibility:hidden;z-index:998;pointer-events:none;transition:var(--cui-time)}.cui-modal.enter{opacity:1;visibility:visible;pointer-events:auto}.cui-modal.enter .cui-modal-wrapper{transform:translate(-50%,-50%) scale(1)}.cui-modal .cui-modal-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d}.cui-modal .cui-modal-wrapper{position:absolute;--top: 30%;--left: 30%;background:var(--cui-background-base);filter:var(--cui-modal-shadow);border-radius:var(--cui-radius);transform:translate(-50%,-50%) scale(.01);transition:var(--cui-time)}:root{--cui-font-size: 14px;--cui-color: white;--cui-color-text: #333;--cui-background: rgb(238, 138, 156);--cui-background-base: white;--cui-background-active: rgb(241, 95, 124);--cui-radius: 8px;--cui-radius-big: 16px;--cui-padding: 20px;--cui-margin: 20px;--cui-time: .4s }.cui_route_page{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;transition:var(--cui-time)}@keyframes enter{0%{transform:translate(calc(var(--level) * 100%))}to{transform:translate(0)}}@keyframes leave{0%{transform:translate(0)}to{transform:translate(calc(var(--level) * -100%))}}.cui_route_page.enter{animation:enter .4s forwards}.cui_route_page.leave{animation:leave .4s forwards}