fine-true/lib/style/basic.css

A small and beautiful Vue3 version of the UI Library

:root{--fine-blue:#4c95fb;--fine-red:#ff5869;--fine-orange:#fda043;--fine-gray:#878b97;--fine-green:#3cb371;--fine-white:#fff;--fine-black:#000;--fine-pink:#fc97af;--fine-light-grey:#999b9c;--fine-text-large-size:16px;--fine-text-default-size:14px;--fine-text-small-size:13px;--fine-text-color:#323233;--fine-text-lignt-color:#454545;--fine-text-lighter-color:#606266;--fine-text-placeholder-color:#c0c4cc;--fine-icon-color:#a2a2a2;--fine-border-color:#d9d9d9;--fine-active-color:#f2f3f5;--fine-animation-duration-base:0.25s;--fine-animation-duration-fast:0.2s;--fine-button-padding-size-block-y:6px;--fine-button-padding-size-block-x:11px;--fine-button-size-block-height:42px;--fine-button-size-block-line-height:28px;--fine-button-size-block-font-size:var(--fine-text-large-size);--fine-button-size-block-width:100%;--fine-button-padding-size-large-y:6px;--fine-button-padding-size-large-x:11px;--fine-button-size-large-height:40px;--fine-button-size-large-line-height:26px;--fine-button-size-large-font-size:var(--fine-text-large-size);--fine-button-size-large-min-width:40px;--fine-button-padding-size-default-y:4px;--fine-button-padding-size-default-x:8px;--fine-button-size-default-height:32px;--fine-button-size-default-line-height:22px;--fine-button-size-default-font-size:var(--fine-text-default-size);--fine-button-size-default-min-width:32px;--fine-button-padding-size-small-y:2px;--fine-button-padding-size-small-x:5px;--fine-button-size-small-height:24px;--fine-button-size-small-line-height:18px;--fine-button-size-small-font-size:var(--fine-text-small-size);--fine-button-size-small-min-width:24px;--fine-button-type-default-color:var(--fine-text-lignt-color);--fine-button-type-default-background-color:var(--fine-white);--fine-button-type-default-border-color:var(--fine-border-color);--fine-button-type-primary-color:var(--fine-blue);--fine-button-type-primary-background-color:var(--fine-blue);--fine-button-type-primary-border-color:var(--fine-blue);--fine-button-type-success-color:var(--fine-green);--fine-button-type-success-background-color:var(--fine-green);--fine-button-type-success-border-color:var(--fine-green);--fine-button-type-info-color:var(--fine-gray);--fine-button-type-info-background-color:var(--fine-gray);--fine-button-type-info-border-color:var(--fine-gray);--fine-button-type-danger-color:var(--fine-red);--fine-button-type-danger-background-color:var(--fine-red);--fine-button-type-danger-border-color:var(--fine-red);--fine-button-type-warning-color:var(--fine-orange);--fine-button-type-warning-background-color:var(--fine-orange);--fine-button-type-warning-border-color:var(--fine-orange);--fine-button-border-width:1px;--fine-button-border-radius:2px;--fine-button-round-border-radius:10em;--fine-button-plain-background-color:var(--fine-white);--fine-button-disabled-opacity:0.7;--fine-loading-icon-color:#1989fa;--fine-loading-icon-size:14px;--fine-loading-mask-zindex:99;--fine-modal-content-zindex:11;--fine-modal-position-top:20vh;--fine-modal-head-padding:10px 20px;--fine-modal-title-size:18px;--fine-modal-title-color:var(--fine-text-color);--fine-modal-head-icon-size:18px;--fine-modal-head-icon-color:var(--fine-icon-color);--fine-modal-head-icon-hover-color:var(--fine-black);--fine-modal-head-icon-spacing:5px;--fine-modal-body-padding:10px 20px;--fine-modal-body-size:14px;--fine-modal-body-color:var(--fine-text-lignt-color);--fine-modal-footer-padding:10px 20px;--fine-drawer-zindex:11;--fine-drawer-head-padding:15px;--fine-drawer-head-line-height:1.2;--fine-drawer-title-size:18px;--fine-drawer-title-color:var(--fine-text-color);--fine-drawer-head-icon-size:18px;--fine-drawer-head-icon-color:var(--fine-icon-color);--fine-drawer-head-icon-hover-color:var(--fine-black);--fine-drawer-body-padding:15px;--fine-drawer-body-size:14px;--fine-drawer-body-line-height:1.4;--fine-drawer-body-color:var(--fine-text-lignt-color);--fine-message-zindex:100;--fine-message-color:#454545;--fine-message-default:var(--fine-blue);--fine-message-info:var(--fine-gray);--fine-message-success:var(--fine-green);--fine-message-warning:var(--fine-orange);--fine-message-error:var(--fine-red);--fine-switch-border-color:var(--fine-border-color);--fine-switch-backgrond-color:var(--fine-light-grey);--fine-switch-transition-duration:var(--fine-animation-duration-base);--fine-switch-node-background-color:var(--fine-white);--fine-switch-on-background-color:var(--fine-blue);--fine-switch-node-zindex:1;--fine-switch-disabled-opacity:0.4;--fine-switch-default-width:60px;--fine-switch-default-height:32px;--fine-switch-default-radius:30px;--fine-switch-node-default-width:30px;--fine-switch-node-default-height:30px;--fine-switch-default-text-size:14px;--fine-switch-large-width:80px;--fine-switch-large-height:42px;--fine-switch-large-radius:40px;--fine-switch-node-large-width:40px;--fine-switch-node-large-height:40px;--fine-switch-large-text-size:16px;--fine-switch-small-width:48px;--fine-switch-small-height:26px;--fine-switch-small-radius:24px;--fine-switch-node-small-width:24px;--fine-switch-node-small-height:24px;--fine-switch-small-text-size:12px;--fine-tag-default-color:var(--fine-light-grey);--fine-tag-default-border-color:var(--fine-border-color);--fine-tag-default-background-color:var(--fine-white);--fine-tag-blue-color:var(--fine-blue);--fine-tag-blue-border-color:var(--fine-blue);--fine-tag-blue-background-color:rgba(76, 149, 251, 0.1);--fine-tag-red-color:var(--fine-red);--fine-tag-red-border-color:var(--fine-red);--fine-tag-red-background-color:rgba(255, 88, 105, 0.1);--fine-tag-orange-color:var(--fine-orange);--fine-tag-orange-border-color:var(--fine-orange);--fine-tag-orange-background-color:rgba(253, 160, 67, 0.1);--fine-tag-gray-color:var(--fine-gray);--fine-tag-gray-border-color:var(--fine-gray);--fine-tag-gray-background-color:rgba(135, 139, 151, 0.1);--fine-tag-green-color:var(--fine-green);--fine-tag-green-border-color:var(--fine-green);--fine-tag-green-background-color:rgba(60, 179, 113, 0.1);--fine-tag-pink-color:var(--fine-pink);--fine-tag-pink-border-color:var(--fine-pink);--fine-tag-pink-background-color:rgba(252, 151, 175, 0.1);--fine-input-border:1px solid var(--fine-border-color);--fine-input-on-focus-border-color:var(--fine-blue);--fine-input-placeholder-color:var(--fine-text-placeholder-color);--fine-input-transition-duration:var(--fine-animation-duration-base);--fine-input-large-height:40px;--fine-input-large-width:100%;--fine-input-large-padding:4px 15px;--fine-input-large-size:var(--fine-text-large-size);--fine-input-default-height:32px;--fine-input-default-width:100%;--fine-input-default-padding:2px 10px;--fine-input-default-size:var(--fine-text-default-size);--fine-input-small-height:24px;--fine-input-small-width:100%;--fine-input-small-padding:2px 5px;--fine-input-small-size:var(--fine-text-small-size);--fine-textarea-clear-icon-color:var(--fine-white);--fine-textarea-clear-icon-size:14px;--fine-textarea-clear-icon-width:14px;--fine-textarea-clear-icon-height:14px;--fine-textarea-clear-background:var(--fine-icon-color);--fine-textarea-border:1px solid var(--fine-border-color);--fine-textarea-on-focus-border-color:var(--fine-blue);--fine-textarea-padding:12px 12px 16px;--fine-textarea-border-radius:3px;--fine-textarea-placeholder-color:var(--fine-text-placeholder-color);--fine-textarea-color:var(--fine-text-light-color);--fine-textarea-line-transition-duration:var(--fine-animation-duration-base);--fine-textarea-show-word-limit-size:12px;--fine-textarea-show-word-limit-line-height:16px;--fine-textarea-show-word-limit-color:var(--fine-light-grey);--fine-select-background-color:var(--fine-white);--fine-select-border:1px solid var(--fine-border-color);--fine-select-on-focus-border-color:var(--fine-blue);--fine-select-on-focus-box-shadow:0 0 0.5px 2px rgba(76, 149, 251, 0.3);--fine-select-border-radius:3px;--fine-select-transition-duration:var(--fine-animation-duration-base);--fine-select-selection-color:var(--fine-text-color);--fine-select-tag-background-color:var(--fine-active-color);--fine-select-placeholder-color:var(--fine-text-placeholder-color);--fine-select-icon-color:var(--fine-icon-color);--fine-select-input-color:var(--fine-text-color);--fine-select-size-large-padding-x:10px;--fine-select-size-large-padding-y:0px;--fine-select-size-large-font-size:var(--fine-text-large-size);--fine-select-size-large-inner-height:38px;--fine-select-size-default-padding-x:10px;--fine-select-size-default-padding-y:0px;--fine-select-size-default-font-size:var(--fine-text-default-size);--fine-select-size-default-inner-height:30px;--fine-select-size-small-padding-x:6px;--fine-select-size-small-padding-y:0px;--fine-select-size-small-font-size:var(--fine-text-small-size);--fine-select-size-small-inner-height:22px;--fine-collapse-head-padding:12px 15px;--fine-collapse-head-background-color:#fafafa;--fine-collapse-title-size:14px;--fine-collapse-title-color:var(--fine-text-lighter-color);--fine-collapse-icon-size:14px;--fine-collapse-icon-color:var(--fine-icon-color);--fine-collapse-body-padding:16px}button,li,ul{margin:0;padding:0;list-style:none}[class^=fine]{box-sizing:border-box}[data-shadow]{border-radius:inherit;position:absolute;left:0;top:0;height:100%;width:100%;animation-iteration-count:1;animation-duration:.6s;animation-timing-function:cubic-bezier(0,0,.2,1),cubic-bezier(0,0,.2,1)}.fine-mask{position:fixed;left:0;top:0;right:0;bottom:0;margin:0 auto;background:rgba(0,0,0,.5);z-index:10;cursor:pointer}.fine-fade-enter-active{transition:all .3s ease-out}.fine-fade-leave-active{transition:all .3s cubic-bezier(1,.5,.8,1)}.fine-fade-enter-from,.fine-fade-leave-to{opacity:0}