esvege/style.css at master · Der-Zauberer/esvege · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
swd-icon.cursor-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M2 2 L14 7 L10 10 L16.5 16.5 L16.5 16.5 L10 10 L7 14Z" stroke-width="2" stroke="black"/></svg>') }
swd-icon.rect-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 5 H17 V13 H1 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
swd-icon.circle-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="8" stroke-width="2" stroke="black" fill="none"/></svg>') }
swd-icon.path-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 1 L17 17" stroke-width="2" stroke="black"/></svg>') }
swd-icon.layer-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M2 7 L9 3 L16 7 L9 11 Z M6 9 L2 11 L9 15 L16 11 L12 9" stroke-width="2" stroke="black" fill="none"/></svg>') }

.container {
    display: flex;
    height: 100vh;
}

.tools {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & .tools__main,  & .tools__addition {
        display: flex;
        flex-direction: column;

        & button[selected] {
            background: var(--theme-primary-color);
            color: white;
        }
    }
}

.tools, .layer, .viewport {
    border-right: var(--theme-element-primary-color) solid var(--theme-border-width);
}

.layer {
    display: flex;
    flex-direction: column;
    min-width: 150px;

    & button {
        text-align: start;
    }
}

.viewport {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: scroll;

    & button {
        display: block;
        margin: auto;
    }

    & .viewport__board {
        display: block;

        & svg {
            display: block;
            background: repeating-conic-gradient(var(--theme-element-primary-color) 0 25%, transparent 0 50%) 50% / 50px 50px;
            border: var(--theme-element-primary-color) solid var(--theme-border-width);
        }
    }

    & .viewport__marker {
        position: absolute;
        will-change: transform, height, width;
        border: var(--theme-primary-color) solid var(--theme-border-width);
    }

}

.options {
    min-width: 250px;
    max-height: 100%;
    overflow: auto;
    --theme-element-spacing: var(--theme-inner-element-spacing);
    padding: var(--theme-element-spacing);

    & h6 {
        grid-column: span 2;
    }

    & swd-input:has(textarea) {
        grid-column: span 2;

        & textarea {
            width: 100%;
            resize: vertical;
        }
    }
}