vue3-scale-ruler/lib/style.css

.ibsp-nextui-ruler[data-v-62c527c9]{--ruler-bg-color: rgba(0, 0, 0, .5);--ruler-border-color: rgba(0, 0, 0, .85);--ruler-line-color: red;--ruler-font-color: #999;--ruler-active-color: red;--ruler-block-color: red;position:absolute;width:100%;height:100%;z-index:100;pointer-events:none}.ibsp-nextui-ruler .ruler-icon[data-v-62c527c9]{position:absolute;top:0;left:0;cursor:pointer;pointer-events:all;border:1px solid var(--ruler-bg-color);border-width:0 1px 1px 0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ruler-font-color)}.ibsp-nextui-ruler .ruler-icon[data-v-62c527c9]:hover{color:var(--ruler-active-color)}.ruler[data-v-17a51a09]{position:absolute;top:0;left:0;pointer-events:all;cursor:default;background:var(--ruler-bg-color)}.ruler .ruler-block[data-v-17a51a09]{background:var(--ruler-block-color);opacity:.3;position:absolute;z-index:0}.ruler .ruler-block-v[data-v-17a51a09]{width:100%}.ruler .ruler-block-h[data-v-17a51a09]{height:100%}.ruler-v[data-v-17a51a09]{height:100%;border-right:1px solid var(--ruler-border-color)}.ruler-h[data-v-17a51a09]{width:100%;border-bottom:1px solid var(--ruler-border-color)}canvas[data-v-17a51a09]{width:100%;height:100%;position:relative;z-index:1;pointer-events:auto}.ruler-line[data-v-3e295d97]{position:absolute;z-index:1;pointer-events:auto}.ruler-line>div[data-v-3e295d97]{display:none;position:absolute;font-size:12px;display:flex;align-items:center;column-gap:10px;left:-14px;visibility:hidden}.ruler-line>div i[data-v-3e295d97]{pointer-events:auto;opacity:.5;display:block;cursor:pointer;color:var(--ruler-font-color);width:14px;height:14px}.ruler-line>div i[data-v-3e295d97]:hover{opacity:1;color:var(--ruler-active-color)}.ruler-line>div span[data-v-3e295d97]{display:block}.ruler-line:hover>div[data-v-3e295d97]{visibility:visible}.ruler-line>span[data-v-3e295d97]{display:block;position:absolute;font-size:12px;border:1px solid var(--ruler-border-color);background:var(--ruler-bg-color);color:var(--ruler-font-color);padding:3px 5px}.ruler-line-h[data-v-3e295d97]{width:11px;height:100%;background:transparent;margin-left:-5px}.ruler-line-h[data-v-3e295d97]:before{content:"";display:block;width:1px;height:100%;position:absolute;left:5px;top:0;background:var(--ruler-line-color)}.ruler-line-h>span[data-v-3e295d97]{left:15px}.ruler-line-v[data-v-3e295d97]{height:11px;width:100%;background:transparent;margin-top:-5px}.ruler-line-v[data-v-3e295d97]:before{content:"";display:block;height:1px;width:100%;position:absolute;top:5px;left:0;background:var(--ruler-line-color)}.ruler-line-v>span[data-v-3e295d97]{transform:rotate(-90deg);transform-origin:0 0;top:-5px}.ruler-line-hover[data-v-3e295d97]{pointer-events:none}