Add `.blockmotion`, `.blockdata` etc css styles

[andylolz]

There appears to be some disagreement in the instructions over which blocks are yellow, and therefore should have { .blockyellow } (it’s either control or events). There are also instances of { .blocklightblue } which is not defined in the css.

Adding the 10 classes .blockmotion, .blocklooks, .blockdata etc to the css would help resolve these sorts of issues. We could even add the Scratch 1 aliases (e.g. .blockvariables).

[kmwilson]

I added css tab and text headers as well

/------------------------------------\

BLOCK HEADER TAB

------------------------------------/

block.tabmotion { background: rgba(74, 108, 212, 0.8); } block.tablooks { background: rgba(138, 85, 215, 0.8); } block.tabsound { background: rgba(187, 66, 195, 0.8); } block.tabpen { background: rgba(14, 154, 108, 0.8); } block.tabdata { background: rgba(238, 125, 22, 0.8); } block.tabevents { background: rgba(200, 131, 48, 0.8); } block.tabcontrol { background: rgba(225, 169, 26, 0.8); } block.tabsensing { background: rgba(44, 165, 226, 0.8); } block.taboperator { background: rgba(92, 183, 18, 0.8); } block.tabmore { background: rgba(99, 45, 153, 0.8); }

/------------------------------------\

BLOCK HEADER TEXT

------------------------------------/

block.headmotion { color: rgba(74, 108, 212, 1.2); } block.headlooks { color: rgba(138, 85, 215, 1.2); } block.headsound { color: rgba(187, 66, 195, 1.2); } block.headpen { color: rgba(14, 154, 108, 1.2); font-weight: 500; } block.headdata { color: rgba(238, 125, 22, 1.2); } block.headevents { color: rgba(200, 131, 48, 1.2); font-weight: 500; } block.headcontrol { color: rgba(225, 169, 26, 1.2); } block.headsensing { color: rgba(44, 165, 226, 1.2); } block.headoperator { color: rgba(92, 183, 18, 1.2); } block.headmore { color: rgba(99, 45, 153, 1.2); }

Extract from Fruit Machine

This will be triggered when we click the green flag.

Click the Control tab and add a forever and attach it so it snaps to the bottom.

[andylolz]

Hi @kmwilson,

Unfortunately, your comment above has been parsed and the important bit was stripped out. But I think I understand, and I think it’s another good idea.

I think you’re styling not only the block (in this case, the forever block) but also the tabs (here, it’s the Control tab) so they both get some colour, and both use the semantic naming for styles.

At present, I believe tabs are emboldened, and a grey background added.

[andylolz]

I’ll use your example to create a separate pull request for tabs, since it’s a separate (but related) change. Or if you’re comfortable doing it, feel free to make the pull request.

Thanks again!