smalruby3-gui/src/components/blocks/blocks.css at d9f80c994b1e4a5f739b3d7e79ec00ba8c789f11 · smalruby/smalruby3-gui · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@import "../../css/units.css";
@import "../../css/colors.css";
@import "../../css/z-index.css";

.blocks {
    height: 100%;
}

.drag-over:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.75;
    background-color: $drop-highlight;
    transition: all 0.25s ease;
}

.blocks :global(.injectionDiv){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid $ui-black-transparent;
    border-top-right-radius: $space;
    border-bottom-right-radius: $space;
}

[dir="rtl"] .blocks :global(.injectionDiv) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: $space;
    border-bottom-left-radius: $space;
}

.blocks :global(.blocklyMainBackground) {
    stroke: none;
}

.blocks :global(.blocklyToolboxDiv) {
    border-right: 1px solid $ui-black-transparent;
    border-bottom: 1px solid $ui-black-transparent;
    box-sizing: content-box;
    height: calc(100% - 3.25rem) !important;

    /*
        For now, the layout cannot support scrollbars in the category menu.
        The line below works for Edge, the `::-webkit-scrollbar` line
        below that is for webkit browsers. It isn't possible to do the
        same for Firefox, so a different solution may be needed for them.
    */
    -ms-overflow-style: none;
}

[dir="rtl"] .blocks :global(.blocklyToolboxDiv) {
    border-right: none;
    border-left: 1px solid $ui-black-transparent;
}

.blocks :global(.blocklyToolboxDiv::-webkit-scrollbar) {
    display: none;
}

.blocks :global(.blocklyFlyout) {
    border-right: 1px solid $ui-black-transparent;
    box-sizing: content-box;
}

[dir="rtl"] .blocks :global(.blocklyFlyout) {
    border-right: none;
    border-left: 1px solid $ui-black-transparent;
}

.blocks :global(.blocklyFlyout:hover) {
    overflow: visible;
    clip-path: inset(0 -100vw 0 0);
    -webkit-clip-path: inset(0 -100vw 0 0);
}

[dir="rtl"] .blocks :global(.blocklyFlyout:hover) {
    clip-path: inset(0 0 0 -100vw);
    -webkit-clip-path: inset(0 0 0 -100vw);
}

.blocks :global(.blocklyFlyout:hover .blocklyWorkspace) {
    clip-path: none;
    -webkit-clip-path: none;
}

.blocks :global(.blocklyFlyout:hover .blocklyScrollbarBackground:hover) {
    opacity: 0.4;
}

.blocks :global(.blocklyFlyout .blocklyFlyoutScrollbar) {
    margin-left: 4px;
}


.blocks :global(.blocklyBlockDragSurface) {
    /*
        Fix an issue where the drag surface was preventing hover events for sharing blocks.
        This does not prevent user interaction on the blocks themselves.
    */
    pointer-events: none;
    z-index: $z-index-drag-layer; /* make blocks match gui drag layer */
}

/*
    Shrink category font to fit "My Blocks" for now.
    Probably will need different solutions for language support later, so
    make the change here instead of in scratch-blocks.
*/
.blocks :global(.scratchCategoryMenuItemLabel) {
    font-size: 0.65rem;
}

.blocks :global(.blocklyMinimalBody) {
    min-width: auto;
    min-height: auto;
}