ueblueprint/scss/style.scss

@font-face {
    font-family: "Roboto";
    font-style: light;
    src:
        url("../font/roboto-light.woff2") format("woff2"),
        url("../font/roboto-light.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-style: regular;
    src:
        url("../font/roboto-regular.woff2") format("woff2"),
        url("../font/roboto-regular.woff") format("woff");
}

ueb-blueprint {
    display: block;
    position: relative;
    font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: var(--ueb-font-size);
    user-select: none;
}

.ueb-viewport-header {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1.5em;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.ueb-viewport-zoom {
    margin-left: auto;
    color: #4d4d4db7;
    font-size: 20px;
}

.ueb-viewport-body {
    position: relative;
    height: var(--ueb-height, 30rem);
    overflow: hidden;
    scrollbar-width: 0;
}

ueb-blueprint[data-focused="true"] .ueb-viewport-body {
    overflow: scroll;
}

.ueb-grid {
    --ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
    height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
    background-color: #262626;
    background-image:
        /* Axis lines */
        linear-gradient(var(--ueb-grid-axis-line-color),
            var(--ueb-grid-axis-line-color)),
        linear-gradient(var(--ueb-grid-axis-line-color),
            var(--ueb-grid-axis-line-color)),
        /* Dark bigger grid */
        linear-gradient(to right,
            var(--ueb-grid-set-line-color),
            var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width),
            transparent var(--ueb-grid-line-actual-width),
            transparent),
        linear-gradient(to bottom,
            var(--ueb-grid-set-line-color),
            var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width),
            transparent var(--ueb-grid-line-actual-width),
            transparent),
        /* Light grid */
        linear-gradient(to right,
            var(--ueb-grid-line-color),
            var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width),
            transparent var(--ueb-grid-line-actual-width),
            transparent),
        linear-gradient(to bottom,
            var(--ueb-grid-line-color),
            var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width),
            transparent var(--ueb-grid-line-actual-width),
            transparent);
    background-size:
        /* Axis lines */
        100% var(--ueb-grid-line-actual-width),
        var(--ueb-grid-line-actual-width) 100%,
        /* Dark bigger grid */
        calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)),
        calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set) * var(--ueb-grid-actual-size)),
        /* Light grid */
        var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),
        var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);
    background-position: calc(var(--ueb-translate-x) * 1px) calc(var(--ueb-translate-y) * 1px);
    background-repeat: repeat-x, repeat-y, repeat, repeat, repeat, repeat;
    transform: scale(var(--ueb-scale), var(--ueb-scale));
    transform-origin: 0 0;
    overflow: hidden;
}

ueb-blueprint[data-drag-scrolling="true"] .ueb-grid {
    cursor: grabbing;
}

ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
    cursor: default;
}

.ueb-zoom--.ueb,
.ueb {
    --ueb-scale: 1;
    --ueb-grid-actual-size: var(--ueb-grid-size);
}

.ueb-zoom-7.ueb {
    --ueb-scale: 2;
}

.ueb-zoom-6.ueb {
    --ueb-scale: 1.875;
}

.ueb-zoom-5.ueb {
    --ueb-scale: 1.75;
}

.ueb-zoom-4.ueb {
    --ueb-scale: 1.675;
}

.ueb-zoom-3.ueb {
    --ueb-scale: 1.5;
}

.ueb-zoom-2.ueb {
    --ueb-scale: 1.375;
}

.ueb-zoom-1.ueb {
    --ueb-scale: 1.25;
}

.ueb-zoom--1.ueb {
    --ueb-scale: 0.875;
}

.ueb-zoom--2.ueb {
    --ueb-scale: 0.75;
}

.ueb-zoom--3.ueb {
    --ueb-scale: 0.675;
}

.ueb-zoom--4.ueb {
    --ueb-scale: 0.5;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}

.ueb-zoom--5.ueb {
    --ueb-scale: 0.375;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}

.ueb-zoom--6.ueb {
    --ueb-scale: 0.333333;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}

.ueb-zoom--7.ueb {
    --ueb-scale: 0.3;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}

.ueb-zoom--8.ueb {
    --ueb-scale: 0.266666;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}

.ueb-zoom--9.ueb {
    --ueb-scale: 0.233333;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}

.ueb-zoom--10.ueb {
    --ueb-scale: 0.2;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}

.ueb-zoom--11.ueb {
    --ueb-scale: 0.166666;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}

.ueb-zoom--12.ueb {
    --ueb-scale: 0.133333;
    --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}

.ueb-grid-content {
    position: relative;
    width: 0;
    height: 0;
    transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px));
}

.ueb-positioned {
    --ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));
    --ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));
    --ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));
    --ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));
    --ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));
    --ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));
    position: absolute;
    top: calc(var(--ueb-computed-min-y) * 1px);
    left: calc(var(--ueb-computed-min-x) * 1px);
    width: calc(var(--ueb-computed-width) * 1px);
    height: calc(var(--ueb-computed-height) * 1px);
}

ueb-selector {
    display: block;
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-image:
        /* Top */
        repeating-linear-gradient(90deg,
            transparent,
            transparent calc(1px / var(--ueb-scale)),
            white calc(2px / var(--ueb-scale)),
            white calc(7px / var(--ueb-scale)),
            transparent calc(7px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        repeating-linear-gradient(90deg,
            black,
            black calc(8px / var(--ueb-scale)),
            transparent calc(9px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        /* Bottom */
        repeating-linear-gradient(90deg,
            transparent,
            transparent calc(1px / var(--ueb-scale)),
            white calc(2px / var(--ueb-scale)),
            white calc(7px / var(--ueb-scale)),
            transparent calc(7px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        repeating-linear-gradient(90deg,
            black,
            black calc(8px / var(--ueb-scale)),
            transparent calc(9px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        /* Left */
        repeating-linear-gradient(180deg,
            transparent,
            transparent calc(1px / var(--ueb-scale)),
            white calc(1px / var(--ueb-scale)),
            white calc(7px / var(--ueb-scale)),
            transparent calc(7px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        repeating-linear-gradient(180deg,
            black,
            black calc(8px / var(--ueb-scale)),
            transparent calc(9px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        /* Right */
        repeating-linear-gradient(0deg,
            transparent,
            transparent calc(1px / var(--ueb-scale)),
            white calc(2px / var(--ueb-scale)),
            white calc(7px / var(--ueb-scale)),
            transparent calc(7px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale))),
        repeating-linear-gradient(0deg,
            black,
            black calc(8px / var(--ueb-scale)),
            transparent calc(9px / var(--ueb-scale)),
            transparent calc(11px / var(--ueb-scale)));
    background-size:
        /* Top */
        100% calc(1px / var(--ueb-scale)),
        100% calc(3px / var(--ueb-scale)),
        /* Bottom */
        100% calc(1px / var(--ueb-scale)),
        100% calc(3px / var(--ueb-scale)),
        /* Left */
        calc(1px / var(--ueb-scale)) 100%,
        calc(3px / var(--ueb-scale)) 100%,
        /* Right */
        calc(1px / var(--ueb-scale)) 100%,
        calc(3px / var(--ueb-scale)) 100%;
    background-position:
        /* Top */
        0 calc(1px / var(--ueb-scale)), 0 0,
        /* Bottom */
        0 calc(100% - 1px / var(--ueb-scale)), 0 100%,
        /* Left */
        calc(1px / var(--ueb-scale)) 0, 0 0,
        /* Right */
        calc(100% - 1px / var(--ueb-scale)) 0, 100% 0;
    background-repeat: no-repeat;
}

ueb-blueprint[data-selecting="true"] ueb-selector {
    visibility: visible;
    @extend .ueb-positioned;
}

ueb-selector>* {
    visibility: visible;
}