fine-true/lib/popover/index.css

A small and beautiful Vue3 version of the UI Library

.fine-fade-scale-enter-active{transition:opacity .25s ease-out,transform .25s ease-out}.fine-fade-scale-leave-active{transition:opacity .25s ease,transform .25s ease-in}.fine-fade-scale-enter-from{opacity:0}.fine-fade-scale-leave-to{opacity:0;transform:scale3d(.8,.8,.8)}.fine-popover{position:absolute;box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:'tnum';font-weight:400;white-space:normal;text-align:left;cursor:auto;-webkit-user-select:text;-moz-user-select:text;user-select:text}.fine-popover .fine-popover-content{background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.fine-popover .fine-popover-inner{padding:12px 6px}.fine-popover .fine-popover-arrow{position:absolute;display:block;width:8px;height:8px;background:0 0;border-style:solid;border-width:4px;transform:rotate(45deg)}.fine-popover.fine-popover-bottom,.fine-popover.fine-popover-bottom-end,.fine-popover.fine-popover-bottom-start{padding-top:10px}.fine-popover.fine-popover-bottom .fine-popover-arrow,.fine-popover.fine-popover-bottom-end .fine-popover-arrow,.fine-popover.fine-popover-bottom-start .fine-popover-arrow{top:6px;border-color:#fff transparent transparent #fff;box-shadow:-2px -2px 5px rgba(0,0,0,.06)}.fine-popover.fine-popover-bottom .fine-popover-arrow,.fine-popover.fine-popover-top .fine-popover-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.fine-popover.fine-popover-bottom-start .fine-popover-arrow,.fine-popover.fine-popover-top-start .fine-popover-arrow{left:0;transform:translateX(100%) rotate(45deg)}.fine-popover.fine-popover-bottom-end .fine-popover-arrow,.fine-popover.fine-popover-top-end .fine-popover-arrow{left:100%;transform:translateX(-200%) rotate(45deg)}.fine-popover.fine-popover-top,.fine-popover.fine-popover-top-end,.fine-popover.fine-popover-top-start{padding-bottom:10px}.fine-popover.fine-popover-top .fine-popover-arrow,.fine-popover.fine-popover-top-end .fine-popover-arrow,.fine-popover.fine-popover-top-start .fine-popover-arrow{bottom:6.2px;border-color:transparent #fff #fff transparent;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.fine-popover.fine-popover-top-start{transform-origin:0 100%}.fine-popover.fine-popover-top{transform-origin:50% 100%}.fine-popover.fine-popover-top-end{transform-origin:100% 100%}.fine-popover.fine-popover-bottom-start{transform-origin:0 0}.fine-popover.fine-popover-bottom{transform-origin:50% 0}.fine-popover.fine-popover-bottom-end{transform-origin:100% 0}.fine-popover-source-container{position:fixed;width:100%;left:0;top:0;z-index:100}