summaryrefslogtreecommitdiff
path: root/client/css/post-notes-overlay-control.styl
blob: a3bc47938b9aba05260e6a202b33d44424abd2a0 (plain)
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
@import colors

.post-overlay
    &[data-state=ready-to-draw],
    &[data-state=drawing-rectangle],
    &[data-state=drawing-polygon]
        &:after
            box-sizing: border-box
            border: 0.3em dashed $active-note-overlay-border-color
            background: $active-note-overlay-background-color
            display: block
            content: ' '
            pointer-events: none
            position: absolute
            width: 100%
            height: 100%
            left: 0
            right: 0
            top: 0
            bottom: 0

.notes-overlay
    g
        stroke-width: 1px

        polygon
            fill: $note-background-color
            stroke: $note-border-color
            pointer-events: auto
        ellipse
            display: none

    g[data-state=editing], g[data-state=drawing]
        stroke-width: 2px

        polygon
            fill: $edited-note-background-color
            stroke: $edited-note-border-color
        ellipse
            fill: $edited-note-border-color
            display: block
            &.nearby
                fill: $hovered-note-point-color

    g[data-state=drawing]
        ellipse:first-of-type
            fill: $first-note-point-color
            &.nearby
                fill: $hovered-first-note-point-color

.note-text
    position: absolute
    max-width: 22.5em
    display: none

    &:not([data-state=read-only])
        pointer-events: none

    &>.wrapper
        background: $note-text-background-color
        padding: 0.3em 0.6em
        border: 1px solid $note-text-border-color
        color: $note-text-text-color
        box-sizing: border-box

        p:last-of-type
            margin-bottom: 0
        p:first-of-type
            margin-top: 0