various-ui/styles/normalize.css

This is a test version of the Vue 3 component library

:root{--uicolor-main-color:#5449db;--uicolor-main-color-05:#a9a4ed;--uicolor-main-color-005:#f6f6fd;--uicolor-main-active-color:#5364e6;--uicolor-font-1:#404040;--uicolor-font-2:#848484;--uicolor-font-3:#999999;--uicolor-font-4:#c7c7c7;--uicolor-font-4-02:#f4f4f4;--uicolor-font-4-03:#eeeeee;--uicolor-font-4-05:#e3e3e3;--uicolor-font-5:#f8f8f8;--uicolor-font-6:#ffffff;--uicolor-font-6-03:rgba(255, 255, 255, 0.3);--uicolor-error:#cf2424;--uicolor-error-05:#e79191;--uicolor-error-005:#fdf4f4;--uicolor-error-active:#d13e3e;--uicolor-success:#00b137;--uicolor-success-05:#7fd89b;--uicolor-success-005:#f2fbf5;--uicolor-success-active:#13b345;--uicolor-warning:#ff9c00;--uicolor-warning-05:#ffcd7f;--uicolor-warning-005:#fffaf2;--uicolor-warning-active:#faa51c;--uicolor-mask:rgba(255, 255, 255, 0.8);--uicolor-full-mask:rgba(0, 0, 0, 0.75);--uicolor-box-shadow:0px 8px 16px 0px rgba(114, 41, 157, 0.08)}:root{--uisize-font-spacing:8px;--uisize-font-size:14px;--uisize-model-spacing-x:112px;--uisize-model-spacing-y:68px;--uisize-spacing-x:16px;--uisize-spacing-y:16px;--uisize-radius:4px;--uisize-size:40px}:root{--uioption-font-active-color:var(--uicolor-main-color);--uioption-font-color:var(--uicolor-font-2);--uioption-form-color:var(--uicolor-font-4);--uioption-form-radius:var(--uisize-radius);--uioption-form-spacing-x:var(--uisize-spacing-x);--uioption-form-font-size:var(--uisize-font-size);--uioption-form-font-color:var(--uioption-font-color);--uioption-form-message-color:var(--uicolor-font-2);--uioption-form-candidate-color:var(--uicolor-font-2);--uioption-form-background-color:var(--uicolor-font-6);--uioption-form-placeholder-color:var(--uicolor-font-3);--uioption-form-candidate-spacing-x:var(--uisize-spacing-x);--uioption-form-candidate-box-shadow:var(--uicolor-box-shadow);--uioption-form-candidate-background-color:var(--uicolor-font-6);--uioption-form-active-color:var(--uicolor-main-color);--uioption-form-active-font-color:var(--uioption-font-active-color);--uioption-form-candidate-active-color:var(--uicolor-main-active-color);--uioption-form-candidate-active-background-color:var(--uicolor-main-color-005);--uioption-scrollbar-color:var(--uicolor-font-4);--uioption-scrollbar-active-color:var(--uicolor-font-3);--uioption-scrollbar-background-color:var(--uicolor-font-4-02)}:root .ui-middle{--uisize-size:48px}:root .ui-large{--uisize-size:56px}:root .ui-small{--uisize-size:32px;--uisize-font-size:12px}:root .ui-error-type{--uioption-form-message-color:var(--uicolor-error);--uioption-form-active-color:var(--uicolor-error-active);--uioption-form-color:var(--uicolor-error)}:root .ui-warning-type{--uioption-form-message-color:var(--uicolor-warning);--uioption-form-active-color:var(--uicolor-warning-active);--uioption-form-color:var(--uicolor-warning)}:root .ui-success-type{--uioption-form-message-color:var(--uicolor-success);--uioption-form-active-color:var(--uicolor-success-active);--uioption-form-color:var(--uicolor-success)}:root .ui-disabled-status{--uioption-form-color:var(--uicolor-font-4-03);--uioption-form-active-color:var(--uicolor-font-4-03);--uioption-form-background-color:var(--uicolor-font-4-03)}:root .ui-readonly-status{--uioption-form-color:var(--uicolor-font-4-03);--uioption-form-active-color:var(--uicolor-font-4-03);--uioption-form-background-color:var(--uicolor-font-4-03)}*{box-sizing:border-box;word-break:break-word;overflow-wrap:break-word}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-thumb{border:2px solid var(--uicolor-font-4-05);cursor:pointer;background-color:#fff}::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece{background-color:var(--uicolor-font-4-05)}::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none}body{color:var(--uioption-font-color);font-size:var(--uisize-font-size);line-height:calc(var(--uisize-font-size) + var(--uisize-font-spacing) * 2);margin:0}a{color:inherit;transition:all .2s;font-family:inherit;text-decoration:none;background-color:transparent}a:hover{color:var(--uioption-font-active-color)}main{display:block}h1,h2,h3,h4,h5,h6{font-size:1em;margin:0}hr{box-sizing:content-box;height:0;overflow:visible}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{display:block;border-style:none}button,input,optgroup,select,textarea{font-family:inherit;line-height:calc(var(--uisize-font-size) + var(--uisize-font-spacing) * 2);background:0 0;font-size:1em;outline:0;margin:0;border:0}button{overflow:visible}input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button;-moz-appearance:button;-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:textfield}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}p{border:0;margin:0;padding:0}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}[v-cloak]{display:none}@keyframes uiRotateAnimation{from{transform:rotate(0)}to{transform:rotate(360deg)}}#ui-messages{top:0;left:0;width:100%;z-index:6666;display:flex;position:absolute;flex-direction:column}.ui-relative{position:relative;z-index:1}.ui-form-control{background-color:var(--uioption-form-background-color);border-radius:var(--uioption-form-radius);transition:all .3s;font-size:var(--uioption-form-font-size);position:relative;padding:0 var(--uioption-form-spacing-x);border:1px solid var(--uioption-form-color);height:var(--uisize-size);width:100%;color:var(--uioption-form-font-color)}.ui-form-control:focus,.ui-form-control:hover{border-color:var(--uioption-form-active-color)}.ui-form-selector .ui-form-control{border-color:var(--uioption-form-active-color)}.ui-form-clearable{transition:all .3s;transform:translate(0,-50%);font-size:24px;position:absolute;cursor:pointer;color:var(--uioption-form-font-color);right:var(--uioption-form-spacing-x);top:50%}.ui-form-clearable:hover{color:var(--uioption-form-active-font-color)}.ui-form-candidates{background-color:var(--uioption-form-candidate-background-color);transform-origin:center top;border-radius:var(--uioption-form-radius);box-shadow:var(--uioption-form-candidate-box-shadow);position:absolute;border:1px solid var(--uicolor-font-4-05);left:0;top:0}.ui-form-candidates>.ui-form-candidates-triangle{position:absolute;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--uioption-form-candidate-background-color)}.ui-form-candidates>.ui-form-candidate-container{height:100%;overflow:hidden}.ui-form-candidates>.ui-form-candidate-container>.ui-form-candidate-content{overflow-y:auto;padding:8px 0}.ui-form-candidates>.ui-form-candidate-container>.ui-form-candidate-content>.ui-form-candidate{cursor:pointer;height:var(--uisize-size);padding:0 var(--uioption-form-candidate-spacing-x);overflow:hidden;transition:all .3s;white-space:nowrap;line-height:var(--uisize-size);text-overflow:ellipsis}.ui-form-candidates>.ui-form-candidate-container>.ui-form-candidate-content>.ui-form-candidate.ui-active,.ui-form-candidates>.ui-form-candidate-container>.ui-form-candidate-content>.ui-form-candidate:hover{background:var(--uioption-form-candidate-active-background-color);color:var(--uioption-form-candidate-active-color)}.ui-form-candidates>.ui-form-candidate-container>.ui-form-candidate-content::-webkit-scrollbar-thumb{border-width:1px 1px 1px 2px}.ui-mask{background-color:var(--uicolor-mask);justify-content:center;border-radius:var(--uisize-radius);align-items:center;transition:all .3s;position:absolute;z-index:6666;display:flex;bottom:0;right:0;left:0;top:0}.ui-mask .ui-mask-icon{animation:uiRotateAnimation 1s linear infinite}.ui-mask .ui-mask-context{margin-top:4px}.ui-mask.v-enter-from,.ui-mask.v-leave-to{opacity:0}.ui-mask.v-enter-to,.ui-mask.v-leave-from{opacity:1}.ui-loading .ui-loading-icon{font-size:20px}.ui-loading.ui-fixed-loading{position:fixed;flex-direction:column}.ui-loading.ui-fixed-loading .ui-loading-icon{font-size:36px}.ui-loading.ui-fixed-loading .ui-loading-content{margin:8px 0 0;font-size:20px;font-weight:700}.ui-tooltip{--uioption-tooltip-radius:var(--uisize-radius);--uioption-tooltip-spacing-x:var(--uisize-spacing-x);--uioption-tooltip-spacing-y:calc(var(--uisize-spacing-y) / 2);--uioption-tooltip-box-shadow:var(--uicolor-box-shadow);--uioption-tooltip-background-color:var(--uicolor-font-6)}.ui-tooltip{background-color:var(--uioption-tooltip-background-color);border-radius:var(--uioption-tooltip-radius);white-space:nowrap;box-shadow:var(--uioption-tooltip-box-shadow);position:absolute;padding:var(--uioption-tooltip-spacing-y) var(--uioption-tooltip-spacing-x);border:1px solid var(--uicolor-font-4-03);left:0;top:0}.ui-tooltip .ui-tooltip-triangle{position:absolute;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--uicolor-font-4-03)}.ui-tooltip .ui-tooltip-triangle::before{top:0;left:-1px;content:"";position:absolute;transform:translate(-100%,-50%);border-style:solid;border-width:3px 0 3px 5px;border-color:transparent transparent transparent var(--uioption-tooltip-background-color)}.ui-tooltip .ui-tooltip-content{height:100%;overflow:hidden auto}.ui-tooltip-container{display:inline-block;vertical-align:baseline}.ui-scrollbar-container{position:absolute;border-radius:9999px;background-color:var(--uioption-scrollbar-background-color)}.ui-scrollbar-container .ui-scrollbar-bar{cursor:pointer;transition:all .3s;background:var(--uioption-scrollbar-color);border-radius:9999px}.ui-scrollbar-container .ui-scrollbar-bar:hover{background:var(--uioption-scrollbar-active-color)}.ui-scrollbar-container.ui-scrollbar-level{left:0;right:0;bottom:0;height:6px}.ui-scrollbar-container.ui-scrollbar-level .ui-scrollbar-bar{height:100%}.ui-scrollbar-container.ui-scrollbar-vertical{top:0;width:6px;right:0;bottom:0}.ui-scrollbar-container.ui-scrollbar-vertical .ui-scrollbar-bar{width:100%}