win-eternal-ui/dist/style.css

A Component Library for Vue 3(仅供测试，别下载)

:root{--w-color-white: #ffffff;--w-color-black: #000000;--w-bg-color: var(--w-color-white);--w-padding-base: 4px;--w-padding-small: 12px;--w-padding-middle: 16px;--w-padding-large: 24px;--w-line-height-small: 18px;--w-line-height-middle: 20px;--w-line-height-large: 22px;--w-border-color: #ebedf0;--w-border-color-lighter: #ebeef5;--w-border-width: 1px;--w-border-style: solid;--w-border: var(--w-border-width) solid var(--w-border-color);--w-radius-base: 4px;--w-radius-small: 2px;--w-radius-middle: 4px;--w-radius-large: 8px;--w-radius-round: 20px;--w-radius-max: 999px;--w-active-opacity: .6;--w-disabled-opacity: .5;--w-overlay-color-lighter: rgba(0, 0, 0, .5);--w-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);--w-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);--w-font-line-height-primary: 24px;--w-transition-duration: .3s;--w-font-size-mini: 10px;--w-font-size-small: 12px;--w-font-size-middle: 14px;--w-font-size-large: 16px;--w-text-color-primary: #303133;--w-text-color-regular: #606266;--w-text-color-secondary: #909399;--w-text-color-placeholder: #a8abb2;--w-text-color-disabled: #c0c4cc;--w-disabled-bg-color: #f5f7fa;--w-disabled-text-color: #a8abb2;--w-disabled-border-color: #e4e7ed;--w-icon-size-mini: 16px;--w-icon-size-small: 18px;--w-icon-size-middle: 20px;--w-icon-size-large: 22px;--w-color-primary: #3a7afe;--w-color-primary-3: #75a2fe;--w-color-primary-5: #9dbdff;--w-color-primary-7: #c4d7ff;--w-color-primary-8: #d8e4ff;--w-color-primary-9: #ebf2ff;--w-color-info: #00afef;--w-color-info-3: #4dc7f4;--w-color-info-5: #80d7f7;--w-color-info-7: #b3e7fa;--w-color-info-8: #cceffc;--w-color-info-9: #e6f7fd;--w-color-success: #00c48f;--w-color-success-3: #4dd6b1;--w-color-success-5: #80e2c7;--w-color-success-7: #b3eddd;--w-color-success-8: #ccf3e9;--w-color-success-9: #e6f9f4;--w-color-warning: #ff9f00;--w-color-warning-3: #ffbc4d;--w-color-warning-5: #ffcf80;--w-color-warning-7: #ffe2b3;--w-color-warning-8: #ffeccc;--w-color-warning-9: #fff5e6;--w-color-danger: #f44336;--w-color-danger-3: #f77b72;--w-color-danger-5: #faa19b;--w-color-danger-7: #fcc7c3;--w-color-danger-8: #fdd9d7;--w-color-danger-9: #feeceb}.van-icon-loading{animation:rotating 2s linear infinite}.van-icon--right{margin-left:5px}.van-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.van-icon{--color: inherit;height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:var(--color);font-size:inherit;font-style:normal}.van-icon.is-loading{animation:rotating 2s linear infinite}.van-icon svg{height:1em;width:1em}.van-ripple{position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;background-color:currentColor;animation:.2s rippleScale linear;border-radius:50%;opacity:0;transform:scale(2)}@keyframes rippleScale{0%{transform:scale(0);opacity:.3}to{transform:scale(2);opacity:.3}}.w-button{--w-button-text-color: var(--w-text-color-regular);--w-button-font-weight: 500;--w-button-bg-color: var(--w-color-white);--w-button-border-color: var(--w-border-color);--w-button-font-size-middle: var(--w-font-size-middle);--w-button-radius-middle: var(--w-radius-middle);--w-button-disabled-opacity: var(--w-disabled-opacity);--w-button-size: 32px;--w-button-size-large: 40px;--w-button-size-small: 24px;--w-button-padding: 4px 16px}.w-button{position:relative;display:inline-flex;justify-content:center;align-items:center;line-height:1;height:var(--w-button-size);white-space:nowrap;cursor:pointer;color:var(--w-button-text-color);text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:var(--w-button-font-weight);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--w-button-bg-color);border:var(--w-border);border-color:var(--w-button-border-color);font-size:var(--w-button-font-size-middle);border-radius:var(--w-button-radius-middle);padding:var(--w-button-padding)}.w-button+.w-button{margin-left:12px}.w-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:currentColor;border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:""}.w-button:hover:before,.w-button:active:before{opacity:.3}.w-button.w-button--primary{--w-button-bg-color: #3a7afe;--w-button-text-color: #fff;--w-button-border-color: #3a7afe}.w-button.w-button--primary.is-plain{--w-button-bg-color: var(--w-color-primary-9);--w-button-text-color: #3a7afe;--w-button-border-color: #3a7afe}.w-button.w-button--primary.is-text{color:#3a7afe}.w-button.w-button--info{--w-button-bg-color: #00afef;--w-button-text-color: #fff;--w-button-border-color: #00afef}.w-button.w-button--info.is-plain{--w-button-bg-color: var(--w-color-info-9);--w-button-text-color: #00afef;--w-button-border-color: #00afef}.w-button.w-button--info.is-text{color:#00afef}.w-button.w-button--success{--w-button-bg-color: #00c48f;--w-button-text-color: #fff;--w-button-border-color: #00c48f}.w-button.w-button--success.is-plain{--w-button-bg-color: var(--w-color-success-9);--w-button-text-color: #00c48f;--w-button-border-color: #00c48f}.w-button.w-button--success.is-text{color:#00c48f}.w-button.w-button--warning{--w-button-bg-color: #ff9f00;--w-button-text-color: #fff;--w-button-border-color: #ff9f00}.w-button.w-button--warning.is-plain{--w-button-bg-color: var(--w-color-warning-9);--w-button-text-color: #ff9f00;--w-button-border-color: #ff9f00}.w-button.w-button--warning.is-text{color:#ff9f00}.w-button.w-button--danger{--w-button-bg-color: #f44336;--w-button-text-color: #fff;--w-button-border-color: #f44336}.w-button.w-button--danger.is-plain{--w-button-bg-color: var(--w-color-danger-9);--w-button-text-color: #f44336;--w-button-border-color: #f44336}.w-button.w-button--danger.is-text{color:#f44336}.w-button.w-button--mini{--w-button-size: var(--w-button-size-mini);--w-button-padding: calc(var(--w-button-size) - 20px) calc(var(--w-button-size) - 12px);height:var(--w-button-size);line-height:var(--w-button-size);font-size:var(--w-font-size-mini);border-radius:var(--w-radius-mini)}.w-button.w-button--small{--w-button-size: var(--w-button-size-small);--w-button-padding: calc(var(--w-button-size) - 20px) calc(var(--w-button-size) - 12px);height:var(--w-button-size);line-height:var(--w-button-size);font-size:var(--w-font-size-small);border-radius:var(--w-radius-small)}.w-button.w-button--middle{--w-button-size: var(--w-button-size-middle);--w-button-padding: calc(var(--w-button-size) - 20px) calc(var(--w-button-size) - 12px);height:var(--w-button-size);line-height:var(--w-button-size);font-size:var(--w-font-size-middle);border-radius:var(--w-radius-middle)}.w-button.w-button--large{--w-button-size: var(--w-button-size-large);--w-button-padding: calc(var(--w-button-size) - 20px) calc(var(--w-button-size) - 12px);height:var(--w-button-size);line-height:var(--w-button-size);font-size:var(--w-font-size-large);border-radius:var(--w-radius-large)}.w-button.is-round{border-radius:var(--w-radius-round)}.w-button.is-circle{border-radius:50%;padding:8px}.w-button.is-disabled{cursor:not-allowed;opacity:var(--w-button-disabled-opacity)}.w-button.is-disabled:before{display:none}.w-button.is-text{color:var(--w-button-text-color);border:0 solid transparent;background-color:transparent}