+
senseBoxMCU
+
+ The senseBox MCU is a microcontroller specially developed for the needs of the senseBox.
+ Therefore, the microcontroller has three main features: it is fast, energy-efficient and has a large program memory.
+
+
+
+ The microcontroller can easily be "programmed" in 10 minutes, even without prior knowledge, by transferring a pre-made sketch to the microcontroller.
+ For advanced users, the Arduino IDE can be used as usual to create new and individual projects.
+
+
+
+
+
+
+```
+
+:::info
+
+If you are already using the senseBoxMCU library, the senseBoxIO library is already integrated and does not need to be included separately.
+:::
+## Turning Ports On/Off
+
+With the senseBoxIO library, unused ports can be turned on/off:
+
+#### Deactivating all Ports
+
+```cpp
+ void powerNone(void)
+```
+
+#### Activating all Ports
+
+```cpp
+ void powerAll(void)
+```
+
+#### Selective Turning On/Off of Ports and Connections
+
+```cpp
+
+ void powerI2C(bool on) //power the I2C Ports
+
+ void powerUART(bool on) //power the UART Ports
+
+ void powerXB1(bool on) //power XBEE Port 1
+
+ void powerXB2(bool on) //power XBEE Port 2
+
+ void SPIselectNone(void) //
+
+ void SPIselectXB1(void) //
+
+ void SPIselectXB2(void) //
+
+```
+
+## Turning Status LEDs On/Off
+
+Allows turning the status LEDs on/off
+
+```cpp
+ void statusNone(void) // deactivate all status LEDs
+
+ void statusRed(void) //activate the red status LED
+
+ void statusGreen(void) //activate the green status LED
+```
+
+> - [senseBoxIO Library](https://github.com/sensebox/senseBoxMCU-core/tree/master/arduino/samd/libraries/senseBoxIO)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
new file mode 100644
index 0000000..5b06383
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcus2/mcu-s2-overview.mdx
@@ -0,0 +1,132 @@
+---
+title: senseBox:mcu S2
+hide_title: true
+---
+
+import Admonition from "@theme/Admonition";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import image from "@site/static/img/mcus2/mcus2top.png";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@site/src/components/ui/tooltip";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@site/src/components/ui/popover";
+import { Button } from "@site/src/components/ui/button";
+import mcus2ports from "@site/static/img/en/mcus2/mcus2-ports.png";
+import lightSensor from "@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png";
+import display from "@site/static/img/hardware-bilder/oled/display.png";
+import tempSensor from "@site/static/img/hardware-bilder/temperatur-luftfeuchte/sensor_temperatur_luftfeuchte.png";
+import pressureSensor from "@site/static/img/hardware-bilder/luftdruck/bmp_top.png";
+import tofSensor from "@site/static/img/hardware-bilder/tof/tofsensor.png";
+import ledMatrix from "@site/static/img/hardware-bilder/led-matrix/led-matrix.png";
+import i2cdaiychain from "@site/static/img/hardware-bilder/i2c/i2c-daisy-chain.png";
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText";
+import mcus2top from "@site/static/img/mcus2/mcus2top.png";
+
+
+
MCU S2 (ESP32)
+
+ The microcontroller based on ESP-32 offers a multitude of new possibilities in terms of data transfer, data exchange and operation.
+
+
+
+
{" "}
+
+
+
Ports
+
+
+
+ I2C/Wire ports
+
+
+
+
Sensors and accessories on the I2C/Wire ports
+
+
+
+
Light sensor
+
+
+
+
Temperature and humidity
+
+
+
+
Air pressure
+
+
+
+
Time of Flight(Tof)
+
+
+
+
Display
+
+
+
+
+
+
+ Digital/Analogue ports
+
+
+
+
Sensors and accessories on the digital/analogue ports
+
+
+
+
LED-Matrix
+
+
+
+
+
+
+
+
I2C/Wire daisy chain
+
+ An I2C daisy chain enables the simple and efficient connection of several devices in a serial communication chain using the I2C protocol.
+ The daisy chain configuration allows each device in the chain to send and receive data. This method is particularly useful in applications
+ where space and resources are limited, as it minimises the number of physical connections required and at the same time enables robust
+ and reliable data communication.
+
+
+
+
+
+
+
+To use the senseBox, it must be supplied with power. There are two ways to supply the senseBox with power:
+
+
1. USB cable
+
+You can supply the senseBox with power using a USB-C cable. This is the easiest option if you are programming on a computer.
+Plug the smaller end of the USB cable into the USB port of the senseBox MCU S2. The USB port is located at the top next to the red reset button.
+The other end of the cable is plugged into the USB port of your computer or a power bank.
+
+
+
2. Battery
+
+If you want to supply your senseBox with power via a battery, you can do this via the two-pin JST connector on the senseBox MCU2. Simply plug the JST connector
+of the battery into the JST connector on the senseBox MCU S2. This is located at the top, next to the USB connection.
+
+
+
+
+
Transfer
+
+ {" "}
+ Now connect your senseBox MCU-S2 to your computer using the USB cable.
+ Your senseBox should now be recognized as a removable storage by your computer.{" "}
+
+
Copy
+
+ Now you can simply copy the previously downloaded .BIN file to the removable storage SENSEBOX using drag & drop.
+ The senseBox will now play your uploaded sketch.
+
+
+
+ Currently, the transfer of a .bin file to the senseBox may take a little longer.
+ The transfer process is complete when the LED lights up green!
+
+
+
+
+
+ Beim Resetten werden alle Daten auf deiner senseBox gelöscht.
+
+
+1. Drücke den Boot Switch Knopf und halte ihn gedrückt.
+2. Drücke den Reset Knopf und halte ihn kurz gedrückt.
+3. Lasse den Boot Switch Knopf los.
+4. Warte bis die senseBox neu gestartet ist.
+
+Nun sollte die senseBox zurückgesetzt sein und wieder funktionieren.
+
+Wenn du weitere Hilfe benötigst, schaue in unserem [Forum](https://forum.sensebox.de/) vorbei oder schreibe uns eine E-Mail an support@sensebox.de
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/boards/mini/mini-overview.mdx b/i18n/en/docusaurus-plugin-content-docs/current/boards/mini/mini-overview.mdx
new file mode 100644
index 0000000..a9ec05a
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/boards/mini/mini-overview.mdx
@@ -0,0 +1,52 @@
+---
+title: senseBox:mini
+hide_title: true
+---
+
+import mini from '@site/static/img/mini/sensebox-mini.png'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import umweltsensor from '@site/static/img/hardware-bilder/umweltsensor/bme.png'
+import miniRgbLed from '@site/static/img/mini/mini-rgb-led.png'
+import wifiBee from '@site/static/img/hardware-bilder/bees/wifi-bee/wifi.png'
+import display from '@site/static/img/hardware-bilder/oled/display.png'
+
+
+
senseBox:mini
+
+ The senseBox:mini is your entry into the world of microcontrollers and programming.
+ Build small environmental monitoring stations, capture your environment with sensors, and share everything online.
+
+
+
+
+
+
+In addition, the board has an SD card module and the following ports:
+
+- 2x I2C
+- 1x UART
+- 1x Digital analogue port
+
+## Tiny computer but a lot of fun
+With the senseBox:mini, coding becomes child's play.
+The entry into programming the senseBox is easy, children and adults can start immediately without prior knowledge and celebrate success in no time.
+From blinking the built-in RGB LED, data storage on an SD card, to the IoT environmental monitoring station, everything is possible.
+
+## The Internet of Things
+In the Internet of Things (IoT), physical and virtual objects are interconnected.
+With the senseBox:mini, you can build and program your own IoT devices and gain insights into technologies (keyword Smart Cities, Smart Home) that will revolutionize our everyday lives.
+
+## Easily expandable
+The senseBox:mini is not limited to the hardware it contains.
+You can connect any senseBox sensor and program it using our graphical programming interface.
+The senseBox MCU is also fully Arduino compatible.
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/deployment.mdx b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/deployment.mdx
new file mode 100644
index 0000000..d8d1978
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/deployment.mdx
@@ -0,0 +1,82 @@
+---
+sidebar_position: 2
+title: Die senseBox in Betrieb nehmen
+hide_title: false
+---
+
+import Layout from "@site/src/Layout";
+import { useBoardStore } from "@site/src/lib/stores/store";
+import BoardDropdown from "@site/src/components/BoardDropdown/BoardDropdown";
+
+
+
+## Die senseBox mit Strom versorgen
+
+{ useBoardStore((state)=> state.board) === 'MCU' &&(
+
+
+
+ {" "}
+ Um die senseBox zu verwenden, muss sie natürlich mit Strom versorgt werden. Es
+ gibt zwei Möglichkeiten die senseBox mit Strom zu versorgen:{" "}
+
+
1. USB-Kabel
+
+ {" "}
+ Du kannst die senseBox mit Hilfe des beiliegenden USB-Kabels mit Strom versorgen.
+ Diese Möglichkeit ist die einfachste, wenn du sowieso am Computer programmierst.
+ Stecke das Ende des USB-Kabels in den USB-C-Anschluss der senseBox MCU. Dieser
+ befindet sich oben neben dem roten Reset-Knopf. Das andere Ende des Kabels wird
+ in den USB-Anschluss deines Computers oder einer Powerbank gesteckt.
+
+
+
2. Akku
+
+ Wenn du deine senseBox über einen Akku mit Strom versorgen möchtest, kannst
+ du dies über den zweipoligen JST-Stecker auf der senseBox MCU tun. Stecke
+ dazu einfach den JST-Stecker des Akkus in den JST-Anschluss auf der senseBox
+ MCU. Dieser befindet sich oben, neben dem USB-Anschluss.{" "}
+
+
+
+
+ Um die senseBox zu verwenden, muss sie natürlich mit Strom versorgt werden. Es gibt zwei Möglichkeiten die senseBox mit Strom zu versorgen:
+
+
1. USB-Kabel
+
+
+ Du kannst die senseBox mit Hilfe des beiliegenden USB-C-Kabels mit Strom versorgen. Diese Möglichkeit ist die einfachste, wenn du sowieso am Computer programmierst.
+ Stecke das kleinere Ende des USB-Kabels in den USB-Anschluss des senseBox MCU. Dieser befindet sich oben neben dem roten Reset-Knopf. Das andere Ende des Kabels wird in den USB-Anschluss deines Computers oder einer Powerbank gesteckt.
+
+
+
2. Akku
+
+
+ Wenn du deine senseBox über einen Akku mit Strom versorgen möchtest, kannst du dies über den zweipoligen JST-Stecker auf der senseBox MCU tun. Stecke dazu einfach den JST-Stecker des Akkus in den JST-Anschluss auf der senseBox MCU. Dieser befindet sich oben, neben dem USB-Anschluss.
+
+
+
+
+
+ {" "}
+ Bitte wähle dein Board aus, um die Informationen zu sehen.{" "}
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/editors-sensebox.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/editors-sensebox.md
new file mode 100644
index 0000000..3bcb875
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/editors-sensebox.md
@@ -0,0 +1,36 @@
+---
+date: 2020-03-11
+title: Editoren für die senseBox
+title_order: 4
+categories: arduino
+description: Editoren für die senseBox
+type: Document
+set: erste-schritte-arduino
+set_order: 4
+---
+
+# Editoren für die senseBox
+
+Du kannst die senseBox MCU mithilfe von drei verschiedenen Editoren programmieren.
+
+## Blockly für senseBox
+
+Mit Blockly für senseBox kannst du deine senseBox MCU über eine grafische Programmieroberfläche programmieren. Auf dem Computer muss keine Software installiert werden und du kannst direkt loslegen. Für Tablets gibt es eine App, sodass auch über ein Tablet drahtlos die senseBox programmiert werden kann.
+
+
+
+## Arduino IDE
+
+Die Arduino IDE kannst du auf der Website von Arduino [kostenloses Herunterladen](https://arduino.cc/downloads). Die Arduino IDE bietet dir den kompletten Zugriff auf alle Funktionen, die die Programmiersprache Arduino bereithält. Über die Arduino IDE kannst du auch zusätzliche Sensoren und Bauteile, die nicht in Blockly für senseBox oder Open Roberta enthalten sind, programmieren. Die Arduino IDE muss auf dem Computer installiert werden. Zusätzlich muss ein Board Support Package für die senseBox MCU heruntergeladen werden. Wie genau das funktioniert, erfährst du [hier](/docs/editors/arduino/installation-bsp.mdx).
+
+
+
+## Open Roberta
+
+openRoberta ist eine weitere Möglichkeit die senseBox zu programmieren. Das openRoberta lab benötigt keine Installation auf deinem Computer und bietet einen ähnlichen Funktionsumfang wie Blockly für senseBox. Eine kurze Einführung in die Verwendung der senseBox in openRoberta findest du [hier](/docs/misc/openRoberta.md).
+
+
+
+> - [Blockly für die senseBox](https://blockly.sensebox.de/)
+> - [Arduino](https://www.arduino.cc/)
+> - [NEPO - openRoberta](https://lab.open-roberta.org/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/first-steps.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/first-steps.md
new file mode 100644
index 0000000..7511fa9
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/first-steps.md
@@ -0,0 +1,48 @@
+---
+date: 2020-03-11
+title: First Steps with the Arduino IDE
+title_order: 4
+categories: arduino
+description: Programming the senseBox in the Arduino IDE
+type: Document
+set: erste-schritte-arduino
+set_order: 5
+
+resources:
+image1: /images/2020-03-11-allgemein-einfuehrung-arduino/arduino-buttons-1.png
+image2: /images/2020-03-11-allgemein-einfuehrung-arduino/arduino-buttons-2.png
+---
+
+# First Steps with the Arduino IDE
+
+Before you can get started, you need to install the Arduino IDE. You can find out how to do this [here](/allgemein/allgemein-arduino-ide-installieren//)
+
+## Basics
+
+When you open the IDE, you will see a large white area where you will write your program.
+In the black area below, status and error messages will be displayed. It is always worth taking a look at these messages when errors occur.
+
+Finally, you should take a look at the small buttons above the white area.
+
+
+
+The checkmark and the arrow are the two most important symbols for you:
+With the checkmark, you can check your program for syntax errors, and with the arrow, you upload your program to the senseBox MCU.
+
+## The Arduino Sketch
+
+An Arduino program (also called a "Sketch") has a very simple structure consisting of two main components. These two required functions contain blocks of instructions that describe the program flow:
+
+
+```cpp
+void setup(){
+ // Instruction
+}
+void loop(){
+ // Instruction
+}
+```
+
+The `setup` function is executed only once at the start of the program. In contrast, the `loop` function repeats all instructions in an endless loop. Both functions are essential for the program to compile and run successfully. "Compiling" refers to the translation of the program into machine code, which can be understood by the Arduino processor; the Arduino IDE handles this for us.
+
+Comments can be added to the program code with a double slash (`//`). It is always important to comment on your program code so that others can understand what is happening at a particular point.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-arduino-ide.mdx b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-arduino-ide.mdx
new file mode 100644
index 0000000..fcb6641
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-arduino-ide.mdx
@@ -0,0 +1,100 @@
+---
+set: erste-schritte-arduino
+resources:
+ - name: Arduino
+ link: https://www.arduino.cc
+ - name: Arduino Old Releases
+ link: https://www.arduino.cc/en/Main/OldSoftwareReleases#previous
+title_order: 2
+date: 2020-03-11
+set_order: 3
+image1: /images/2020-03-11-allgemein-arduino-ide-installieren/arduino-download.png
+image2: /images/2020-03-11-allgemein-arduino-ide-installieren/arduino-donate.png
+type: Document
+title: Arduino IDE Installation
+description: Installation of the Arduino IDE
+categories: arduino
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# Installation of the Arduino IDE
+
+Before you can program the senseBox using the Arduino IDE, you need to install drivers and software on your computer.
+
+Check out the instructions for your operating system and follow the given steps.
+
+
+
+ Download Arduino Software for Windows
+
+ The senseBox is a microcontroller with various components and sensors. It is programmed using the development environment _Arduino IDE_. Download the latest version from the{" "}
+ Arduino Homepage: {""}
+
+
+ Arduino is an open-source project and is funded by donations.
+ Therefore, you will be asked for a donation before the download; if you do not want to donate, you can click on `JUST DOWNLOAD`.
+
+
+ Run the installer and follow the instructions. The installation is completed in a few minutes.
+
+
+
+ Download Arduino Software for Mac(OSX)
+
+ The senseBox is a microcontroller with various components and sensors. It is programmed using the development environment _Arduino IDE_.
+ Download the latest version from the{" "}
+ Arduino Homepage: {" "}
+
+
+ Arduino is an open-source project and is funded by donations.
+ Therefore, you will be asked for a donation before the download; if you do not want to donate, you can click on `JUST DOWNLOAD`.
+
+
+ An Arduino.app file should appear in your Downloads folder.
+ Move this file to your "Applications" folder. By opening the
+ `Arduino.app` file, the IDE can be started.
+
+
+
+ Download Arduino Software for Linux
+
+ The senseBox is a microcontroller with various components and
+ sensors. It is programmed using the development environment _Arduino IDE_.
+ Download the latest version from the{" "}
+ Arduino Homepage: {" "}
+
+
+ Arduino is an open-source project and is funded by donations.
+ Therefore, you will be asked for a donation before the download; if you do not want to donate, you can click on `JUST DOWNLOAD`.
+
+
+ Linux users can use the `AppImage` provided by Arduino to install Arduino. After downloading, the AppImage needs to be given execution permissions,
+
+ cd Downloads chmod +x arduino-ide_2.2.1_Linux_64bit.AppImage ./arduino-ide_2.2.1_Linux_64bit.AppImage
+
+ Alternatively, the AppImage can also be made executable via the Graphic User Interface.
+ Instructions on how to do this can be found {" "}
+ here {" "}.
+
+
+
+
+> - [Arduino](https://www.arduino.cc/)
+> - [Arduino Old Releases](https://www.arduino.cc/en/software/OldSoftwareReleases#previous)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-bsp.mdx b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-bsp.mdx
new file mode 100644
index 0000000..5707ec9
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/arduino/installation-bsp.mdx
@@ -0,0 +1,49 @@
+---
+date: 2020-03-11
+title: Installation of the Board Support Package
+title_order: 4
+categories: arduino
+description: Installation of the Board Support Package for the senseBox MCU
+type: Document
+set: erste-schritte-arduino
+set_order: 4
+---
+
+import { useBoardStore } from '@site/src/lib/stores/store'
+
+# Installation of the Board Support Package
+
+
+
+ To ensure the Arduino IDE supports your senseBox MCU and you can upload programs to it, you need to install two Board Support Packages beforehand.
+ These include the necessary drivers and software to communicate with the senseBox processor.
+ The senseBox Board Support Package also includes our senseBox libraries, providing you with all the basic methods for programming the included sensors.
+
+
Add Board Support Package
+
+ Add the following URL in your Arduino IDE under _File - Preferences_ in the field for _Additional Board Manager URLs_:
+ { useBoardStore((state)=>state.board) === ':edu S2' ?
+
https://espressif.github.io/arduino-esp32/package_esp32_index.json
+
+
+
:
+
https://github.com/sensebox/senseBoxMCU-core/raw/master/package_sensebox_index.json
+
+
+
+ }
+
+
+
+
+
+ Open the _Board Manager_ by clicking on the _Board Manager_ icon on the left side (see image)
+
+
+
+
+
+ Enter "ESP32" in the search bar above to find the packages faster and install the `esp32` board from Espressif Systems.
+ Attention! Make sure to install at least version 2.0.15-alpha3! .
+
+
+
+Mit dem `LED an digitalen Pin`-Block kannst du eine an einem der sechs digitalen Pins angeschlossene LED ansteuern. Im Dropdown-Menü **Pin** wählst du den jeweiligen Pin aus und unter **Status**, ob die LED ein- oder ausgeschaltet werden soll.
+
+
+
+{useBoardStore((state)=>state.board === 'MCU' && (
+
+
+
+ {" "}
+ Mit dem RGB-LEDBlock kannst du eine an einem der sechs digitalen
+ Pins angeschlossene RGB-LED ansteuern. Im Dropdown-Menü Pin wählst du
+ den jeweiligen Pin aus. An die Blockabschnitte rot , grün und
+ blau
+ können Zahlen von 0 bis 255 angeknüpft werden, um die Intesität der verschiedenen
+ Farbanteile festzulegen. Bei einem Wert von 0 ist kein Farbanteil vorhanden,
+ bei einem Wert von 255 ist der maximale Farbanteil vorhanden.{" "}
+
+
+
Der Farbcode für senseBox Grün lautet zum Beispiel:
+
+
+
RGB-LED (onBoard MCU-S2)
+ Auf der senseBoxMCU-S2 ist eine RGB-LED fest verbaut. Diese wird über den Pin on
+ Board angesprochen. Diese kann mit dem Block
+ {" "}
+ RGB-LED initialisieren{" "}
+ auf dem Port
on Board initialisiert werden.
+
+
+
Über den Block Setze RGB-LED kann die Farbe der LED festgelegt werden.
+
+ An den Abschnitt Farbe kannst du dir aus der Kategorie LED den Block für Farbe aussuchen und eine Farbe auswählen.
+
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/logik.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/logik.md
new file mode 100644
index 0000000..493d5b9
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/logik.md
@@ -0,0 +1,87 @@
+---
+sidebar_position: 7
+title: Conditions
+hide_title: false
+---
+# Logic
+
+## Conditions
+Conditions or branching in programs are among the most important control structures in programming. They enable your program to respong to different conditions.
+
+### If, do relationship
+The `if, do` block has two free block sections `if` and `do`.
+
+
+
+The actions linked to the block section `do` are only executed if the conditions attached to the block section `if` are met.
+
+For example, the built-in LED on the senseBox MCU should be turned on **if** the built-in button is pressed.
+
+
+
+
+Commands added after the `if, do` block will always be executed, even if the condition was not met before.
+
+### Else
+By clicking on the small gear icon at the top left of the `if, do` block, you can extend the block with an `else` section. Commands placed in this section will only be executed if the condition was **not** met before. If the condition was met, they will be skipped.
+
+For example, the built-in LED 1 should only light up **if** the built-in button is pressed and **else** the built-in LED 2 should light up.
+
+
+
+
+### Branching
+By clicking on the small gear in the top-left corner of the `if, do` block, you can expand the block with an `else if` section. First, the top `if` condition is checked, and if it is not met, the following `else if` condition is checked. This way, only the commands whose associated condition is met will be executed.
+In contrast to the `else` condition, this allows you to set more than two conditions.
+
+For example, depending on the temperature, a LED should be turned on. If the temperature is below 0°C, LED 1 should turn on; at exactly 0°C, LED 2 should turn on; and at temperatures above 0°C, LED 3 should turn on.
+
+
+
+
+
+## Operators
+In Blockly, you have the option to use various logical operators to compare values, such as sensor readings. These operators also allow you to create more complex logical expressions through logical connections.
+
+### Logical Comparisons
+With the `logical comparisons` block, you can compare values.
+
+
+
+The block offers a selection of six operators:
+
+______________________________________________________________________________
+| Operator | Mathematics |
+| :-------------------: | :----------: |
+| equal | = |
+| not equal | ≠ |
+| less than | < |
+| greater than | < |
+| less than or equal to | ≤ |
+| greater than or equal to | ≥ |
+______________________________________________________________________________
+### Logical operations
+With the `logical operations` block, you can formulate more complex logical expressions.
+For example, a lamp that only lights up when two conditions are met.
+
+
+
+The block offers a choice between the operators `and` and `or`.
+
+`And` connects two conditions such that both must be met for the entire expression to be considered true.
+
+`Or` connects two conditions such that only one of the two must be true for the entire expression to be considered true.
+
+### Not Block
+With the `not` block, you can negate expressions. A condition is true if the input value is false and false if it is true.
+
+
+
+### Test Block
+With the `test` block, you can check a condition and define actions that will be executed based on the result.
+
+
+
+
+- [Blockly.senseBox.de](https://blockly.sensebox.de/)
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/lora.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/lora.md
new file mode 100644
index 0000000..247c8e4
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/lora.md
@@ -0,0 +1,163 @@
+---
+sidebar_position: 8
+title: LoRa
+hide_title: false
+---
+
+
+# LoRa
+
+
+## Activation
+
+
+
+Use these blocks to initialize the Lora-Bee and connect to [The Things Network](https://www.thethingsnetwork.org/). Depending on the activation method you use (OTAA or ABP), you need to enter the corresponding IDs in the block. Additionally, the transmission interval can be set in minutes.
+
+## LoRa Message
+
+
+
+Use these blocks to send a message over the LoRa network. No specific format is used for the message (often called payload). The data is encoded as bytes, allowing for quick and efficient transmission over the LoRa network. The data must then be converted back into a readable format using a special decoder in the TTN Console.
+
+## Creating a Decoder
+
+TTN decoding is all about understanding bytes. After that, it is possible to create quick solutions to access the data measured by the senseBox.
+
+### Theory
+LoRaWAN is not suitable for sending large amounts of data. Therefore, the information is divided into small bytes and sent. One byte contains 8 bits, which means you can distinguish between 256 different values. Two bytes contain 16 bits, making it possible to distinguish between 65,536 values.
+
+
+The following table provides an overview of the bandwidth:
+
+______________________________________________________________________________
+| Bytes | Bit | min (signed) | max (signed) | min (unsigned) | max (unsigned) |
+| :-------: | :-----:|:----------------:|:---------------:|:----------------:|:----------------:|
+| 1 | 8 | -128 | 127 | 0 | 255 |
+| 2 | 16 | −32.768 | 32.767 | 0 | 65.535 |
+| 3 | 24 | −2.147.483.648 | 2.147.483.647 | 0 | 4.294.967.295 |
+______________________________________________________________________________
+
+In the table, there are two different types: "signed" and "unsigned". Signed values cover both positive and negative ranges.
+
+Example: You want to measure humidity. The values range between 0% and 100%. However, these are not decimal values, but only integer values. One could use a byte that corresponds to the value for humidity. However, if you want to send a decimal number with two decimal places, 1 byte is no longer sufficient. 2 bytes must be used.
+
+Imagine we measure 85.42%. A simple approach would be to take the measurement and multiply it by 100. Now we have a value of 85.42 * 100 = 8542. We can encode 8542 in two bytes, send them to TTN, and decode these two bytes to get 8542. This number can then be divided by 100 to get the value of 85.42%. That's basically how it works.
+
+### Example
+
+__Blockly__:
+On the Arduino side, the [lora-serialization](https://github.com/thesolarnomad/lora-serialization) library is used. The documentation shows a [function](https://github.com/thesolarnomad/lora-serialization#unsigned-16bit-integer-2-bytes) to send a value with 16 bits. This function can be used to send the values for humidity. The value for humidity ranges between 0 and 100%, so the following blocks can be used to send it:
+
+
+
+The measured value is multiplied by 100 to retain the two decimal places.
+
+Since the value for the temperature can also fall into the negative range, the value must first be converted to a positive value and then multiplied by a factor to retain the decimal places.
+
+
+
+In this example, a temperature sensor is used that has measured values from -18 degrees Celsius and outputs the temperature with an accuracy of 0.0013 degrees Celsius.
+
+__TTN__:
+In the TTN Console, two different values from the senseBox now arrive. These values must now be decoded from bytes back to the original values using a decoder. You can define the decoder under Payloads:
+
+
+
+
+```cpp
+/**
+ * Convert the array of bytes to an unsigned integer, LSB.
+ *
+ * BEWARE: This is only safe up to 0x1FFFFFFFFFFFFF, so: 6 bytes.
+ */
+function uint(bytes) {
+
+ return bytes.reduceRight(function(acc, b) {
+ // We expect an unsigned value, so to support more than 3 bytes
+ // don't use any bitwise operators, which would always yield a
+ // signed 32 bits integer instead.
+ return acc * 0x100 + b;
+ }, 0);
+}
+```
+
+Here you can now define the decoder:
+
+```cpp
+function Decoder(bytes) {
+
+ var i = 0;
+ var decoded = {};
+ // The index in the bytes array that needs to be handled next;
+ // use along with "i++" which returns the current value, and
+ // then increments it for the next usage
+
+
+ // Relative humidity with 0.01 precision, 0.00 through 100.00, LSB
+ var humidity = uint(bytes.slice(i, i+=2)) / 100;
+ // Temperature with 0.0013 precision, -18.000 through 67.000, LSB
+ var temperature = uint(bytes.slice(i, i+=2)) / 771 - 18;
+ // Unary plus operator to cast string result of toFixed to number
+ temperature = +temperature.toFixed(3);
+
+ decoded['TEMPERATURE_SENSOR_ID'] = temperature
+ decoded['HUMIDITY_SENSOR_ID'] = humidity
+
+ return decoded;
+}
+```
+
+The function takes the first two bytes and converts them to the humidity measurement value. The next two bytes are converted to a temperature measurement value. If you use openSenseMap as an endpoint (`https://ttn.opensensemap.org/v1.1`) in the TTN HTTP integration, the measurement values will be linked with your sensor IDs and displayed on openSenseMap. Learn more about the openSenseMap TTN integration [here](https://sensebox.github.io/books-v2/osem/ttn_integration.html).
+
+### Important Points
+Some important points to note:
+
+→ The decoding fails / returns incorrect values if you do not send everything that needs to be decoded. For example, if the decoder expects both humidity and temperature values, but the senseBox only sends a humidity value, you will not get correct values.
+
+→ When sending values larger than 3 bytes, it is a bit different. Values for illuminance can be larger than a 2-byte integer at maximum. Therefore, 3 bytes are needed. You can send it as follows:
+
+
+
+
+and decode as follows:
+```cpp
+var lux = bytes[i] | bytes[i+1]<<8 | bytes[i+2]<<16;
+i = i + 3 // increment counter afterwards
+```
+
+
+## Cayenne LPP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The [Cayenne Low Power Payload Format](https://community.mydevices.com/t/cayenne-lpp-2-0/7510) offers an easy way to send data over the LoRaWAN network. The data can be directly decoded back into a readable format using an existing decoder. Different blocks are available for different measurements to ensure that all decimal places are transmitted correctly.
+
+
+
+
+
+
+
+
+
+
+
+In the TTN Console, you can select the decoder under __Payload__. Choose Cayenne LPP, and the values will be automatically decoded.
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/mathematik.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/mathematik.md
new file mode 100644
index 0000000..9bb96e2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/mathematik.md
@@ -0,0 +1,51 @@
+---
+sidebar_position: 9
+title: Mathematics
+hide_title: false
+---
+# Mathematics
+
+## General
+In Blockly, you have the ability to perform various mathematical operations. You can calculate with numbers, generate random numbers, and map values to a different range.
+
+## Calculating Numbers
+In Blockly, you can perform various mathematical calculations. The following blocks are available for this purpose:
+________________________________________
+| Block | Function |
+| :-----: | :--------: |
+|  | A number. |
+|  | Simple mathematical operationen. |
+|  | A number. |
+|  | Trigonometric functions. |
+|  | Mathematical constants. |
+|  | Check numbers. |
+|  | Add a specific value to a number. |
+|  | Round a number. |
+|  | Get the remainder of a division. |
+| | Limit the range of a number. |
+________________________________________
+
+## Random Numbers
+In Blockly, you can generate random numbers. There are two different blocks available for this purpose.
+
+
+
+With the `integer random value` block, you can generate an integer random value within a defined range.
+
+
+
+With the `random number (0.0-1.0)` block, you can generate a random decimal number between 0.0 and 1.0.
+
+## Mapping Values
+With the `Map Value` block, you can map numbers, such as measurement values, to a new range. This is useful when you want to convert your measurement values directly into a percentage between 0 and 100, for example.
+
+
+
+In the block sections, you need to set the boundaries of the original range and the boundaries of the new range using the `number` blocks.
+
+In the following example, the entire range of the light sensor (from 3 to 200,000 lux) is mapped to a new range from 0 to 100.
+
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/schleifen.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/schleifen.md
new file mode 100644
index 0000000..e52fe8e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/schleifen.md
@@ -0,0 +1,27 @@
+---
+sidebar_position: 5
+title: Loops
+hide_title: false
+---
+
+# Loops
+
+## General
+Loops are one of the most important control structures in programming. They help you whenever you want to repeat one or more instructions a certain number of times. In Blockly, there are different types of loops, but their functionalities are always very similar. You can find all loops in the corresponding category in the toolbox.
+
+## Repeat X Times Loop
+The simplest loop is the `Repeat X Times` loop. In it, all commands within the loop are repeated X times.
+
+
+
+## Repeat While Loop
+The second loop is the `Repeat While/Until` loop. The commands inserted in the loop are only executed if a condition attached to the free block section is met/true. In the block's dropdown menu, you can select whether the commands should be executed **until** a condition is met, or **while** a condition is met.
+
+
+
+## Loop with Counter Variable
+The third loop is implemented using a counter variable, which can also be used within the program. First, a variable is initialized with a start value and a maximum value is set for it. Then, the counter variable is increased by the specified number after each iteration. This way, an instruction can be set for each state of the counter variable.
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/sensoren.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/sensoren.md
new file mode 100644
index 0000000..55337d2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/sensoren.md
@@ -0,0 +1,83 @@
+---
+sidebar_position: 11
+title: Sensors
+hide_title: false
+---
+
+# Sensors
+
+## General
+The senseBox contains various environmental sensors. In this chapter, we will initially focus on the sensors that are already built into the senseBox MCU or can be connected via I2C cables.
+
+> To read and display measurements, it's best to use the display. In this chapter, we will use a minimal example to display measurements on the screen.
+
+## Accelerometer (BMX055)
+The accelerometer is already built into the senseBox MCU. It can provide you with the acceleration along the X, Y, and Z axes, as well as the total acceleration. You can select the measurement range between 2g, 4g, 8g, and 16g.
+
+
+
+> The average acceleration due to gravity is denoted by *g* and is approximately 9.81 m/s2 .
+
+## Button
+A button is already built into the senseBox MCU. Additional buttons can be connected via the three digital Ports. In the dropdown menu, you can select different modes for the button:
+
+- __is pressed__: With this mode, you can check if the button is currently pressed. You will receive either the value TRUE or FALSE.
+- __was pressed__: With this mode, you can check if the button was pressed. You will receive TRUE only after the button has been pressed and released.
+- __as switch__: When using this mode, you can use the button like a light switch. The status will be saved until the button is pressed again.
+
+
+
+## Temperature and Humidity Sensor (HDC1080)
+The temperature and humidity sensor is connected to one of the five I2C/Wire ports. It can provide you with the temperature in °C and the relative humidity in %.
+
+
+
+## Temperature and Pressure Sensor (BMP280)
+The temperature and pressure sensor is connected to one of the five I2C/Wire ports. It can provide you with the temperature in °C, the air pressure in Pa, and the altitude above sea level in meters.
+
+
+
+## Light and UV Sensor (TSL45315 & VEML6070)
+The light and UV sensor is connected to one of the five I2C/Wire ports. It can provide you with the brightness in Lux and the UV intensity in µW/cm².
+
+
+
+## Environmental Sensor (BME680)
+The environmental sensor is connected to one of the five I2C/Wire ports. It can provide you with the temperature in °C, the relative humidity in %, the air pressure in Pa, and the indoor air quality (IAQ) on a scale from 0-500.
+
+__________________________________________________________________________
+| __Value__ |0-50|51-100|101-150|151-200|201-250|251-350|> 359|
+|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| __Air quality__ |Excellent|Good|Slightly polluted|Moderately polluted|Heavily polluted|Significantly polluted|Extremely polluted|
+___________________________________________________________________________
+
+
+
+In addition to the above parameters, the sensor can also provide you with the calibration value (a status message) and partial values CO2 -equivalent and breath VOC of indoor air quality.
+
+## Fine Particular Sensor (SDS011)
+The fine particular sensor is connected to one of the two UART/Serial ports and the respective port is selected in the block. It can provide you with the fine dust concentration PM2.5 and PM10 in µg/cm3 .
+
+
+
+## Soil Temperature and Moisture Sensor (SMT50)
+The soil temperature and moisture sensor is connected to one of the three digital ports and the respective port is selected in the block. It can provide you with the soil temperature in °C and the volumetric water content of the soil in %.
+
+
+
+## GPS Module (CAM-M8Q)
+The GPS module is connected to one of the five I2C/Wire ports. It can provide you with the latitude, longitude, altitude above sea level in meters, current speed, a timestamp, the time, and the date.
+
+
+
+## Ultrasonic Distance Sensor
+The ultrasonic distance sensor is connected to one of the three digital ports and the respective port is selected in the block. It can provide you with the distance in cm.
+
+
+
+## Microphone
+The microphone is connected to one of the three digital ports and the respective port is selected in the block. It can provide you with the volume level between 0 and 5V.
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/text.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/text.md
new file mode 100644
index 0000000..e97d93e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/text.md
@@ -0,0 +1,43 @@
+---
+sidebar_position: 12
+title: Text
+hide_title: false
+---
+
+# Text
+
+## Text Field
+With the text field block `" "`, you can create text. Write the desired text inside the quotation marks.
+
+
+
+## Create Text with
+With the `Create Text with` block, you can both convert measurements into text and create combined texts (from multiple text fields, numbers, measurements, or variables).
+
+
+
+The regular Create-Text-From block can be expanded by clicking the gear icon. You can add more elements by clicking and dragging to create text from multiple components. After editing, you can close the window by clicking the gear icon again.
+
+
+
+## Append Text
+
+With the `Append Text` block, you can append text to an existing variable.
+
+
+
+## Length
+
+With the `Length` block, you can get the length of a text block.
+
+
+
+> For example, the text block "senseBox" would be 8 units long.
+
+## is empty
+
+With the `is empty` block, you can check if a given text block is empty (has a length of 0). The result is either true (if the given text block is indeed empty) or false (if there are characters in the text block).
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/variablen.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/variablen.md
new file mode 100644
index 0000000..e661f7f
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/variablen.md
@@ -0,0 +1,46 @@
+---
+sidebar_position: 6
+title: Variables
+hide_title: false
+---
+
+# Variables
+
+## General
+Variables are placeholders for numbers, letters, and strings. This means that a variable **does not** need to remain the same throughout the entire program. This is especially useful when you want to use specific information in different parts of the program.
+
+Variables can be defined using the `Set Element` block.
+
+
+
+In the block's dropdown menu, you can rename the variable or create a new one.
+
+## Example
+After a soccer game, the number of goals scored should be stored in a variable. This variable will then be displayed on the screen.
+
+
+
+To expand on the simple example, we now want to be able to add points live. For each goal scored, the built-in button on the MCU must be pressed once.
+
+
+
+## Data Types
+Depending on what is stored in a variable, you should set the correct data type. You set the data type using the `as Character` block. This block is attached to a `Set Element` block. Then, the value to be stored is inserted in the free block section, and the data type is selected from the dropdown menu.
+
+
+
+In Blockly, the following data types are available:
+
+**Character:** For single text characters
+
+**Text:** For whole words or sentences
+
+**Boolean:** For values that are either true or false (or 1 or 0)
+
+**Number:** For whole numbers from -32,768 to 32,767
+
+**Big Number:** For large numbers from -2,147,483,648 to 2,147,483,647
+
+**Decimal:** For decimal numbers
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/_category_.json b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/_category_.json
new file mode 100644
index 0000000..ec4b011
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Web",
+ "position": 15,
+ "link": {
+ "type": "generated-index",
+ "description": "Information about the visual programming environment Blockly for senseBox."
+ }
+}
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/lora.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/lora.md
new file mode 100644
index 0000000..d1413e0
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/lora.md
@@ -0,0 +1,161 @@
+---
+sidebar_position: 8
+title: LoRa
+hide_title: false
+---
+
+
+# LoRa
+
+
+## Activation
+
+
+
+Use these blocks to initialize the Lora-Bee and connect to [The Things Network](https://www.thethingsnetwork.org/). Depending on the activation method you use (OTAA or ABP), you need to enter the corresponding IDs in the block. Additionally, the transmission interval can be set in minutes.
+
+## LoRa Message
+
+
+
+Use these blocks to send a message over the LoRa network. No specific format is used for the message (often called payload). The data is encoded as bytes, allowing for quick and efficient transmission over the LoRa network. The data must then be converted back into a readable format using a special decoder in the TTN Console.
+
+## Creating a Decoder
+
+TTN decoding is all about understanding bytes. After that, it is possible to create quick solutions to access the data measured by the senseBox.
+
+### Theory
+LoRaWAN is not suitable for sending large amounts of data. Therefore, the information is divided into small bytes and sent. One byte contains 8 bits, which means you can distinguish between 256 different values. Two bytes contain 16 bits, making it possible to distinguish between 65,536 values.
+
+
+The following table provides an overview of the bandwidth:
+
+______________________________________________________________________________
+| Bytes | Bit | min (signed) | max (signed) | min (unsigned) | max (unsigned) |
+| :-------: | :-----:|:----------------:|:---------------:|:----------------:|:----------------:|
+| 1 | 8 | -128 | 127 | 0 | 255 |
+| 2 | 16 | −32.768 | 32.767 | 0 | 65.535 |
+| 3 | 24 | −2.147.483.648 | 2.147.483.647 | 0 | 4.294.967.295 |
+______________________________________________________________________________
+
+In the table, there are two different types: "signed" and "unsigned". Signed values cover both positive and negative ranges.
+
+Example: You want to measure humidity. The values range between 0% and 100%. However, these are not decimal values, but only integer values. One could use a byte that corresponds to the value for humidity. However, if you want to send a decimal number with two decimal places, 1 byte is no longer sufficient. 2 bytes must be used.
+
+Imagine we measure 85.42%. A simple approach would be to take the measurement and multiply it by 100. Now we have a value of 85.42 * 100 = 8542. We can encode 8542 in two bytes, send them to TTN, and decode these two bytes to get 8542. This number can then be divided by 100 to get the value of 85.42%. That's basically how it works.
+
+### Example
+
+__Blockly__:
+On the Arduino side, the [lora-serialization](https://github.com/thesolarnomad/lora-serialization) library is used. The documentation shows a [function](https://github.com/thesolarnomad/lora-serialization#unsigned-16bit-integer-2-bytes) to send a value with 16 bits. This function can be used to send the values for humidity. The value for humidity ranges between 0 and 100%, so the following blocks can be used to send it:
+
+
+
+The measured value is multiplied by 100 to retain the two decimal places.
+
+Since the value for the temperature can also fall into the negative range, the value must first be converted to a positive value and then multiplied by a factor to retain the decimal places.
+
+
+
+In this example, a temperature sensor is used that has measured values from -18 degrees Celsius and outputs the temperature with an accuracy of 0.0013 degrees Celsius.
+
+__TTN__:
+In the TTN Console, two different values from the senseBox now arrive. These values must now be decoded from bytes back to the original values using a decoder. You can define the decoder under Payloads:
+
+
+
+
+```cpp
+/**
+ * Convert the array of bytes to an unsigned integer, LSB.
+ *
+ * BEWARE: This is only safe up to 0x1FFFFFFFFFFFFF, so: 6 bytes.
+ */
+function uint(bytes) {
+
+ return bytes.reduceRight(function(acc, b) {
+ // We expect an unsigned value, so to support more than 3 bytes
+ // don't use any bitwise operators, which would always yield a
+ // signed 32 bits integer instead.
+ return acc * 0x100 + b;
+ }, 0);
+}
+```
+
+Here you can now define the decoder:
+
+```cpp
+function Decoder(bytes) {
+
+ var i = 0;
+ var decoded = {};
+ // The index in the bytes array that needs to be handled next;
+ // use along with "i++" which returns the current value, and
+ // then increments it for the next usage
+
+
+ // Relative humidity with 0.01 precision, 0.00 through 100.00, LSB
+ var humidity = uint(bytes.slice(i, i+=2)) / 100;
+ // Temperature with 0.0013 precision, -18.000 through 67.000, LSB
+ var temperature = uint(bytes.slice(i, i+=2)) / 771 - 18;
+ // Unary plus operator to cast string result of toFixed to number
+ temperature = +temperature.toFixed(3);
+
+ decoded['TEMPERATURE_SENSOR_ID'] = temperature
+ decoded['HUMIDITY_SENSOR_ID'] = humidity
+
+ return decoded;
+}
+```
+
+The function takes the first two bytes and converts them to the humidity measurement value. The next two bytes are converted to a temperature measurement value. If you use openSenseMap as an endpoint (`https://ttn.opensensemap.org/v1.1`) in the TTN HTTP integration, the measurement values will be linked with your sensor IDs and displayed on openSenseMap. Learn more about the openSenseMap TTN integration [here](https://sensebox.github.io/books-v2/osem/ttn_integration.html).
+
+### Important Points
+Some important points to note:
+
+→ The decoding fails / returns incorrect values if you do not send everything that needs to be decoded. For example, if the decoder expects both humidity and temperature values, but the senseBox only sends a humidity value, you will not get correct values.
+
+→ When sending values larger than 3 bytes, it is a bit different. Values for illuminance can be larger than a 2-byte integer at maximum. Therefore, 3 bytes are needed. You can send it as follows:
+
+
+
+
+and decode as follows:
+```cpp
+var lux = bytes[i] | bytes[i+1]<<8 | bytes[i+2]<<16;
+i = i + 3 // increment counter afterwards
+```
+
+
+## Cayenne LPP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The [Cayenne Low Power Payload Format](https://community.mydevices.com/t/cayenne-lpp-2-0/7510) offers an easy way to send data over the LoRaWAN network. The data can be directly decoded back into a readable format using an existing decoder. Different blocks are available for different measurements to ensure that all decimal places are transmitted correctly.
+
+
+
+
+
+
+
+
+
+
+
+In the TTN Console, you can select the decoder under __Payload__. Choose Cayenne LPP, and the values will be automatically decoded.
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/opensensemap.mdx b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/opensensemap.mdx
new file mode 100644
index 0000000..2ef79b1
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/opensensemap.mdx
@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+title: openSenseMap
+hide_title: false
+---
+
+# Web - openSenseMap
+
+## openSenseMap
+
+The [openSenseMap](https://www.opensensemap.org) is an open data portal for environmental data. To send measurements to it, you first need to create a new senseBox. Then, you will be shown a Box ID and Sensor IDs for each specified sensor. More information can be found in the openSenseMap section.
+
+To send measurements to openSenseMap, you must first connect your box to it. Use the `Connect to openSenseMap` block.
+
+
+
+In the first dropdown menu of the block, you can select whether your senseBox should send data to the traditional openSenseMap or to workshop.openSenseMap.
+
+> **opensensemap.org:** senseBoxes created for long-term measurements.
+>
+> **workshop.opensensemap.org:** senseBoxes created for short-term experiments or testing.
+
+In the second dropdown menu of the block, you select whether your senseBox is a stationary or a mobile station, and in the text field "senseBox ID," you enter the senseBox ID displayed after registration.
+In the free block section `Sensors`, the connected sensors must then be linked using the `Send measurement to openSenseMap` block.
+
+
+
+In this block, the "Sensor ID" displayed after registration is added and linked to the corresponding sensor in the free block section.
+:::warning Caution
+Sensor IDs are specific to each sensor. It is important to ensure that the correct ID is assigned to the correct sensor/measurement.
+:::
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/telegram.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/telegram.md
new file mode 100644
index 0000000..353a3b2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/telegram.md
@@ -0,0 +1,31 @@
+---
+sidebar_position: 4
+title: Telegram
+hide_title: false
+---
+# Telegram
+
+## Telegram
+Mit [Telegram](https://www.telegram.org) kannst du einen Chatbot bauen, der dir hilft, deine senseBox von überall per Textnachricht auszulesen.
+
+> Telegram ist ein kostenloser Messenger, der die Möglichkeit bietet, auf einfachste Art Chatbots anzulegen. Um diesen nutzen zu können, benötigst du einen Telegram-Account. Bei der Erstellung deines Chatbots wird dir dann ein Token angezeigt, welches du in Blockly verwenden kannst, um dich zu authentifizieren. Mehr zur Erstellung eines Chatbots findest du im Projekt [Telegram Chatbot für die senseBox mit Blockly](https://sensebox.de/projects/de/2019-12-15-telegram-blockly).
+
+Mit dem `Telegram Bot initialisieren`-Block wird im Setup() die senseBox darauf vorbereitet, Daten auf Anfrage an den Chatbot zu senden. Im Textfeld "Token" musst du den beim Erstellen deines Chatbots angezeigten Token eintragen.
+
+
+
+Anschließend kann mit dem Block `Telegram mache` in der Endlosschleife() programmiert werden, was genau der Chatbot ausführen soll.
+
+
+
+Die Blöcke `Bei Nachricht` und `Sende Nachricht` können im freien Blockabschnitt des `Telegam mache`-Blocks platziert werden, um festzulegen, was die senseBox beim Empfang einer bestimmten Nachricht ausführen soll.
+
+ 
+
+
+
+Mit dem `Bei Nachricht`-Block kann eine Aktion festgelegt werden, die die senseBox ausführen soll, wenn eine bestimmte Nachricht über Telegram eintrifft. Zum Beispiel eine LED an- oder ausschalten.
+
+Mit dem `Sende Nachricht`-Block kann eine Nachricht über Telegram an die/den Nutzer:in des Bots gesendet werden.
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/webserver.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/webserver.md
new file mode 100644
index 0000000..7143901
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/webserver.md
@@ -0,0 +1,33 @@
+---
+sidebar_position: 5
+title: Webserver
+hide_title: false
+---
+
+# Webserver
+
+## Webserver
+
+Mit diesen Blöcken kann die senseBox als Webserver eingesetzt werden:
+
+______________________________________________________________________________
+| Block | Funktion |
+| ---- | ----- |
+|| Verwende diesen Block im Setup() um den HTTP-Server zu initialisieren. Über das Feld Port kannst du einstellen, über welchen Port der Server im Browser erreichbar sein soll. Standardmäßig ist hier Port 80 eingetragen.|
+||Dieser Block wird in der Endlosschleife verbunden. In den freien Blockabschnitt fügst du die Blöcke ein, die ausgeführt werden sollen, wenn ein Client (z.B. ein/e Nutzer:in über den Browser) auf den Server zugreift.|
+| | Dieser Block gibt dir die IP-Adresse deiner senseBox im Netzwerk zurück.|
+| |Dieser Block gibt dir die Methode zurück.|
+| | Dieser Block gibt dir die URI zurück.|
+| |Dieser Block gibt dir die HTTP Version zurück.|
+| |Mit diesem Block kannst du eine HTTP Antwort an den Client senden, wenn dieser auf den Server zugreift. Die Antwort ist der HTML Code, der aus verschiedenen Blöcken zusammengebaut werden kann.|
+| |Mit diesem Block kannst du eine HTTP Antwort an den Client senden, wenn dieser auf den Server zugreift. Die Antwort ist der HTML Code, der aus verschiedenen Blöcken zusammengebaut werden kann.|
+| |Dieser Block kann als mögliche HTTP Antwort gesendet werden, wenn eine fehlerhafte Seite aufgerufen wird.|
+| |Dies ist der Grundbaustein für den HTML Code. An den Body hängst du deinen HTML Code, der den Aufbau der Website beschreibt.|
+| |Mit den Tags kannst du deine HTML-Seite direkt über Blockly aufbauen.|
+| |Diesen Block kannst du an den Grundbaustein für den HTML Code anhängen und eine .html Datei von der SD-Karte laden.|
+______________________________________________________________________________
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/wifi.mdx b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/wifi.mdx
new file mode 100644
index 0000000..2b2333a
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/web/wifi.mdx
@@ -0,0 +1,18 @@
+---
+title: WiFi
+---
+
+## General
+
+In Blockly, you have various options for implementing projects that work with the internet. For all of them, you must first connect your senseBox to the internet.
+
+## WiFi
+
+With the `Connect to WiFi` block, you can connect your senseBox to a WiFi network in the Setup(). Enter the network name under SSID and the WiFi password under Password.
+
+
+
+With the `Initialize WiFi Access Point` block, your senseBox can create a WiFi network that you can join with other devices. In the SSID text field, you can set the name of your network.
+
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/zeit.md b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/zeit.md
new file mode 100644
index 0000000..d617dcb
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/editors/blockly/blocks/zeit.md
@@ -0,0 +1,38 @@
+---
+sidebar_position: 13
+title: Time
+hide_title: false
+---
+
+# Time
+
+## Interrupt Program Code
+
+
+
+
+
+
+
+## Elapsed Time
+With the `Elapsed Time` blocks, you can display the time your program has been running. The runtime is given in milliseconds or microseconds.
+
+
+
+
+
+
+## Wait Forever
+With the `Wait Forever` block, you can stop your program.
+
+
+
+
+## Interval
+With the `Interval` block, you can set how often your measurements are transmitted. By default (without the Measurement Interval block), the measurements are transmitted every second.
+
+
+
+
+- [Blockly.senseBox.de](https://blockly.sensebox.de/)
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/display.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/display.mdx
new file mode 100644
index 0000000..afdd845
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/display.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_position: 1
+title: OLED Display
+hide_title: false
+description: senseBox OLED Display
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import display from '@site/static/img/hardware-bilder/oled/display.png'
+import TutorialPorts_en from '@site/src/components/TutorialPorts/TutorialPorts_en'
+
+# OLED Display
+
+With the senseBox OLED display, you can display measurements, status messages, and much more on 128x64 pixels.
+
+
+#include
+#include // http://librarymanager/All#Adafruit_GFX_Library
+#include // http://librarymanager/All#Adafruit_SSD1306
+
+
+#define SCREEN_WIDTH 128
+#define SCREEN_HEIGHT 64
+#define OLED_RESET -1
+
+Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
+
+void setup() {
+ display.begin(SSD1306_SWITCHCAPVCC, 0x3D);
+ display.display();
+ delay(100);
+ display.clearDisplay();
+}
+
+
+void loop() {
+ display.setCursor(0,0);
+ display.setTextSize(1);
+ display.setTextColor(WHITE,BLACK);
+ display.println("Hallo Welt!");
+ display.display();
+}
+```
+
+## Programming (Blockly)
+
+To display information on the screen, it must first be initialized in the `Arduino run first`.
+Then, in the `Arduino loop forever`, the `Print on Display` loop and the `Clear Display` block can be placed.
+In the free section of the `Print on Display` block, it can then be specified what exactly should be displayed.
+The `Clear Display` block must be added so that different information is not written on top of each other.
+
+
+
+### Display Text/Number
+
+To display text or a number, drag the `Display Text/Number` block into the free section of the `Print on Display` block.
+
+
+
+The `Write Text/Number` block has five settings:
+
+- **Font color:** Here you can choose whether you want to write with white text on a black background or with black text on a white background.
+- **Font size:** Here you can set the size of your text or number. In font size 1, a character is 8 pixels high, in font size 2, it is already 16 pixels.
+- **x-coordinate:** Here you set the x-coordinate (see figure above) where you want to start writing.
+- **y-coordinate:** Here you set the y-coordinate (see figure above) where you want to start writing.
+- **Value:** The respective text, number, or measured value can be attached to this free block section.
+
+
+
+## Projects
+
+- #### [IoT Messstation](https://sensebox.de/projects/de/2024-01-10-iotmesstation_s2)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/expander.md b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/expander.md
new file mode 100644
index 0000000..34f4825
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/expander.md
@@ -0,0 +1,16 @@
+---
+sidebar_position: 2
+title: Expander
+hide_title: false
+description: senseBox Expander
+---
+# Expander
+
+The sensor hub is an extension to connect more sensors to the senseBox. Four additional ports are available for connecting JST cables.
+
+
+
+## Technical Information
+
+* "Plug-in-and-Go" senseBox compatible through breakout board with JST connector
+* 4x JST connector
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/gps.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/gps.mdx
new file mode 100644
index 0000000..0a2d72c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/gps.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_position: 4
+title: GPS
+hide_title: false
+description: GPS u-blox CAM-M8Q Multi GNSS Modul
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import gps from '@site/static/img/hardware-bilder/gps/gps.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# GPS
+
+The GPS module receives the position (longitude/latitude/altitude) of the senseBox.
+This can be used for mobile applications, e.g., mobile data transmission to the openSenseMap.
+This sensor is compatible with common GNSS systems (GPS, QZSS, GLONASS, BeiDou, Galileo) and is based on the u-blox CAM-M8Q Multi GNSS module.
+
+
+
+#include // http://librarymanager/All#SparkFun_u-blox_GNSS_Arduino_Library
+#include
+
+SFE_UBLOX_GNSS myGNSS;
+float latitude;
+float longitude;
+void setup() {
+ Wire.begin();
+
+ if (myGNSS.begin() == false) //Connect to the Ublox module using Wire port
+ {
+ Serial.println(F("Ublox GPS not detected at default I2C address. Please check wiring. Freezing."));
+ while (1);
+ }
+
+ myGNSS.setI2COutput(COM_TYPE_UBX); //Set the I2C port to output UBX only (turn off NMEA noise)
+ myGNSS.saveConfiguration(); //Save the current settings to flash and BBR
+}
+
+void loop() {
+ latitude = myGNSS.getLatitude();
+ longitude = myGNSS.getLongitude();
+
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the GPS module:
+
+- Longitude
+- Latitude
+- Altitude
+- Timestamp (RFC3339)
+- Speed
+- Date
+- Time
+
+> - [Shop](https://sensebox.kaufen/product/gps)
+> - [CAM M8Q](https://sensebox.kaufen/assets/datenblatt/senseBox-CAM-M8Q_v20.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/led-matrix.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/led-matrix.mdx
new file mode 100644
index 0000000..432ea14
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/led-matrix.mdx
@@ -0,0 +1,37 @@
+---
+title: LED-Matrix
+description: Visualize data or create animations with the versatile LED matrix.
+categories: accessories
+---
+
+import ledMatrix from '@site/static/img/hardware-bilder/led-matrix/led-matrix.png'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import TutorialPorts_en from '@site/src/components/TutorialPorts/TutorialPorts_en'
+
+# LED-Matrix
+
+
+#include // http://librarymanager/All#Adafruit_HDC1000_Library
+
+```
+
+Now we define the address of the multiplexer and a list of channels to which the sensors are connected.
+
+```cpp
+byte multiplexAddress = 0x77;
+byte channels[] = {0,1,2};
+```
+
+We create an object for the sensor and start its instance behind the serial connection in the setup function.
+
+```cpp
+Adafruit_HDC1000 hdc = Adafruit_HDC1000();
+
+void setup() {
+ Serial.begin(115200);
+ hdc.begin();
+}
+```
+
+In the infinite loop, the channels are continuously switched using a for loop. For each channel, the multiplexer is addressed via its address.
+Then we simply pass the number of the channel to which all subsequent commands are sent.
+This continues until a new channel is communicated.
+
+```cpp
+for (int i = 0; i < (sizeof(channels)/sizeof(channels[0])); i++){
+ Wire.beginTransmission(multiplexAddress);
+ Wire.write(1 << channels[i]);
+ Wire.endTransmission();
+
+ Serial.print(channels[i]);
+ Serial.print(F(". channel temperature: "));
+ Serial.println(hdc.readTemperature());
+}
+```
+
+Now the sensors can be read individually. Minimal deviations can be detected among the identical sensors:
+
+```cpp
+0. channel temperature: 21.96
+1. channel temperature: 22.09
+2. channel temperature: 22.14
+```
+
+Equivalently, each I2C device can be used multiple times with the multiplexer. If more than eight devices with the same identifier are to be operated in parallel, the addressing of the multiplexer can be adjusted based on the three solder points on its back and the following table from its [datasheet](http://www.ti.com/lit/ds/symlink/tca9548a.pdf):
+
+
+
+Highlighted in the table is the default setting with the address 0x77.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led-esp32.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led-esp32.mdx
new file mode 100644
index 0000000..e6cff6d
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led-esp32.mdx
@@ -0,0 +1,49 @@
+---
+title: RGB-LED
+---
+
+import rgbLed from '@site/static/img/hardware-bilder/rgb-esp32/rgb-led-esp32s2.png'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import AlertBox from '@site/src/components/AlertBox/AlertBox'
+
+# ESP32 RGB-LED
+With the RGB-LED you can display different colors.
+The RGB-LED consists of three LEDs that light up in the colors red, green and blue.
+By mixing these colors, many different colors can be displayed.
+
+
+Adafruit_NeoPixel rgb_led_1
+
+void setup() {
+ rgb_led_1.begin();
+ rgb_led_1.setBrightness(30);
+}
+
+void loop() {
+ if (time_startInterval > time_actualInterval + intervalInterval)
+ {
+ time_actualInterval = millis();
+ rgb_led_1.setPixelColor(0,rgb_led_1.Color(random(0, 255), random(0, 255), random(0, 255)));
+ rgb_led_1.show();
+ }
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+## Projects
+
+### [RGB-LED Fader](https://sensebox.de/projects/de/2024-01-10-rgb-led_s2)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led.md b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led.md
new file mode 100644
index 0000000..a9a010c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rgb-led.md
@@ -0,0 +1,21 @@
+---
+sidebar_position: 4
+title: RGB-LED
+hide_title: false
+description: RGB-LED
+---
+# RGB-LED
+
+
+
+On the board is a WS2812 multi-color RGB LED. On the back are two JST sockets for input and output. The input is connected to a digital port on the senseBox MCU. Additional, identical RGB-LED modules can be connected via the output to create a light chain.
+
+The chainable RGB LED can be programmed with [Blockly](/blockly/blockly-led/).
+
+
+## Technical Specifications
+
+- WS2812 RGB-LED
+- JST input and output for creating RGB chains
+
+- [Shop](https://sensebox.kaufen/product/verkettbare-rgb-led)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rtc-modul.md b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rtc-modul.md
new file mode 100644
index 0000000..7243ac8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/accessoires/rtc-modul.md
@@ -0,0 +1,125 @@
+---
+sidebar_position: 5
+title: RTC-Modul
+hide_title: false
+description: Mit dem RTC-Modul kann die Uhrzeit auch ohne Stromversorgung gespeichert werden.
+---
+# RTC-Modul
+
+The RTC module allows you to save the time even without a power supply. This can be particularly useful if no internet connection is available and measured values are to be saved offline, e.g. on the SD card. A button cell battery is also required so that the time can also be saved without a power supply.
+
+
+
+
+## Connection
+After inserting the button cell battery has been inserted into the holder, the RTC module is connected to an I2C port on the senseBox
+
+## Setting the time
+
+Before you use the RTC module, you must first set the initial time. This only needs to be done once, provided the battery is not disconnected from the module. In the following sketch, the time and date are set in the `setup` and output on the serial monitor in the `loop`. Remember to set the current time in the `setup` with the command `rtc.set(...)`.
+
+```c++
+#include
+//#inlcude only use with blockly code and commend out senseBoxIO.h
+#include
+#include
+#define BUFF_MAX 32
+
+RV8523 rtc;
+unsigned int recv_size = 0;
+char recv[BUFF_MAX];
+
+void setup() {
+ // put your setup code here, to run once:
+ Serial.begin(9600);
+ delay(200);
+
+ Serial.println("Init RTC...");
+ rtc.begin();
+ rtc.start();
+ rtc.set24HourMode();
+ rtc.set(SECOND, MINUTE, HOUR, DAY, MONTH, YEAR); // Aktuelle Uhrzeit / Datum HIER setzen!
+ rtc.batterySwitchOver(1);
+}
+
+
+void loop()
+{
+ uint8_t sec, min, hour, day, month;
+ uint16_t year;
+
+ //Uhrzeit befindet sich in den einzelnen Variablen !
+ rtc.get(&sec, &min, &hour, &day, &month, &year);
+
+ //serial output
+ Serial.print("\nTime: ");
+ Serial.print(hour, DEC);
+ Serial.print(":");
+ Serial.print(min, DEC);
+ Serial.print(":");
+ Serial.print(sec, DEC);
+
+ Serial.print("\nDate: ");
+ Serial.print(day, DEC);
+ Serial.print(".");
+ Serial.print(month, DEC);
+ Serial.print(".");
+ Serial.print(year, DEC);
+
+ //wait a second
+ delay(1000);
+}
+```
+
+## Reading the time
+
+If the time is set and the RTC clock is counting the seconds, it can now be read in any sketch. You start the RTC clock like all other I2C sensors. Just make sure that you do not accidentally call the `rtc.set()` command again and thus reset the time.
+
+```c++
+#include
+//#inlcude only use with blockly code and commend out senseBoxIO.h
+#include
+#include
+#define BUFF_MAX 32
+
+RV8523 rtc;
+unsigned int recv_size = 0;
+char recv[BUFF_MAX];
+
+void setup() {
+ // put your setup code here, to run once:
+ Serial.begin(9600);
+
+ Serial.println("Init RTC...");
+ delay(200);
+ rtc.begin();
+ rtc.start();
+ rtc.batterySwitchOver(1);
+
+}
+void loop()
+{
+ uint8_t sec, min, hour, day, month;
+ uint16_t year;
+
+ //The time is stored in the individual variables!
+ rtc.get(&sec, &min, &hour, &day, &month, &year);
+
+ //serial output
+ Serial.print("\nTime: ");
+ Serial.print(hour, DEC);
+ Serial.print(":");
+ Serial.print(min, DEC);
+ Serial.print(":");
+ Serial.print(sec, DEC);
+
+ Serial.print("\nDate: ");
+ Serial.print(day, DEC);
+ Serial.print(".");
+ Serial.print(month, DEC);
+ Serial.print(".");
+ Serial.print(year, DEC);
+ //wait a second
+ delay(1000);
+}
+```
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/bluetooth-bee.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/bluetooth-bee.mdx
new file mode 100644
index 0000000..808d0db
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/bluetooth-bee.mdx
@@ -0,0 +1,54 @@
+---
+type: Document
+date: 2022-02-05T11:39:22.892Z
+title: Bluetooth-Bee
+description: Extend your project with Bluetooth/BLE functionality!
+categories: hardware
+resources:
+ - name: Shop
+ link: https://sensebox.kaufen/product/bluetooth-bee
+ - name: "Datenblatt ublox NINA - B3 "
+ link: https://www.u-blox.com/sites/default/files/NINA-B3_DataSheet_UBX-17052099.pdf
+ - name: Phyphox App
+ link: https://phyphox.org/
+ - name: Programmbeispiel
+ link: https://blockly-react.netlify.app/gallery/60ae27f41842740018c65b07
+---
+
+import bleBee from "@site/static/img/hardware-bilder/bees/bluetooth-bee/ble-bee.png"
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText"
+
+# Bluetooth-Bee
+
+With this certified module, Bluetooth or BLE functionalities can be utilized on the senseBox MCU S2. This allows sensor data to be transmitted wirelessly over short distances to a receiver, such as a smartphone, and visualized.
+
+
+
+#include
+#include
+
+void setup()
+{
+ // Initializes the serial monitor
+ Serial.begin(9600);
+ // Restarts W5500 (LAN-Bee) in XBEE1 socket
+ senseBoxIO.powerXB1(false);
+ delay(250);
+ senseBoxIO.powerXB1(true);
+ Ethernet.init(PIN_XB1_CS);
+}
+
+void loop()
+{
+ // Outputs the IP address of the senseBox
+ ip = Ethernet.localIP();
+ Serial.print("IP: ");
+ Serial.println(ip);
+ delay(5000);
+}
+```
+
+## Notes and Tips
+
+The LAN-Bee is delivered without a LAN cable. For permanent outdoor installation, flat LAN cables are particularly suitable, as they can be easily laid through windows and doors to the outside. Especially in combination with Power over Ethernet (PoE), the senseBox can then be easily operated.
+
+
+
+> - [Shop](https://sensebox.kaufen/product/lan-bee)
+> - [WIZnet W5500 Data Sheet](http://wizwiki.net/wiki/lib/exe/fetch.php/products:w5500:w5500_ds_v109e.pdf)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/lora-bee.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/lora-bee.mdx
new file mode 100644
index 0000000..07780c0
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/lora-bee.mdx
@@ -0,0 +1,59 @@
+---
+date: 2020-03-11
+title: LoRa-Bee
+categories: hardware
+description: With the LoRa-Bee, data from the senseBox can be transmitted to the Internet with low power consumption
+type: Document
+resources:
+ - name: 'Shop'
+ link: https://sensebox.kaufen/product/lora-bee
+ - name: HopeRF RFM9xW Datenblatt
+ link: https://www.hoperf.com/modules/lora/RFM95.html
+
+image1: /images/2020-03-11-bee-lora/LoraBee_Bottom.png
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import LoRaBee from '@site/static/img/hardware-bilder/bees/lora-bee/LoraBee_Bottom.png'
+
+# LoRa-Bee
+
+It is possible to upload sensor data to the openSenseMap via [LoRaWAN™](https://de.wikipedia.org/wiki/Long_Range_Wide_Area_Network)
+through [TheThingsNetwork](https://thethingsnetwork.org)(TTN).
+
+LoRa is an increasingly widespread wireless standard which, like WiFi, allows digital data transmission in an IP network, but offers significantly different features. TheThingsNetwork offers very good coverage in Germany compared to other countries, with ~2000 gateways.
+
+
+#include
+
+File myFile;
+// Name of the file on the SD card
+// Make sure that this name (without file extension) is not longer than 8 characters!
+String fileName = "senseBox.txt";
+
+void setup()
+{
+ // Starting the SD-Bee
+ SD.begin(28);
+ // Open the file on the SD card
+ myFile = SD.open(fileName, FILE_WRITE);
+ myFile.close();
+
+ hdc.begin();
+};
+
+void loop()
+{
+ // Open file with write access
+ myFile = SD.open(fileName, FILE_WRITE);
+ myFile.println("Hallo Welt!");
+ // After use, the file is closed again
+ myFile.close();
+};
+```
+
+## Programming (Blockly)
+
+The `Create file on SD card` block can be used in the setup() to create a new file on the SD card.
+The name of the file can be changed in the dropdown menu of the block.
+
+
+
+With the `Open file on SD card` block, the previously created file can be opened in the endless loop.
+
+
+
+In the free block section of the `Open file on SD card` block, the `Write data to SD card` block can then be placed.
+In this, the text or number to be written can be placed in the free block section.
+In addition, by checking the box at `Line break`, it can be determined whether a line break should be inserted after each measured value or not.
+
+Additionally, we get the block for an interval from the `Time` category and the desired sensor from the `Sensors` category.
+
+
+
+
+
+
+> - [Shop](https://sensebox.kaufen/product/sd-bee)
+> - [WIZnet W5500 Data Sheet](http://wizwiki.net/wiki/lib/exe/fetch.php/products:w5500:w5500_ds_v109e.pdf)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/wifi-bee.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/wifi-bee.mdx
new file mode 100644
index 0000000..cdbebaa
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/bee/wifi-bee.mdx
@@ -0,0 +1,98 @@
+---
+date: 2020-03-11
+title: WiFi-Bee
+categories: hardware
+description: With the WiFi-Bee, the measurement data of your senseBox can be transmitted via WLAN.
+type: Document
+resources:
+ - name: "Shop"
+ link: https://sensebox.kaufen/product/wifi-bee
+ - name: Atmel ATWINC1500 Data Sheet
+ link: http://ww1.microchip.com/downloads/en/DeviceDoc/ATWINC15x0-MR210xB-IEEE-802.11-b-g-n-SmartConnect-IoT-Module-Data-Sheet-DS70005304C.pdf
+image1: /images/2020-03-11-bee-wifi/wifi.png
+image2: /images/2020-03-11-bee-wifi/1-test.png
+image3: /images/2020-03-11-bee-wifi/2-result.png
+image4: /images/2020-03-11-bee-wifi/3-updater.png
+image5: /images/2020-03-11-bee-wifi/4-firmware-updater.png
+image6: /images/2020-03-11-bee-wifi/5-test-connection.png
+image7: /images/2020-03-11-bee-wifi/6-update-firmware.png
+image8: /images/2020-03-11-bee-wifi/ArduinoUpdaterSelect.png
+image9: /images/2020-03-11-bee-wifi/ArduinoToolsUpdater.png
+image10: /images/2020-03-11-bee-wifi/WifiFirmwareTool.PNG
+image11: /images/2020-03-11-bee-wifi/ingressInput.png
+image12: /images/2020-03-11-bee-wifi/apiInput.png
+image13: /images/2020-03-11-bee-wifi/CertificatesResults.png
+
+---
+
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText"
+import wifiBee from '@site/static/img/hardware-bilder/bees/wifi-bee/wifi.png'
+
+# WiFi-Bee
+
+The WiFi-Bee is the connection piece to connect the senseBox to the internet.
+The data from the senseBox is transmitted via WLAN (WiFi) to the existing network.
+The WiFi-Bee is based on the ATWINC1500 microchip from Atmel.
+
+
+
+#include
+#include
+
+void setup()
+{
+ // Initializes the serial monitor
+ Serial.begin(9600);
+
+ // Restart WINC1500 (WiFi-Bee) in XBEE1 socket
+ senseBoxIO.powerXB1(false);
+ delay(250);
+ senseBoxIO.powerXB1(true);
+}
+
+void loop()
+{
+ delay(5000);
+ // Displays installed and latest firmware version
+ String fv = WiFi.firmwareVersion();
+ Serial.print("Firmware installed: ");
+ Serial.println(fv);
+ Serial.print("Latest firmware: ");
+ Serial.println(WIFI_FIRMWARE_LATEST_MODEL_B);
+
+ // Outputs the IP address of the senseBox
+ IPAddress ip = WiFi.localIP();
+ Serial.print("IP: ");
+ Serial.println(ip);
+ delay(5000);
+}
+```
+
+If all outputs are displayed in the serial monitor, especially if the IP address is shown in the form _192.107.256.4_, the WiFi-Bee is correctly initialized and the senseBox can be used with the internet.
+
+
+> - [Shop](https://sensebox.kaufen/product/wifi-bee)
+> - [Atmel ATWINC1500 Data Sheet](http://ww1.microchip.com/downloads/en/DeviceDoc/ATWINC15x0-MR210xB-IEEE-802.11-b-g-n-SmartConnect-IoT-Module-Data-Sheet-DS70005304C.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sd.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sd.mdx
new file mode 100644
index 0000000..2c164f0
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sd.mdx
@@ -0,0 +1,92 @@
+---
+sidebar_position: 10
+title: SD card
+description: Learn how to use the built-in SD card module!
+categories: hardware
+hide_title: false
+---
+
+import AlertBox from '@site/src/components/AlertBox/AlertBox'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import sdModul from '@site/static/img/en/mcus2/sd-card-slot.png'
+
+# SD module
+
+
+#include
+#include "FS.h"
+#include // http://librarymanager/All#Adafruit_HDC1000_Library
+
+const long intervalInterval = 60000;
+long time_startInterval = 0;
+long time_actualInterval = 0;
+
+File Daten;
+Adafruit_HDC1000 hdc = Adafruit_HDC1000();
+SPIClass sdspi = SPIClass();
+
+void setup() {
+
+ pinMode(SD_ENABLE,OUTPUT);
+ digitalWrite(SD_ENABLE,LOW);
+ sdspi.begin(VSPI_SCLK,VSPI_MISO,VSPI_MOSI,VSPI_SS);
+ SD.begin(VSPI_SS,sdspi);
+ Daten = SD.open("/Daten.csv", FILE_WRITE);
+ Daten.close();
+ hdc.begin();
+}
+
+void loop() {
+ time_startInterval = millis();
+ if (time_startInterval > time_actualInterval + intervalInterval)
+ {
+ time_actualInterval = millis();
+ Daten = SD.open("/Daten.csv", FILE_WRITE);
+ Daten.println(hdc.readTemperature());
+ Daten.close();
+ }
+
+}
+
+```
+
+## Programming (Blockly)
+
+With the `Create file on SD card` block, a new file can be created on the SD card in the setup().
+The name of the file can be changed in the dropdown menu of the block.
+
+
+
+With the `Open file on SD card` block, the previously created file can then be opened in the loop.
+
+
+
+In the block section of the `Open file on SD card` block, the `Write data to SD card` block can then be placed.
+In this block, the text or number to be written can be placed in the free block section.
+Additionally, by checking the `Line break` checkbox, it can be specified whether a line break should be inserted after each measurement value or not.
+
+Additionally, we get the block for an interval from the `Time` category and the desired sensor from the `Sensors` category.
+Then we put everything together and get the following sketch.
+
+
+
+> - [Blockly.senseBox.de](https://blockly.sensebox.de/)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/bmx055.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/bmx055.mdx
new file mode 100644
index 0000000..113068d
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/bmx055.mdx
@@ -0,0 +1,75 @@
+---
+sidebar_position: 1
+title: Absolute Orientation Sensor
+hide_title: false
+description: Bosch BMX055
+---
+# Absolute Orientation Sensor
+
+:::warning
+The BMX055 is not present on some batches of the senseBox MCU. To check if your MCU has the orientation sensor, look [here](/docs/boards/mcu/mcu-revisions).
+:::
+The Bosch BMX055 is already soldered onto the senseBox MCU and can be used without any additional setup.
+The sensor combines an accelerometer, a gyroscope, and a precise magnetometer.
+
+## Technical Information
+
+____________________________________________________________________
+| Parameter | Technical Specifications |
+| --- | --- |
+| Digital Resolution | Accelerometer (A): 0.98 mg
+#include
+
+BMX055 bmx;
+
+void setup() {
+ // Initialize serial communication with 9600 baud
+ Serial.begin(9600);
+
+ // Start the accelerometer with configuration mode 0x3
+ bmx.beginAcc(0x3);
+}
+
+void loop() {
+ // Read the acceleration on the X-axis
+ int xAcc = bmx.getAccelerationX();
+ int yAcc = bmx.getAccelerationY();
+ int zAcc = bmx.getAccelerationZ();
+ // Output the acceleration values to the serial monitor
+ Serial.print("X:");
+ Serial.print(xAcc);
+ Serial.print(",Y:");
+ Serial.print(yAcc);
+ Serial.print(",Z:");
+ Serial.println(zAcc);
+ // Delay to limit the read rate
+ delay(100);
+}
+```
+
+You can display the results in Arduino under `Tools -> Serial Plotter` or via the terminal program of your choice.
+
+
+
+
+## Programming (Blockly)
+
+In Blockly, the accelerometer can be read using the following block:
+
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/co2.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/co2.mdx
new file mode 100644
index 0000000..4c04a58
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/co2.mdx
@@ -0,0 +1,177 @@
+---
+sidebar_position: 11
+title: CO2 Sensor
+hide_title: false
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import CO2Sensor from '@site/static/img/hardware-bilder/co2/scd30.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# CO2 Sensor
+
+The SCD30 is a precise CO2 sensor from the Swiss manufacturer Sensirion.
+The sensor board has a JST PHR4 connector, suitable for operation with the senseBox MCU.
+It is also equipped with the Qwiic Connect System.
+
+In addition to CO2 detection, a high-quality Sensirion humidity and temperature sensor is used on the same sensor module.
+Thanks to the applied dual-channel principle for measuring carbon dioxide concentration, the sensor is designed to automatically compensate for long-term drifts.
+
+:::warning
+The CO2 sensor should not be used permanently outdoors.
+:::
+
+2 measurement range: 0 - 40,000 ppm
+- Accuracy: ± (30 ppm + 3% MV) (25 °C, 400 - 10,000 ppm)
+- Repeatability: 10 ppm
+- Temperature stability: 2.5 ppm / °C (0-50 °C)
+- Response time: 20s
+- Humidity measurement range: 0 - 100 % RH
+- Accuracy: ±3% RH (0-100% RH)
+- Repeatability: 0.1% RH
+- Response time: 8s
+- Temperature measurement range: -40 °C - 70 °C
+- Accuracy (°C): ± (0.4 °C + 0.023 x (T [°C] - 25°C))
+- Repeatability (°C): 0.1 °C
+- Response time: >10s
+
+## Connection
+
+2 -Konzentration und gibt sie im Seriellen Monitor aus.
+
+### Software Library
+
+To program the sensor in Arduino, you need to install the software library [SparkFun SCD30 Arduino Library](https://www.arduino.cc/reference/en/libraries/sparkfun-scd30-arduino-library/).
+
+### Code
+
+```cpp
+#include
+#include // http://librarymanager/All#SparkFun_SCD30_Arduino_Library
+
+SCD30 airSensor;
+
+void setup() {
+ Serial.begin(9600);
+ Wire.begin();
+ if (airSensor.begin() == false)
+ {
+ while (1)
+ ;
+ }
+ airSensor.useStaleData(true);
+}
+void loop()
+{
+ Serial.println(airSensor.getCO2());
+ delay(500);
+}
+
+```
+
+## Programming (Blockly)
+
+You can read the CO2 sensor with the following block.
+
+
+
+## Calibrating the CO2 Sensor (Auto Calibration)
+
+As a rule, the CO2 sensor comes pre-calibrated.
+Rough handling, shipping, or soldering can reduce the accuracy of the sensor, making calibration necessary.
+For this sketch, you need the display.
+If you don't have a display, you can delete the display-related parts, this does not affect the calibration of the sensor!
+
+To calibrate the CO2 sensor, it must be exposed to fresh air with a CO2 concentration of `400ppm` for **at least 7 days**, each day for at least one hour.
+As long as the sensor is not set up in the immediate vicinity of a CO2 source (e.g., your own breath, combustion process, etc.), we can assume that the atmosphere has a concentration of about `400ppm` [tendency increasing](https://www.esrl.noaa.gov/gmd/ccgg/trends//).
+
+Install the [Board Support Package](https://docs.sensebox.de/arduino/board-support-package-installieren/) of the senseBox and additionally the `SparkFun_SCD30_Arduino_Library` via the library manager in the Arduino IDE.
+Then you can upload the following sketch to the MCU.
+
+Alternatively, the compiled `.bin` file can be downloaded [here](/docs/sensebox_co2_calibrate.bin).
+
+```cpp
+#include
+#include
+
+#include "SparkFun_SCD30_Arduino_Library.h"
+
+// DISPLAY_PART_START
+#include
+#include
+#define OLED_RESET 4
+Adafruit_SSD1306 display(OLED_RESET);
+// DISPLAY_PART_ENDE
+SCD30 airSensor;
+
+
+void setup() {
+ // DISPLAY_PART_START
+ senseBoxIO.powerI2C(true);
+ delay(2000);
+ display.begin(SSD1306_SWITCHCAPVCC, 0x3D);
+ display.display();
+ delay(100);
+ display.clearDisplay();
+ // DISPLAY_PART_ENDE
+ if (airSensor.begin(Wire, true) == false)
+ {
+ while (1)
+ ;
+ }
+ airSensor.getAutoSelfCalibration();
+}
+
+
+void loop() {
+
+ // DISPLAY_PART_START
+ long time_elapsed = millis();
+ time_elapsed = time_elapsed / 1000;
+ time_elapsed = time_elapsed / 60;
+
+ display.clearDisplay();
+ display.setCursor(0, 0);
+ display.setTextColor(WHITE, BLACK);
+ display.setTextSize(1);
+ display.println("Sensor eine Stunde an der frischen Luft lassen!");
+ display.println();
+ display.println();
+ display.println();
+ display.print("Zeit vergangen: ");
+ display.print(time_elapsed);
+ display.println(" min");
+ display.display();
+ // DISPLAY_PART_ENDE
+
+ if (airSensor.dataAvailable())
+ {
+ airSensor.getCO2();
+ airSensor.getTemperature();
+ airSensor.getHumidity();
+ }
+ delay(500);
+}
+```
+
+After uploading the sketch, take the CO2 sensor outside to fresh air for at least 1 hour daily over a period of 7 days.
+The display will show you how much time has passed since the upload.
+For optimal calibration of the sensor, repeat this process for 7 days.
+Please note that the senseBox must not be turned off during this period, otherwise the calibration must be restarted!
+
+## Calibrating the CO2 Sensor (Manual Calibration)
+
+In contrast to the automatic calibration of the CO2 sensor, which takes at least 7 days, you can alternatively perform manual calibration.
+[An excellent guide has been written in the senseBox forum](https://forum.sensebox.de/t/co2-ampel-kalibrieren/1108).
+
+The compiled `.bin` file can be downloaded [here](/docs/sensebox_co2_calibrate_manual.bin).
+
+- [Shop](https://sensebox.kaufen/product/co2-sensor)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/distanz.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/distanz.mdx
new file mode 100644
index 0000000..c801e1b
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/distanz.mdx
@@ -0,0 +1,61 @@
+---
+sidebar_position: 2
+title: Ultrasonic Distance Sensor
+hide_title: false
+description: HC-SR04
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import ultrasonic from '@site/static/img/hardware-bilder/distanz/US-Sensor.png'
+import ultrasonicBuild from '@site/static/img/hardware-bilder/distanz/Aufbau-Ultraschall.png'
+
+# Ultrasonic Distance Sensor
+
+The HC-SR04 measures distances using ultrasound and outputs them in centimeters (cm).
+
+
+#include
+
+SDS011 my_sds(Serial1) // Serial1 specifies the serial port to which the sensor is connected
+float p10, p25;
+
+void setup(){
+ // Initialize the standard serial port
+ Serial.begin(9600);
+ while(!Serial);
+ // Initialize the serial port to which our sensor is connected
+ Serial1.begin(9600);
+ delay(5000);
+}
+
+void loop(){
+ // Assign the measured particulate matter values to variables
+ p10 = my_sds.getPm10();
+ p25 = my_sds.getPm25();
+ // Print values to the console
+ Serial.println("P2.5: " + String(p25));
+ Serial.println("P10: " + String(p10));
+ delay(1000);
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+Select the port to which you have connected the sensor and the measurement value from the dropdown menu.
+
+- PM2.5: Particulate matter fraction below 2.5 µg/m^3
+- PM10: Particulate matter fraction below 10 µg/m^3
+
+>- [Shop](https://sensebox.kaufen/product/feinstaub-sds011)
+>- [Datenblatt NOVA SDS011](https://cdn-reichelt.de/documents/datenblatt/X200/SDS011-DATASHEET.pdf)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/feinstaub-sps30.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/feinstaub-sps30.mdx
new file mode 100644
index 0000000..914be64
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/feinstaub-sps30.mdx
@@ -0,0 +1,83 @@
+---
+sidebar_position: 3
+title: Particulate Matter Sensor SPS30
+hide_title: false
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import feinstaubSps from '@site/static/img/hardware-bilder/sps30/sps30.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# Particulate Matter Sensor SPS30
+
+Der Particulate Matter Sensor SPS30 ist ein hochpräzises Gerät zur Messung der Luftqualität, das speziell für die Erfassung von Feinstaubpartikeln entwickelt wurde. Er misst die Konzentrationen von PM1.0, PM2.5, PM4.0 und PM10 in der Luft. Das Gerät verwendet eine fortschrittliche Laserscattering-Technologie, um die Partikel zu zählen und deren Größe zu bestimmen. Die Messergebnisse werden in µg/m³ angezeigt.
+
+ // http://librarymanager/All#
+
+struct sps30_measurement m;
+uint32_t auto_clean_days = 4;
+const long intervalsps = 1000;
+unsigned long time_startsps = 0;
+unsigned long time_actualsps = 0;
+
+void getSPS30Data(){
+
+ uint16_t data_ready;
+ int16_t ret;
+
+ do {
+ ret = sps30_read_data_ready(&data_ready);
+ if (ret < 0) {
+ } else if (!data_ready) {}
+ else
+ break;
+ delay(100); /* retry in 100ms */
+ } while (1);
+ ret = sps30_read_measurement(&m);
+}
+
+void setup() {
+ sensirion_i2c_init();
+ sps30_set_fan_auto_cleaning_interval_days(auto_clean_days);
+ sps30_start_measurement();
+}
+
+void loop() {
+ time_startsps = millis();
+ if (time_startsps > time_actualsps + intervalsps) {
+ time_actualsps = millis();
+ getSPS30Data();
+ }
+ Serial.println(m.mc_1p0);
+}
+
+```
+
+### Programming (Blockly)
+
+You can read the sensor with the following block.
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/helligkeit-uv.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/helligkeit-uv.mdx
new file mode 100644
index 0000000..28fb4e6
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/helligkeit-uv.mdx
@@ -0,0 +1,187 @@
+---
+sidebar_position: 5
+title: Brightness and UV Sensor
+hide_title: false
+description: Brightness and UV Sensor
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import lightSensor from '@site/static/img/hardware-bilder/helligkeit-uv/sensor_helligkeit_uv.png'
+import TutorialPorts_en from '@site/src/components/TutorialPorts/TutorialPorts_en'
+
+# Brightness and UV Sensor
+On this senseBox component, two sensors are combined.
+
+The light intensity is measured with the TSL45315 sensor from AMS-TAOS or the LiteOn LTR329ALS-01 sensor (since 02/21).
+This sensor detects the light conditions similar to the human eye and outputs the brightness values directly in Lux, with a large dynamic range (3 Lux to 220k Lux).
+
+The second sensor is a Vishay VEML6070 Ultraviolet (UV) light sensor.
+This sensor converts the intensity of the sun's UV light into digital data.
+The sensor has excellent UV sensitivity and linearity over Filtron™ technology.
+It has good UV radiation measurement even with long sun UV exposure and can excellently compensate for temperature fluctuations.
+
+
+#include
+#include
+#include
+
+bool lightsensortype = 0; //0 for tsl - 1 for ltr
+//settings for LTR sensor
+LTR329 LTR;
+unsigned char gain = 1;
+unsigned char integrationTime = 0;
+unsigned char measurementRate = 3;
+VEML6070 veml;
+
+
+int read_reg(byte address, uint8_t reg)
+ {
+ int i = 0;
+ Wire.beginTransmission(address);
+ Wire.write(reg);
+ Wire.endTransmission();
+ Wire.requestFrom((uint8_t)address, (uint8_t)1);
+ delay(1);
+ if(Wire.available())
+ i = Wire.read();
+ return i;
+ }
+
+
+void write_reg(byte address, uint8_t reg, uint8_t val)
+ {
+ Wire.beginTransmission(address);
+ Wire.write(reg);
+ Wire.write(val);
+ Wire.endTransmission();
+ }
+
+void Lightsensor_begin()
+ {
+ Wire.begin();
+ unsigned int u = 0;
+ u = read_reg(0x29, 0x80 | 0x0A); //id register
+ if ((u & 0xF0) == 0xA0) // TSL45315
+ {
+ write_reg(0x29, 0x80 | 0x00, 0x03); //control: power on
+ write_reg(0x29, 0x80 | 0x01, 0x02); //config: M=4 T=100ms
+ delay(120);
+ lightsensortype = 0; //TSL45315
+ }
+ else
+ {
+ LTR.begin();
+ LTR.setControl(gain, false, false);
+ LTR.setMeasurementRate(integrationTime, measurementRate);
+ LTR.setPowerUp(); //power on with default settings
+ delay(10); //Wait 10 ms (max) - wakeup time from standby
+ lightsensortype = 1; //
+ }
+ }
+
+
+unsigned int Lightsensor_getIlluminance()
+ {
+ unsigned int lux = 0;
+ if (lightsensortype == 0) // TSL45315
+ {
+ unsigned int u = (read_reg(0x29, 0x80 | 0x04) << 0); //data low
+ u |= (read_reg(0x29, 0x80 | 0x05) << 8); //data high
+ lux = u * 4; // calc lux with M=4 and T=100ms
+ }
+ else if (lightsensortype == 1) //LTR-329ALS-01
+ {
+ delay(100);
+ unsigned int data0, data1;
+ for (int i = 0; i < 5; i++) {
+ if (LTR.getData(data0, data1)) {
+ if(LTR.getLux(gain, integrationTime, data0, data1, lux));
+ if(lux > 0) break;
+ else delay(10);
+ }
+ else {
+ byte error = LTR.getError();
+ }
+ }
+ }
+ return lux;
+ }
+
+
+void setup() {
+ Serial.begin(9600);
+ Lightsensor_begin();
+ veml.begin();
+
+}
+
+void loop() {
+ Serial.print("Illuminance: ");
+ Serial.println(ightsensor_getIlluminance());
+ Serial.print("UV-Intensity: ");
+ Serial.println(veml.getUV());
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the brightness/UV sensor:
+
+- Brightness in LUX
+- UV exposure in µW/cm^2
+
+## Projects
+
+- #### [IoT Messstation](https://sensebox.de/projects/de/2024-01-10-iotmesstation_s2)
+
+## Extras
+
+> - [Data sheet](https://sensebox.kaufen/assets/datenblatt/senseBox-VEML-TSL_v20.pdf)
+> - [Data sheet Vishay VEML6070](https://www.vishay.com/docs/84277/veml6070.pdf)
+> - [Data sheet LTR329](https://optoelectronics.liteon.com/upload/download/DS86-2014-0006/LTR-329ALS-01_DS_V1.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/lautstaerke.md b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/lautstaerke.md
new file mode 100644
index 0000000..41d1ba7
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/lautstaerke.md
@@ -0,0 +1,49 @@
+---
+sidebar_position: 6
+title: Volume Sensor
+hide_title: false
+description: DFRobot SEN0232 Gravity
+---
+# Volume Sensor
+
+The DFRobot SEN0232 measures the volume and outputs the measured values in decibels.
+
+
+
+## Techincal Information
+
+* Dimensions: 60mm x 43mm x 9mm
+* "Plug-in-and-Go" senseBox compatible
+* Input voltage: 3.3-5V
+* Output voltage: 0.6-2.6V
+* Measurement range: accurate between 30 dBA and 130 dBA
+* Measurement interval: 125 ms
+
+
+
+
+## Programmierung (Arduino)
+
+
+```c++
+#define SoundSensorPin A1 //this pin read the analog voltage from the sound level meter
+#define VREF 5.0 //voltage on AREF pin,default:operating voltage
+
+void setup()
+{
+ Serial.begin(115200);
+}
+
+void loop()
+{
+ float voltageValue,dbValue;
+ voltageValue = analogRead(SoundSensorPin) / 1024.0 * VREF;
+ dbValue = voltageValue * 50.0; //convert voltage to decibel value
+ Serial.print(dbValue,1);
+ Serial.println(" dBA");
+ delay(125);
+}
+```
+
+>- [Shop](https://sensebox.kaufen/product/lautstarkesensor)
+>- [DFRobot SEN0232 Gravity](https://www.mouser.de/pdfdocs/SEN0232_Web.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur-bmp280.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur-bmp280.mdx
new file mode 100644
index 0000000..f504c17
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur-bmp280.mdx
@@ -0,0 +1,76 @@
+---
+date: 2020-03-11
+title: Air Pressure and Temperature Sensor (BMP280) [DEPRECATED]
+categories: hardware
+description: Air Pressure and Temperature Sensor (BMP280)
+type: Document
+resources:
+ - name: 'Shop'
+ link: https://sensebox.kaufen/product/luftdruck-temperatur
+ - name: 'Bosch BMP280 Data sheet'
+ link: https://www.bosch-sensortec.com/media/boschsensortec/downloads/datasheets/bst-bmp280-ds001.pdf
+block: /images/2020-03-11-sensoren-luftdruck-temperatur/block_luftdruck_temperatur.svg
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import pressureSensor from '@site/static/img/hardware-bilder/luftdruck/bmp_top.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# Air Pressure and Temperature Sensor (BMP280)
+
+This sensor measures air pressure and temperature and is based on the BMP280 sensor from Bosch.
+
+ // http://librarymanager/All#Adafruit_BMP280_Library
+#include
+
+Adafruit_BMP280 bmp;
+
+void setup() {
+ Serial.begin(9600);
+ bmp_sensor.begin();
+}
+
+void loop() {
+ Serial.print("Pressure: ");
+ Serial.println(bmp_sensor.readPressure());
+ Serial.print("Temperature: ");
+ Serial.println(bmp_sensor.readTemperature());
+ Serial.print("Altitude: ");
+ Serial.println(bmp_sensor.readAltitude(1013));
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the air pressure/temperature sensor:
+
+- Air pressure in Pascal (Pa)
+- Temperature in Celsius (°C)
+- Altitude above sea level in meters (a reference air pressure is required)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur.mdx
new file mode 100644
index 0000000..992e128
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/luftdruck-temperatur.mdx
@@ -0,0 +1,95 @@
+---
+sidebar_position: 7
+title: Air Pressure and Temperature Sensor
+hide_title: false
+description: Air Pressure and Temperature Sensor (DPS310)
+displayedSidebar: board
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import pressureSensor from '@site/static/img/hardware-bilder/luftdruck/bmp_top.png'
+import { useBoardStore } from '@site/src/lib/stores/store'
+import TutorialPorts_en from '@site/src/components/TutorialPorts/TutorialPorts_en'
+
+# Air Pressure and Temperature Sensor
+
+The DPS310 air pressure sensor is one of the latest pressure and temperature sensors from Infineon with a digital I2C and SPI interface.
+The breakout board also includes a voltage regulator and a level converter so that the sensor can be used in systems with 3 to 5.5 volts via the JST connection.
+
+ // http://librarymanager/All#Adafruit_DPS310
+
+Adafruit_DPS310 dps;
+
+void setup() {
+ Serial.begin(9600);
+
+ dps.begin_I2C(0x76);
+ dps.configurePressure(DPS310_64HZ, DPS310_64SAMPLES);
+ dps.configureTemperature(DPS310_64HZ, DPS310_64SAMPLES);
+
+}
+
+void loop() {
+ sensors_event_t temp_event, pressure_event;
+ dps.getEvents(&temp_event, &pressure_event);
+
+ Serial.print("Pressure: ");
+ Serial.println(pressure_event.pressure);
+ Serial.print("Temperature: ");
+ Serial.println(temp_event.temperature);
+}
+```
+
+## Programming (Blockly)
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the air pressure/temperature sensor:
+
+- Air pressure in Pascal (Pa)
+- Temperature in Celsius (°C)
+- Altitude above sea level in meters (requires a reference air pressure)
+
+## Projects
+
+- #### [IoT Measurement Station](https://sensebox.de/projects/de/2024-01-10-iotmesstation_s2)
+
+## Extras
+
+> - [Shop](https://sensebox.kaufen/product/luftdruck-temperatur)
+> - [Bosch BMP280 Data sheet](https://www.bosch-sensortec.com/media/boschsensortec/downloads/datasheets/bst-bmp280-ds001.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/mikro.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/mikro.mdx
new file mode 100644
index 0000000..e299292
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/mikro.mdx
@@ -0,0 +1,82 @@
+---
+sidebar_position: 8
+title: Microphone
+hide_title: false
+description: Condenser Microphone
+---
+
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText"
+import mikro from "@site/static/img/hardware-bilder/mikro/mic.png"
+import mikroBuild from "@site/static/img/hardware-bilder/mikro/mikro-aufbau.png"
+
+# Microphone
+This condenser microphone from Watterott Electronics is equipped with an amplifier and can detect noises between 58 and 110 dB.
+It outputs the measured noises in a range of 0-5V.
+
+
+#include
+
+Adafruit_MPU6050 mpu;
+sensors_event_t a, g, temp;
+
+void setup() {
+ // Start serial communication
+ Serial.begin(115200);
+
+ Wire1.begin();
+ mpu.begin(0x68, &Wire1);
+ mpu.setAccelerometerRange(MPU6050_RANGE_8_G);
+
+ Serial.println("MPU6050 ready!");
+}
+
+void loop() {
+ mpu.getEvent(&a, &g, &temp);
+
+ // Output acceleration data
+ Serial.print("X:");
+ Serial.print(a.acceleration.x);
+ Serial.print(",Y:");
+ Serial.print(a.acceleration.y);
+ Serial.print(",Z:");
+ Serial.println(a.acceleration.z);
+
+ // Short pause to keep the output readable
+ delay(100);
+}
+```
+You can display the results in Arduino under `Tools -> Serial Plotter` or via the terminal program of your choice.
+
+
+
+## Programming (Blockly)
+In Blockly, you can read the sensor using the following block:
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/photodiode.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/photodiode.mdx
new file mode 100644
index 0000000..9f68cd8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/photodiode.mdx
@@ -0,0 +1,56 @@
+---
+title: Photodiode
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import photodiode from '@site/static/img/en/hardware-bilder/photodiode/mcu-top-photodiode.png'
+
+# Photodiode
+A photodiode is a light-sensitive semiconductor that converts light into electrical energy.
+It is commonly used in various applications such as photodetectors, exposure meters, light barriers, and optical communication systems.
+Photodiodes provide readings that are proportional to the intensity of the incident light, making them useful for detecting changes in brightness or quantifying light intensities in various applications.
+
+ // http://librarymanager/All#Adafruit_HDC1000_Library
+
+Adafruit_HDC1000 hdc = Adafruit_HDC1000();
+
+void setup(){
+ Serial.begin(9600);
+ hdc.begin();
+}
+
+void loop(){
+ Serial.print("Temperature: ");
+ Serial.println(hdc.readTemperature());
+ Serial.print("Humidity: ");
+ Serial.println(hdc.readHumidity());
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the temperature and humidity sensor:
+- Temperature in degrees Celsius (°C)
+- Humidity in percent (%)
+
+## Projects
+
+- #### [IoT Measurement Station](https://sensebox.de/projects/de/2024-01-10-iotmesstation_s2)
+
+## Extras
+
+> - [Shop](https://sensebox.kaufen/product/temperatur-luftfeuchte)
+> - [TI HDC1080 Datenblatt](https://www.ti.com/lit/ds/symlink/hdc1080.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/tof.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/tof.mdx
new file mode 100644
index 0000000..b54bddd
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/tof.mdx
@@ -0,0 +1,99 @@
+---
+title: Time-of-Flight (ToF) Sensor
+description: Measure distances with high precision using the Time-of-Flight sensor.
+categories: hardware
+---
+
+import tofSensor from '@site/static/img/hardware-bilder/tof/tofsensor.png'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import TutorialPorts_en from '@site/src/components/TutorialPorts/TutorialPorts_en'
+
+# Time-of-Flight (ToF) Sensor
+
+
+#include
+#include
+
+VL53L8CX sensor_vl53l8cx_top(&Wire, -1, -1);
+float oldVl53l8cxMin = -1.0;
+
+// Function to get the minimum distance measured by the ToF sensor (VL53L8CX)
+float getVl53l8cxMin() {
+ VL53L8CX_ResultsData Results;
+ uint8_t NewDataReady = 0;
+ uint8_t status;
+
+ status = sensor_vl53l8cx_top.vl53l8cx_check_data_ready(&NewDataReady);
+
+ if ((!status) && (NewDataReady != 0)) {
+ sensor_vl53l8cx_top.vl53l8cx_get_ranging_data(&Results);
+ float min = 10000.0;
+ for(int i = 0; i < VL53L8CX_RESOLUTION_8X8*VL53L8CX_NB_TARGET_PER_ZONE; i++) {
+ if((&Results)->target_status[i]!=255){
+ float distance = (&Results)->distance_mm[i];
+ if(min > distance) {
+ min = distance;
+ }
+ }
+ }
+ oldVl53l8cxMin = (min==10000.0) ? 0.0 : min;
+ }
+ return oldVl53l8cxMin;
+ }
+
+
+
+void setup(){
+ Serial.begin(9600);
+ Wire.begin();
+ Wire.setClock(1000000); //Sensor has max I2C freq of 1MHz
+ sensor_vl53l8cx_top.begin();
+ sensor_vl53l8cx_top.init_sensor();
+ sensor_vl53l8cx_top.vl53l8cx_set_ranging_frequency_hz(30);
+ sensor_vl53l8cx_top.vl53l8cx_set_resolution(VL53L8CX_RESOLUTION_8X8);
+ sensor_vl53l8cx_top.vl53l8cx_start_ranging();
+
+}
+
+void loop(){
+ Serial.println(getVl53l8cxMin());
+}
+
+
+```
+
+## Programming (Blockly)
+In Blockly this sensor can be read out via the following block:
+
+
+
+## Projects
+
+- #### [Display depth images on the LED matrix](https://sensebox.de/projects/de/2024-04-02-tof-led)
+- #### [Surveillance camera](https://sensebox.de/projects/de/2024-04-02-%C3%BCberwachungskamera)
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/truebner.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/truebner.mdx
new file mode 100644
index 0000000..8aa1294
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/truebner.mdx
@@ -0,0 +1,71 @@
+---
+sidebar_position: 9
+title: Soil Moisture and Temperature Sensor
+hide_title: false
+description: Soil Moisture and Temperature Sensor Truebner SMT50
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import truebnerSensor from '@site/static/img/hardware-bilder/bodenfeuchte-temperatursensor/sensoren_bodenfeuchte_temperatur.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# Soil Moisture and Temperature Sensor
+The Truebner SMT50 is a capacitive soil temperature and moisture sensor and is therefore well suited for various applications in the home garden.
+Capacitive soil moisture sensors generate an electric field around their measuring electrodes. The field penetrates the surrounding soil. The measuring electronics of the sensor determine the resulting electrical capacitance of the electrodes.
+The higher the water content in the soil, the greater the measurement capacitance of the sensor.
+
+
+
+float getSMT50Temperature(int analogPin){
+ int sensorValue = analogRead(analogPin);
+ float voltage = sensorValue * (3.3 / 1024.0);
+ return (voltage - 0.5) * 100;
+}
+
+
+void setup() {
+ Serial.begin(9600);
+}
+
+
+void loop() {
+ Serial.println(getSMT50Temperature(1));
+}
+```
+
+## Programming (Blockly)
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the soil moisture and temperature sensor:
+- Soil temperature in degrees Celsius (°C)
+- Soil moisture
+
+> - [Shop](https://sensebox.kaufen/product/bodenfeuchte-temperatursensor-smt50)
+> - [Truebner SMT50](https://www.truebner.de/assets/download/SMT50_Flyer_DE.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/umweltsensor.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/umweltsensor.mdx
new file mode 100644
index 0000000..20980e8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/umweltsensor.mdx
@@ -0,0 +1,162 @@
+---
+sidebar_position: 10
+title: Environmental Sensor
+hide_title: false
+description: Air Pressure and Temperature Sensor (BME680)
+---
+
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import umweltsensor from '@site/static/img/hardware-bilder/umweltsensor/bme.png'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# Environmental Sensor
+
+With the BME680 sensor you can measure a variety of phenomena. Air temperature, relative humidity, air pressure and air quality can be determined with the BME680. It is a real all-rounder.
+
+
+#include // http://librarymanager/All#BSEC_Software_Library
+
+float bmeTemperatur;
+float bmeHumidity;
+double bmePressure;
+float bmeIAQ;
+float bmeIAQAccuracy;
+int bmeCO2;
+float bmeBreathVocEquivalent;
+
+Bsec iaqSensor;
+
+void checkIaqSensorStatus(void)
+ {
+ if (iaqSensor.bsecStatus != BSEC_OK) {
+ if (iaqSensor.bsecStatus < BSEC_OK) {
+ for (;;)
+ errLeds(); /* Halt in case of failure */
+ }
+ }
+
+ if (iaqSensor.bme68xStatus != BME68X_OK) {
+ if (iaqSensor.bme68xStatus < BME68X_OK) {
+ for (;;)
+ errLeds(); /* Halt in case of failure */
+ }
+ }
+}
+
+
+void errLeds(void)
+{
+ pinMode(LED_BUILTIN, OUTPUT);
+ digitalWrite(LED_BUILTIN, HIGH);
+ delay(100);
+ digitalWrite(LED_BUILTIN, LOW);
+ delay(100);
+}
+
+
+void setup() {
+ Wire.begin();
+ iaqSensor.begin(BME68X_I2C_ADDR_LOW, Wire);
+ checkIaqSensorStatus();
+
+ bsec_virtual_sensor_t sensorList[13] = {
+ BSEC_OUTPUT_IAQ,
+ BSEC_OUTPUT_STATIC_IAQ,
+ BSEC_OUTPUT_CO2_EQUIVALENT,
+ BSEC_OUTPUT_BREATH_VOC_EQUIVALENT,
+ BSEC_OUTPUT_RAW_TEMPERATURE,
+ BSEC_OUTPUT_RAW_PRESSURE,
+ BSEC_OUTPUT_RAW_HUMIDITY,
+ BSEC_OUTPUT_RAW_GAS,
+ BSEC_OUTPUT_STABILIZATION_STATUS,
+ BSEC_OUTPUT_RUN_IN_STATUS,
+ BSEC_OUTPUT_SENSOR_HEAT_COMPENSATED_TEMPERATURE,
+ BSEC_OUTPUT_SENSOR_HEAT_COMPENSATED_HUMIDITY,
+ BSEC_OUTPUT_GAS_PERCENTAGE
+ };
+
+
+ iaqSensor.updateSubscription(sensorList, 13, BSEC_SAMPLE_RATE_LP);
+ checkIaqSensorStatus();
+
+
+
+}
+
+
+void loop() {
+
+ if (iaqSensor.run()) {
+ bmeTemperatur = iaqSensor.temperature;
+ bmeHumidity = iaqSensor.humidity;
+ bmePressure = iaqSensor.pressure;
+ bmeIAQ = iaqSensor.iaq;
+ bmeIAQAccuracy = iaqSensor.iaqAccuracy;
+ bmeCO2 = iaqSensor.co2Equivalent;
+ bmeBreathVocEquivalent = iaqSensor.breathVocEquivalent;
+ } else {
+ checkIaqSensorStatus();
+ }
+
+ Serial.println(bmeTemperatur);
+
+}
+```
+
+## Programming (Blockly)
+
+In Blockly, the sensor can be read using the following block:
+
+
+
+In the block, you can select between the different parameters of the environmental sensor:
+
+- Temperature in degrees Celsius (°C)
+- Humidity in %
+- Air pressure in Pa
+- Indoor air quality (IAQ)
+- Calibration value
+- CO2 equivalent
+- Breath VOC equivalent
+
+## Calibration Value
+
+The calibration status can be read from the IAQ Accuracy value. It is either 0, 1, 2, or 3 and indicates the following:
+
+- IAQ Accuracy = 0 means the sensor is stabilizing (takes about 25 minutes) or there was a timeout (which should be indicated by a warning/error flag by BSEC ← Needs to be handled in Blockly),
+- IAQ Accuracy = 1 means the value is inaccurate,
+- IAQ Accuracy = 2 means the sensor is calibrating,
+- IAQ Accuracy = 3 means the sensor is successfully calibrated.
+
+The IAQ index is only meaningful when IAQ Accuracy = 3. Besides the IAQ value, BSEC also provides CO2 and VOC equivalent values.
+
+> - [Shop](https://sensebox.kaufen/product/sensebox-mini)
+> - [Bosch BME680](https://www.bosch-sensortec.com/media/boschsensortec/downloads/datasheets/bst-bme680-ds001.pdf)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/wassertemperatur.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/wassertemperatur.mdx
new file mode 100644
index 0000000..b6d4b88
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/sensors/wassertemperatur.mdx
@@ -0,0 +1,64 @@
+---
+title: Water Temperature Sensor
+---
+
+import waterTempSensor from '@site/static/img/hardware-bilder/wassertemperatur/wassertemperatur.JPG'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import TutorialPorts from '@site/src/components/TutorialPorts/TutorialPorts'
+
+# Water Temperature Sensor (DS18B20)
+The DS18B20 is a digital temperature sensor that is addressed via a 1-Wire bus. It can measure temperatures from -55°C to +125°C and is waterproof. It is therefore ideal for measuring water temperature.
+
+:::warning
+To use the sensor with the senseBox you need the 1-Wire adapter. You can purchase it [here](https://sensebox.kaufen/product/sensebox-one-wire-adapter).
+:::
+
+
+#include // http://librarymanager/All#OneWire
+#include // http://librarymanager/All#DallasTemperature
+
+
+#define ONE_WIRE_BUS 1
+OneWire oneWire(ONE_WIRE_BUS);
+DallasTemperature sensors(&oneWire);
+
+float getWaterTemp(){
+ sensors.requestTemperatures();
+ sensors.getTempCByIndex(0);
+}
+
+void setup() {
+ Serial.begin(9600);
+ sensors.begin();
+}
+
+void loop() {
+ Serial.print("Wassertemperatur: ");
+ Serial.print(getWaterTemp());
+}
+```
+
+### Programming (Blockly)
+In Blockly you can read the sensor with the following block:
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/hardware/wifi.mdx b/i18n/en/docusaurus-plugin-content-docs/current/hardware/wifi.mdx
new file mode 100644
index 0000000..edd1c18
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/hardware/wifi.mdx
@@ -0,0 +1,71 @@
+---
+sidebar_position: 1
+title: WiFi
+description: Connect your senseBox to the internet with the built-in WiFi module.
+categories: hardware
+hide_title: false
+---
+
+import wifiModul from '@site/static/img/en/mcus2/wifi-modul-s2.png'
+import AlertBox from '@site/src/components/AlertBox/AlertBox'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+
+# WiFi-Modul
+
+
+
+char ssid[] = "SSID";
+char pass[] = "Password";
+
+void setup() {
+ Serial.begin(9600);
+ WiFi.begin(ssid, pass);
+ if(WiFi.status() != WL_NO_SHIELD){
+ while(true);
+ }
+}
+
+void loop(){
+ Serial.println(WiFi.localIP());
+ delay(1000);
+}
+```
+
+## Programming (Blockly)
+
+With the `Connect to WiFi` block, you can connect your senseBox to a WiFi network in the Setup(). Enter the network name under SSID and the WiFi password under Password.
+
+
+
+With the `Initialize WiFi Access Point` block, your senseBox can create a WiFi network that you can join with other devices. In the SSID text field, you can set the name of your network.
+
+
+
+## Projects
+
+- #### [Communication between senseBoxes with ESP-NOW](https://sensebox.de/projects/de/2024-03-24-esp-now)
+- #### [IoT Measurement Station](https://sensebox.de/projects/de/2024-01-10-iotmesstation_s2)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/FAQ.mdx b/i18n/en/docusaurus-plugin-content-docs/current/misc/FAQ.mdx
new file mode 100644
index 0000000..f9da84d
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/FAQ.mdx
@@ -0,0 +1,164 @@
+---
+title: 'FAQ'
+hide_title: false
+---
+
+# FAQ
+
+
+ Where can I find summarised information about the senseBox?
+
+All important information about the different senseBoxes can be found [here](https://sensebox.de/en/products)
+
+
+
+
+ Which senseBox is right for me?
+
+The [senseBox:edu](https://sensebox.kaufen/product/sensebox-edu)is the version of the senseBox specially developed for use in the educational sector. In addition to the senseBox MCU, it contains sensors for temperature, humidity, air pressure, brightness, UV intensity, distances and noise, a display, a WiFi and an SD card module as well as other electronic components.
+All components are located in a tidy plastic box and are always well protected and easy to check even with regular use.
+The [senseBox:mini](https://sensebox.kaufen/product/sensebox-mini) is the entry-level set into the world of the senseBox.
+It contains the senseBox MCU, the WiFi module, the display and the senseBox environmental sensor (possibility to measure temperature, humidity, air pressure and indoor air quality).
+The senseBox:mini offers everything you need to start with IoT projects, such as a home server or a chatbot. The senseBox:mini is also available as a class kit.
+More information about the senseBox:mini class kit can be found in the attached information sheet.
+The [senseBox:home](https://sensebox.kaufen/product/sensebox-home) is a DIY environmental monitoring station kit that can share its measurement values online on the openSenseMap.
+We have already put together the microcontroller and some basic components as a set. All other sensors and components can be selected independently to create an individual environmental monitoring station.
+The matching program code is provided by us, so there is no need to program it.
+
+
+
+
+ Who is the senseBox suitable for?
+
+In a school context, we recommend a minimum age of 12 years.
+This recommendation is, of course, highly dependent on the supervision ratio.
+We also conduct workshops in primary schools.
+
+
+
+
+ What do I need for the senseBox?
+
+A senseBox contains everything you need.
+Except for a computer and an internet connection, of course.
+
+
+
+
+ Where can I buy the senseBox?
+
+The senseBox is available in our own online shop at [sensebox.kaufen](https://sensebox.kaufen).
+
+
+
+
+ Where can I find the instructions for my first steps?
+
+Here in the Docs you will find instructions for the first steps with [Blockly for senseBox](/docs/boards/mcus2/mcus2-in-betrieb-nehmen) and and the [Arduino IDE](docs/category/arduino).
+
+
+
+
+ Are there teaching/learning materials?
+
+Yes! Working with the senseBox depends on the provided material.
+For the senseBox:edu and senseBox:mini you will find [teaching material](https://sensebox.de/en/material) and [projects](https://sensebox.de/en/projects/) on our website.
+Instructions for the senseBox:home can be found [here](docs/category/aufbau-und-installation-1) in the Docs.
+All materials are open educational resources (OER) and are therefore available free of cost.
+
+
+
+
+ Do you support schools in setting up the senseBox?
+
+Yes! Just contact us and we will see how we can set up the senseBox at your school.
+
+
+
+
+ How to programm the senseBox?
+
+The senseBox can be programmed graphically using [Blockly for senseBox](https://blockly.sensebox.de/ardublockly/?board=sensebox-mcu) and [openroberta](https://lab.open-roberta.org/), or text-based using the [Arduino IDE](https://www.arduino.cc/).
+For more information on how to use the programming environments, refer to the [Docs](https://docs.sensebox.de/).
+
+
+
+
+ Why not use a standard Arduino or Raspberry?
+
+The Raspberry is too complicated for use with beginner programmers and too powerful for our purposes.
+The senseBox MCU was specially developed on an Arduino basis and offers everything that a standard Arduino offers.
+In addition, it allows browser-based programming without software installation and easy connection of sensors via JST cable.
+
+
+
+
+ Who's behind the senseBox?
+
+The senseBox was developed at the student lab [GI@School](https://www.uni-muenster.de/Geoinformatics/gi-at-school/) of the University of Münster.
+After funding by the German Federal Ministry of Education and Research, the [reedu GmbH & Co. KG](https://reedu.de/) was founded in 2018. Today, reedu and the University of Münster jointly manage everything related to the senseBox.
+
+
+
+
+ Where can I find the new senseBox Connect App?
+
+You can download the app in the Apple [Appstore](https://apps.apple.com/ca/app/sensebox-connect/id1586961095?ign-mpt=uo%3D2).
+Further information about the app and how to use it can be found at [sensebox.de/app](https://sensebox.de/app)
+
+
+
+
+ What happens if you press the reset button just once?
+
+The MCU restarts the sketch that is currently uploaded to the MCU.
+
+
+
+
+ What functions are hidden behind the switch button?
+
+The switch button can be controlled programmatically with the initialization `Button switchButton(0);`.
+You can check if the button was pressed in the program with the line `switchButton.isPressed()`.
+In an [example project](https://sensebox.de/projects/de/2021-01-05-display) with the display you can see a short instruction on how it works.
+
+
+
+
+ What happens if you disconnect the MCU from the power? Can you continue without any issues after reconnecting the power?
+
+Yes, you can continue without any issues. Just remember that the program starts "from the beginning" and executes the `setup()` function first.
+
+
+
+
+ How many sensors can be connected? When does the internal memory run out of space?
+
+As many as the senseBox has connections.
+In addition, you can use additional I2C sensors with the help of the [Multiplexer](https://sensebox.kaufen/product/multiplexer).
+However, you cannot connect two identical I2C sensors to the same MCU without the Expander.
+That means you can't connect the HDC1080 twice to the same MCU. For that you would need the Expander.
+The percentage of internal memory used is displayed at the end of the upload (via the Arduino IDE).
+So far we have not reached the point where an MCU was "full".
+This was rather always limited by the hardware (i.e. number of connections) or coupled to the transmission type (LoRa has a limit of ~14 measured values).
+
+
+
+
+ How do you set up a power-saving mode?
+
+In the senseBox MCU there is no power-saving mode.
+However, you can program the MCU to save power.
+This can mean, among other things, that measurement values are only uploaded every 10 minutes and within these 10 minutes the MCU is "put to sleep".
+This can be done either via this [Library](https://www.arduino.cc/reference/en/libraries/arduino-low-power/lowpower.deepsleep/) or via other power-saving measures (Wifi off in the meantime, sensors off, ...)
+
+
+
+
+ How can I test whether the components are all working?
+
+If you have installed the [Arduino IDE and the senseBox Board Support Package](/docs/category/arduino), you can load a sketch in the Arduino IDE under File->Examples->senseBox-Tests->mcu_component_test`` that tests all connected sensors and displays initial values.
+If you specify your WiFi data in line 25 and 26, you can also test the connection to the openSenseMap using a WiFi Bee.
+After you have uploaded the sketch, all instructions will be displayed in the Serial Monitor.
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/circuitpython_esp32.mdx b/i18n/en/docusaurus-plugin-content-docs/current/misc/circuitpython_esp32.mdx
new file mode 100644
index 0000000..4be870b
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/circuitpython_esp32.mdx
@@ -0,0 +1,61 @@
+---
+sidebar_position: 1
+title: "Installing CircuitPython"
+description: ⬇️ CircuitPython auf der senseBox MCU-S2 installieren
+---
+import AlertBox from "@site/src/components/AlertBox/AlertBox";
+
+# Installing CircuitPython
+CircuitPython is a variant of MicroPython developed by Adafruit. It is a simplified version of Python, specifically for microcontrollers. CircuitPython is a great way to quickly and easily get started with programming microcontrollers. In this tutorial, we will show you how to install CircuitPython on your senseBox MCU-S2.
+
+
+
+
+
+ You can only use the Web-Installer with Google Chrome or Microsoft Edge.
+
+
+
+## Installing CircuitPython
+To install CircuitPython on your senseBox MCU-S2, follow these steps:
+1. Visit the [CircuitPython Download Page](https://circuitpython.org/board/sensebox_mcu_esp32s2/).
+2. Connect your senseBox MCU-S2 to your computer using a USB cable.
+3. Hold down the Boot button on the senseBox MCU-S2 and then press the Reset button. Release the Boot button.
+4. Click on the `OPEN INSTALLER` button and select `Full CircuitPython X.X.X Install` (X.X.X represents the latest CircuitPython version).
+5. Click `Next` and connect to your senseBox MCU-S2 in the next menu. Click the `Connect` button and select `ESP32-S2` as the device.
+7. Click `Continue` and wait for the flash to be erased and the combined.bin file to be flashed. This process may take a few minutes.
+8. Press the Reset button on the senseBox MCU-S2 to start the bootloader. A new drive named `senseBox` will appear.
+9. Click `Select Bootloader Drive` and choose the `senseBox` drive.
+9. CircuitPython will now be loaded onto the MCU. After a few seconds, you should see a new drive named `CIRCUITPY`.
+10. CircuitPython has been successfully installed. The Web-Installer does not indicate that the process is complete, so you can simply close the Web-Installer.
+11. You can now use CircuitPython on your senseBox MCU-S2.
+
+
+## Hello World Programm
+To verify that CircuitPython has been successfully installed, we will show you a simple Hello World program.
+1. Visit the [CircuitPython Editor](https://code.circuitpython.org/).
+2. Connect your senseBox MCU-S2 to your computer using a USB cable.
+3. Connect to your senseBox MCU-S2 via `USB`.
+4. Click on `Connect to Device` and select `senseBox MCU-S2 ESP32S2` as the device. You may need to allow the editor to access your senseBox MCU-S2.
+5. Click on `Select New Folder` and choose the `CIRCUITPY` folder.
+6. You may need to allow file editing.
+7. Click on `Use CIRCUITPY`.
+8. Click on `Open` and open the `code.py` file.
+9. The file should already contain some example code. If not, insert the following code:
+```python
+print("Hello World!")
+```
+10. Click on `Save + Run`. You should now see `Hello World!` in the console.
+
+## Uninstalling CircuitPython
+If you want to uninstall CircuitPython from your senseBox MCU-S2 to use Arduino again, follow these steps:
+1. Enter bootloader mode by briefly pressing the Reset button and then briefly pressing the Boot button. The RGB LED should now light up green.
+2. Download the [flash-arduino.uf2](https://github.com/sensebox/MCU-S2-circuitpython-examples/raw/main/assets/flash-arduino.uf2) file.
+3. Copy the `flash-arduino.uf2` file to the `senseBox` drive.
+4. The senseBox MCU-S2 will now restart, and you can use Blockly or Arduino as usual.
+
+
+## Projects
+
+* #### [CO2 Traffic Light](https://sensebox.de/projects/de/2024-04-02-circuitpython-co2-ampel)
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/espnow.mdx b/i18n/en/docusaurus-plugin-content-docs/current/misc/espnow.mdx
new file mode 100644
index 0000000..f7eeeec
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/espnow.mdx
@@ -0,0 +1,9 @@
+---
+title: ESP-NOW
+---
+
+
+
+## Projects
+
+* #### [Communication between senseBoxes with ESP-NOW](https://sensebox.de/projects/de/2024-03-24-esp-now)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/openRoberta.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/openRoberta.md
new file mode 100644
index 0000000..9470a64
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/openRoberta.md
@@ -0,0 +1,58 @@
+---
+date: 2020-03-11
+title: openRoberta
+categories: misc
+description: Programming the senseBox in openRoberta
+type: Document
+set: editoren
+set_order: 3
+resources:
+ - name: "openroberta lab"
+ link: https://lab.openroberta.org
+ - name: "openroberta Wiki"
+ link: https://jira.iais.fraunhofer.de/wiki/display/ORInfo
+image1: /images/2020-03-11-allgemein-einfuehrung-openroberta/openroberta-carousel.png
+image2: /images/2020-03-11-allgemein-einfuehrung-openroberta/openroberta-oberflaeche.png
+image3: /images/2020-03-11-allgemein-einfuehrung-openroberta/openroberta-buttons.png
+
+---
+# openRoberta
+
+openRoberta is a graphical programming interface developed by the Fraunhofer Institute. In addition to the senseBox, you can program many other systems with openRoberta.
+
+## Getting Started
+
+Open the Open Roberta Lab at [lab.open-roberta.org](https://lab.open-roberta.org/). There, you first need to select your system, which is the senseBox.
+
+
+
+
+## Interface
+Once you have selected your system, you will find yourself on the programming interface.
+This can be roughly divided into three areas: The navigation bar at the top, the toolbox on the left and the large white workspace.
+
+
+
+### Navigation Bar
+The *Navigation Bar* can be divided into two areas. In the upper half, there are buttons like "Edit", "Robot", "Help", etc. Here, you can open saved programs or switch the system.
+In the lower half, there are tabs for "Program" and "Robot Configuration". The "Program" tab is open by default and shows your workspace for writing programs. Under the "Robot Configuration" tab, you need to specify the various connected sensors and actuators.
+
+> If a connected component is not specified in the robot configuration, it cannot be used in the program!
+
+### Toolbox
+The *Toolbox* contains all the blocks you need to program the senseBox. They can be easily dragged and dropped into the workspace. All blocks in a category are always colored the same as the category.
+
+### Workspace
+In the *Workspace*, you program your senseBox. As you can see, there are already two blocks in the workspace by default: `Start` and `Repeat indefinitely`. These blocks are essential for every program and therefore cannot be removed.
+Additionally, at the bottom right of the workspace, you will find the button to transfer your program to the senseBox, save the program in the cloud, zoom in and out of your blocks in the workspace, and the trash can to delete blocks.
+
+
+
+## Transferring Programs
+To transfer your program to the senseBox, you need to connect the senseBox to your computer using the USB cable. Next, you can download it by clicking the "Play button" at the bottom left of the workspace. Follow the instructions in the pop-up window.
+
+## openRoberta Wiki
+You can find this and all other information about the openRoberta lab online in the [documentation for the Open Roberta Lab from the Fraunhofer Institute](https://jira.iais.fraunhofer.de/wiki/display/ORInfo).
+
+> - [openRoberta Lab](https://lab.openroberta.org/)
+> - [openroberta Wiki](https://jira.iais.fraunhofer.de/wiki/display/ORInfo)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/_category_.json b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/_category_.json
new file mode 100644
index 0000000..20cf1a8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "openSenseMap",
+ "position": 10,
+ "link": {
+ "type": "generated-index",
+ "description": "Information about the visual programming environment Blockly for senseBox."
+ }
+}
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/api.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/api.md
new file mode 100644
index 0000000..bd94257
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/api.md
@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+hide_title: false
+title: API Dokumentation
+description: openSenseMap RESTful API
+---
+# API Dokumentation
+
+Die openSenseMap erstellt eine API zur Abfrage von Daten zu Boxen und Messungen sowie zum Upload von Messungen. Du findest sie [hier](https://api.opensensemap.org/).
+
+Die Dokumentation der API-Routen ist [hier](https://docs.opensensemap.org) zu finden.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/community.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/community.md
new file mode 100644
index 0000000..3953abf
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/community.md
@@ -0,0 +1,38 @@
+---
+sidebar_position: 2
+title: Community Anwendungen
+hide_title: false
+description: Eine Übersicht über die verschiedenen Tools und Anwendungen zur openSenseMap aus der Community.
+---
+
+In der Community sind bereits einige Tools und Anwendungen entstanden,
+welche die openSenseMap integrieren oder als Schnittstelle nutzen.
+
+> Falls dir weitere Integrationen bekannt sind, lass es uns wissen!
+
+## Visualisierung
+
+> - [DevelopmentSeed Dashboard](https://github.com/developmentseed/sense): elegantes Dashboard, welches die Messungen einer senseBox anzeigt
+> - [HPI Makerclub Dashboard](https://github.com/HPIMakerKlub/sensebox) ([demo](http://rawgit.com/HPIMakerKlub/sensebox/master/statistics/sensor.html?senseBoxID=5719c4037514d05c121e317c))
+> - [senseBox Dashboard](https://github.com/sensebox/sensebox-dashboard): zeigt aktuelle Messwerte einer senseBox an
+> - [senseBox Widget](osem_widget.md)
+> - [Open Sense](https://play.google.com/store/apps/details?id=de.codefor.karlsruhe.opensense): Android Widget zum Darstellen von aktuellen Messwerten der opensensemap.org ([Code auf GitHub](https://github.com/CodeforKarlsruhe/opensense))
+
+
+## Datenanalyse
+
+> - [opensensmapr R client](https://github.com/noerw/opensensmapR): openSenseMap Messwerte und Boxen in der statistischen Umgebung R
+> - [senseBox openSenseMap R client](https://github.com/JohannesFriedrich/senseBox): An R API for the senseBox project. Download and analyse environmental data provided by https://sensebox.de/en/.
+
+## Sensor Firmware
+
+> - [RasPi Wolkenbedeckungs-Sensor](https://github.com/felixerdy/senseBox-cloud)
+> - [GSM Wassersensor](https://github.com/felixerdy/GSM-Temperature-senseBox)
+> - [mobile GPS senseBox](https://github.com/noerw/mobile-sensebox)
+> - [BigGIS LoRa senseBox](https://github.com/biggis-project/sensebox-station)
+
+## Sonstige
+
+> - [Alexa senseBox-Skill](https://github.com/Zeygon/alexa-sensebox)
+> - [openhab2 smart home senseBox Integration](https://github.com/hakan42/openhab2-addons/tree/sensebox-binding/addons/binding/org.openhab.binding.sensebox)
+> - [openSenseMap Game](https://github.com/MaxMoody/Senseboxgamification)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/download.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/download.md
new file mode 100644
index 0000000..db9e54c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/download.md
@@ -0,0 +1,89 @@
+---
+sidebar_position: 3
+title: Datendownload
+hide_title: false
+description: Datendownload über die openSenseMap
+---
+
+# Datendownload
+
+Es bestehen mehrere Möglichkeiten Sensordaten von der openSenseMap herunterzuladen.
+Abhängig von der Fragestellung bietet sich je eine Option an.
+Bei den von der senseBox aufgenommenen Daten handelt es sich um Open Data, das heißt sie stehen allen Nutzer:innen zur freien Verfügung.
+
+## Daten zu einer Box
+
+Unter `https://archive.opensensemap.org` wird ein Archiv für sämtliche Messungen in der openSenseMap-Datenbank geführt.
+Hier sind nach Tag und Box gegliederte Messwerte als CSV beziehungsweise ZIP-Archiv verfügbar.
+
+## Filter
+
+Durch einen Klick auf den Reiter "Filter" in der openSenseMap kannst du dir zunächst optional spezifische Dinge für deine Suche und den anschließenden Download der Daten vorfiltern lassen.
+Solltest du nach einem Namen filtern, kannst du auch die Werte einer einzelnen senseBox herunterladen.
+Dass der Filter aktiv ist, erkennst du an einem roten Dreieck unter dem Reiter "Namen".
+
+
+
+## Graphische Darstellung von Daten
+
+Neben der Funktion zum Filtern kannst du dir auch die Statistiken der einzelnen Boxen anzeigen lassen, indem du einfach auf eine beliebige Box in der Karte klickst, woraufhin du dann in der Sidebar die Statistiken auswählen kannst, die du angezeigt bekommen möchtest.
+
+## Download
+
+Wenn du auf der Seite der openSenseMap den Reiter "Datendownload" auswählst, kannst du eine Reihe von räumlichen und zeitlichen Filtern auf die bereits von den senseBoxen gemessenen Werte anwenden.
+
+
+
+### Zeitraum auswählen
+
+Zunächst solltest du einen Zeitraum auswählen, von welchem du die Daten angezeigt haben möchtest.
+Dies geht entweder manuell, oder du wählst zwischen "letzte 24 Stunden", "Letzte Woche" oder "Letzter Monat".
+
+### Gruppieren nach...
+
+Jetzt wählst du aus, ob du die Daten gemittelt haben möchtest. Hierbei kannst du wieder einen Zeitraum auswählen.
+Alternativ ist es aber auch möglich, dir die Rohdaten ausgeben zu lassen.
+
+### Operation
+
+Jetzt kannst du unter "Operation" entscheiden, welche Funktion du auf die Werte anwenden möchtest.
+Hierbei kannst du dir zum Beispiel das Maximum oder Minimum von gemessenen Temperaturen berechnen lassen.
+
+### Wähle einen Sensor
+
+Hier kannst du nun einen Sensor auswählen, von dem du die gewünschten Werte mit den Filtern, die du vorher ausgewählt hast, angezeigt haben möchtest.
+
+### Columns
+
+Klicke auf den Button "Columns", um auswählen zu können, welche zusätzlichen Informationen du zu deinen Werten bekommen möchtest.
+
+> **Achtung**: Je nach Auswahl der Filterparameter kann der Download sehr groß werden (mehrere 100MB)!
+
+### Formate
+
+Derzeit wird nur das Datenformat CSV unterstützt, welches problemlos mit Tabellenkalkulations-Tools wie
+`Microsoft Excel`, `Libre office`, `R-Studio` oder `ArcGis` verarbeitet werden kann.
+
+Jede Zeile enthält eine Messung einer senseBox mit dem ausgewählten Phänomen.
+Der Messwert (`value`), Standort des Sensors (`lat`, `lng`, Referenzsystem WGS84) und ein Zeitstempel (`createdAt`) sind in je einer Spalte angegeben:
+
+```csv
+createdAt;value;lat;lng
+2016-09-20T10:05:49.581Z;18.70;7.64568;51.962372
+2016-09-20T10:00:52.689Z;18.62;7.64568;51.962372
+2016-09-20T09:55:54.282Z;18.47;7.64568;51.962372
+....
+```
+
+## API-Download
+
+Falls die beiden genannten Möglichkeiten nicht flexibel genug sind, können über die [REST API unter `/boxes/data`](https://docs.opensensemap.org/#api-Measurements-getData-) auch komplexe Anfragen gestellt werden.
+
+Für solche Anfragen bietet sich das Kommandozeilenwerkzeug `curl` an.
+Unter Linux ein Terminal öffnen und beispielsweise folgenden Befehl eingeben, um sämtliche Temperatur-Messungen im geographischen Bereich 51°N - 52°N, 7°E - 8°E in die Datei `measurements.csv` herunterzuladen:
+
+```
+curl "https://api.opensensemap.org/boxes/data?phenomenon=Temperatur&bbox=7,51,8,52" > measurements.csv
+```
+
+Andere geeignete Parameter (Zeitraum, Box-IDs, ...) lassen sich der verlinkten API-Dokumentation entnehmen.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/faq.mdx b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/faq.mdx
new file mode 100644
index 0000000..40f3165
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/faq.mdx
@@ -0,0 +1,51 @@
+---
+title: 'openSenseMap FAQ'
+hide_title: false
+---
+
+# Willkommen auf der openSenseMap - Deiner Plattform für freie Umweltdaten.
+
+
+ Wer steckt hinter dem Projekt?
+
+ Die [opensenseMap](https://opensensemap.org/) ist im Jahr 2014 vom Institut für
+ Geoinformatik der Universität Münster ins Leben gerufen worden. Seit dem Start
+ ist die openSenseMap eng mit dem Projekt der [senseBox](https://sensebox.de) verbunden.
+
+
+
+ Welche Art von Daten kann ich hochladen?
+
+ Die openSenseMap versteht nur numerische Messwerte. Texte, Bilder oder binäre Dateien können nicht übertragen werden.
+
+
+
+ Wie kann ich Daten hochladen?
+
+ Die Messwerte können über eine Vielzahl verschiedener Geräte hochgeladen werden.
+
+
+
+ Wie viele Daten kann ich pro Minute hochladen?
+
+ Um die Datenbank nicht zu überlasten, können 6 Pakete mit Messwerten pro Minute hochgeladen werden. Du solltest daher darauf achten.
+
+
+
+ Wo werden die Daten gespeichert?
+
+ Die Daten werden auf dem Rechenzentrum der Uni Münster gespeichert.
+
+
+
+ Welche Geräte werden unterstützt?
+
+ Die openSenseMap empfängt, als offene Plattform, Daten von allen Geräten, die ihre Messdaten zur openSenseMap schicken.
+
+
+
+ Ich habe keine senseBox kann ich trotzdem Daten hochladen?
+
+ Nicht nur von der senseBox können Daten auf die openSenseMap geladen werden. Die openSenseMap unterstützt auch Messgeräte aus den Citizen Science Projekten [luftdaten.info](https://luftdaten.info/) und [HackAIR](https://www.hackair.eu/). Dank der [REST API](https://docs.opensensemap.org/) können jedoch von fast jedem IoT-Messgeräte Messwerte an die openSenseMap gesendet werden. Weitere Informationen und wie du dein Messgerät registrierst, findest du unter [https://docs.sensebox.de/](https://docs.sensebox.de/).
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/hackair.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/hackair.md
new file mode 100644
index 0000000..bb164a5
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/hackair.md
@@ -0,0 +1,41 @@
+---
+sidebar_position: 4
+title: hackAIR
+hide_title: false
+description: Anleitung eines hackAIR
+---
+# hackAIR
+
+Es besteht die Möglichkeit, die gemessenen Daten der hackAIR home Sensoren (Version 2) auch an die openSenseMap zu senden.
+
+Dazu musst du zuerst deinen hackAIR Sensor wie folgt [zusammenbauen](http://www.hackair.eu/hackair-home-v2/) und den [hackAIR-v2-advanced](https://github.com/mkraats/hackair-v2-advanced) aufspielen.
+
+Danach steht dir die openSenseMap-Konfiguration im Webinterface zur Verfügung.
+
+
+
+Danach muss eine senseBox auf der openSenseMap mit der korrekten Hardware registriert werden.
+
+## 1. Neue senseBox [registrieren](https://opensensemap.org/register)
+- User, Standort, Aufstellungsort und Namen ausfüllen. Gruppenkennzeichnung könnte z.B. hackAIR sein.
+- Unter dem Punkt **"Hardware"** im Schritt **"meine senseBox"** das Feld **"hackAIR"** ausklappen und die passende Sensorkonfiguration auswählen.
+
+
+
+
+- Registrierung abschließen.
+- **Wichtig:** `senseBox ID` kopieren. Dies ist eine 24 Zeichen lange Zeichenkette, die ungefähr so aussieht: *58a88c6b650831d8a3625e01*
+- **Wichtig:** `access token` kopieren. Dies ist eine 64 Zeichen lange Zeichenkette.
+- Wenn eine korrekte E-Mailadresse angegeben wurde, kommt die senseBox-ID auch nochmal per Mail. (zum Beispiel: *Deine senseBox-ID lautet: 58a88c6b650831d8a3625e01*)
+
+## 2. hackAIR Gerät konfigurieren
+Der `hackAIR home v2` Sensor lässt sich bequem über eine Webseite konfigurieren. Dazu schließt ihr das Gerät am Strom an.
+Danach sollte ein offenes Netzwerk mit dem Namen `ESP-wemos` verfügbar sein. Danach müsst ihr noch folgende Schritte durchführen:
+
+- Mit dem Browser die Konfigurationsseite des hackAIR home v2 aufrufen (http://192.168.4.1).
+- Unter dem Punkt **Configure WiFi** tragt ihr im Feld **openSenseMap senseBox ID** die *senseBox-ID* ein.
+- Unter dem Punkt **Configure WiFi** tragt ihr im Feld **senseBox access token** den *access token* ein.
+- Ganz unten auf der Seite auf **Save** klicken.
+
+## Fertig
+Der `hackAIR home v2` Sensor sollte nun die Daten an die openSenseMap senden.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/luftdaten.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/luftdaten.md
new file mode 100644
index 0000000..c6a6f81
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/luftdaten.md
@@ -0,0 +1,38 @@
+---
+sidebar_position: 5
+title: luftdaten.info
+hide_title: false
+description: Registrieren einer neuen senseBox auf der openSenseMap
+---
+# luftdaten.info
+
+Die Feinstaubsensoren des OK Lab Stuttgart [Luftdaten.info](https://luftdaten.info/) erlauben es, die gemessenen Daten auch an die openSenseMap zu senden. Um die Daten an die openSenseMap zu senden, muss zuallererst herausgefunden werden, welche Sensoren am Feinstaubsensor verwendet werden. Dies kann man am besten in dem Webinterface des Feinstaubsensors nachsehen. ([Abb.1](#abbildung-1-webinterface-feinstaubsensor))
+
+Danach muss eine senseBox auf der openSenseMap mit der gerade erhaltenen Konfiguration registriert werden.
+Sollten bei der Registrierung die falschen Sensoren ausgewählt worden sein, ist es am einfachsten die Box einfach wieder zu löschen und mit der korrekten Sensorkonfiguration neu zu registrieren.
+
+## 1. Neue senseBox registrieren
+Erstellen einer neuen senseBox unter: [registrieren](https://opensensemap.org/register)
+- User, Standort, Aufstellungsort und Namen ausfüllen. Gruppenkennzeichnung könnte z.B. Luftdaten sein.
+- Unter dem Punkt **"Hardware"** im Schritt **"meine senseBox"** das Feld **"luftdaten.info"** ausklappen und die passende Sensorkonfiguration auswählen. ([Abb.2](#abbildung-2-registrierung-opensensemap))
+- Registrierung abschließen.
+- **Wichtig:** senseBox ID kopieren. Dies ist eine 24 Zeichen lange Zeichenkette, die ungefähr so aussieht: *58a88c6b650831d8a3625e01*.
+- Wenn eine korrekte E-Mailadresse angegeben wurde, kommt die senseBox ID auch nochmal per Mail (zum Beispiel: *Deine senseBox-ID lautet: 58a88c6b650831d8a3625e01*).
+
+## 2. Feinstaubsensor konfigurieren
+Der Feinstaubsensor von Luftdaten.info lässt sich bequem über eine Webseite konfigurieren. Hierfür muss zuerst die IP des Gerätes im WLAN ausfindig gemacht werden. Dies gelingt am besten durch Ablesen im WLAN-Router.
+
+- Mit dem Browser die Konfigurationsseite des Feinstaubsensors aufrufen.
+- Unter dem Punkt **Weitere APIs** einen Haken bei **An openSenseMap senden** machen. In das Feld *senseBox-ID* die eigene senseBox-ID eintragen.
+- Ganz unten auf der Seite auf **Speichern** klicken.
+
+## Fertig
+Der Feinstaubsensor sollte nun seine Daten an die openSenseMap senden.
+
+## Abbildung 1: Webinterface Feinstaubsensor
+
+
+
+## Abbildung 2: Registrierung openSenseMap
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/manage.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/manage.md
new file mode 100644
index 0000000..57cb5d8
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/manage.md
@@ -0,0 +1,33 @@
+---
+sidebar_position: 6
+title: Verwalten von Boxen
+hide_title: false
+description: Verwalten von senseBoxen
+---
+
+# Verwalten von Boxen
+
+Jeder registrierte Nutzer kann beliebig viele Boxen auf der openSenseMap verwalten.
+Wenn die Einstellungen einer Box nachträglich geändert oder der Sketch heruntergeladen werden sollen, ist dies über das **Dashboard** möglich.
+Dieses ist in der Menuleiste unter dem User-Icon verfügbar, sobald ein Nutzer eingeloggt ist:
+
+
+
+Im Dashboard können...
+
+- [neue Boxen registriert werden](/opensensemap/opensensemap-register/),
+- bestehende Boxen angepasst oder entfernt werden,
+- Sketches zur Programmierung einer Box heruntergeladen werden.
+
+## senseBox anpassen
+Durch Klick auf den *ÄNDERN*-Button einer Box im Dashboard können beliebige Eigenschaften dieser Box nachträglich verändert werden.
+Nachdem in einem der Abschnitte Änderungen vorgenommen wurden, werden diese durch Klick auf das Diskettensymbol oben rechts übernommen.
+
+> ***Hinweis:*** *Wenn die Sensorkonfiguration geändert wurde, muss der Programmcode der senseBox in den allermeisten Fällen ebenfalls aktualisiert werden. Dieser ist unter dem Reiter Skript zu finden, um ihn in die Arduino IDE zu kopieren. Falls die WiFi-Version der senseBox verwendet wird, muss erneut die SSID und das WiFi Passwort im Sketch ersetzt werden!*
+
+## senseBox löschen
+Falls eine senseBox nicht mehr verwendet wird oder die Messungen dieser Box von der openSenseMap entfernt werden sollen, kann diese gelöscht werden.
+Dazu muss im Bearbeitungsmodus (s.o.) im Reiter *Allgemein* unter dem Feld "senseBox löschen" der Wert `DELETE` eingetragen werden.
+Anschließend erscheint unter dem Feld ein Button, durch welchen die senseBox und ihre Messungen gelöscht werden.
+
+> ***Achtung:*** *Hierdurch werden neben der senseBox alle hinterlegten Sensordaten unwiderruflich entfernt! Da die Messungen auch für eine nachträgliche Datenauswertung wertvoll sein können, muss abgewägt werden, ob die senseBox gelöscht werden sollte.*
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/mqtt.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/mqtt.md
new file mode 100644
index 0000000..158df33
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/mqtt.md
@@ -0,0 +1,27 @@
+---
+sidebar_position: 7
+title: MQTT Integration
+description: MQTT Integration für die openSenseMap
+hide_title: false
+---
+
+# MQTT Integration
+
+Diese Anleitung beschreibt die Möglichkeit, Messwerte über MQTT an die openSenseMap zu senden. Die openSenseMap ist in der Lage, sich als MQTT Client mit einem öffentlichen MQTT Broker zu verbinden. Einen eigenen MQTT Broker bietet die openSenseMap nicht an. Der openSenseMap MQTT Client verbindet sich, wenn nicht anders in den Verbindungseinstellungen angegeben, mit einer 13 Stelligen ID mit prefix `osem_` gefolgt von 8 zufälligen Ziffern und Buchstaben von A bis F.
+
+Für jede registrierte senseBox müssen separate MQTT Einstellungen vorgenommen werden. Für eine Verbindung mit einem Broker können die folgenden Parameter angegeben werden. Alle angegeben Einstellungen werden in der Datenbank der openSenseMap gespeichert. Es bietet sich also an, eigene Zugangsdaten einzurichten.
+
+## URL
+Die Adresse zum MQTT Broker sollte mit `mqtt://` oder `ws://` beginnen. Sollte der MQTT Broker eine Authentifizierung mittels Nutzername und Passwort benötigen, können diese in der URL kodiert werden. Die URL sollte dann wie folgt aussehen: `mqtt://username:password@hostname.of.mqtt.broker`.
+
+## Topic
+Das MQTT Topic unter dem die openSenseMap Nachrichten empfangen soll, kann zum Beispiel `home/temperatures/outside` lauten.
+
+## Nachrichtenformat
+Hier sollte zwischen `json` und `csv` ausgewählt werden. Die Formate entsprechen JSON-Array und csv dokumentiert in [docs.opensensemap.org](https://docs.opensensemap.org/#api-Measurements-postNewMeasurements).
+
+## Dekodierungsoptionen
+Erwartet ein JSON Objekt. Nur für Nachrichtenformat json: Erlaubt es, unter dem Schlüssel jsonPath einen JSONPath Ausdruck anzugeben, welches die Position der JSON kodierten Daten angibt. Beispiel: `{"jsonPath":"$.payload_fields"}`.
+
+## Verbindungsoptionen
+Erwartet ein JSON Objekt. Erlaubt es, dem MQTT Client Verbindungsoptionen zu übergeben. Die Schlüssel `keepAlive`, `reschedulePings`, `clientId`, `username` und `password` von [https://github.com/mqttjs/MQTT.js#client](https://github.com/mqttjs/MQTT.js#client) sind erlaubt.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/register.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/register.md
new file mode 100644
index 0000000..e723141
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/register.md
@@ -0,0 +1,30 @@
+---
+sidebar_position: 8
+title: Registrieren einer neuen senseBox
+description: Registrieren einer neuen senseBox auf der openSenseMap
+hide_title: false
+---
+
+Um eine neue senseBox auf der openSenseMap zu registrieren, muss zunächst unter *Anmelden* ein Nutzer-Account erstellt werden.
+Anschließend ist unter dem User-Logo oben rechts das Dashboard zu finden, über welches senseBoxen hinzugefügt und [verwaltet](/opensensemap/opensensemap-manage/) werden können.
+
+Unter *Neue senseBox* kann nun eine neue senseBox registriert werden. Die folgenden Angaben sind notwendig:
+
+- **Name der senseBox**: z.B. der Standort
+- **Aufstellungsort**: dient der Filterung von Boxen
+- **Standort**: kann über die Karte ausgewählt werden
+- **Modell**: bestimmt die Sensorkonfiguration
+
+Es gibt eine Vorauswahl für verschiedene Modelle.
+Falls eine nicht vorhandene Sensorkonfiguration vorliegt, können einzelne Sensoren unter *Manuelle Konfiguration* von Hand hinzugefügt werden.
+
+Nachdem die Registrierung abgeschlossen wurde, wird ein Arduino-Sketch angezeigt, welcher die angegebenen Sensoren ausliest und deren Daten regelmäßig zur openSenseMap überträgt.
+Um diesen auf die senseBox zu übertragen, wird die [Arduino IDE](https://www.arduino.cc/en/Main/Software) benötigt, eine exemplarische Installations-Anleitung für die *senseBox:home* ist [hier](https://home.books.sensebox.de/de/software_installation.html) zu finden.
+
+## Erweiterte Konfiguration
+Es besteht die Möglichkeit neben der [HTTP REST API](https://docs.opensensemap.org/) auch andere Schnittstellen zur Datenübertragung zu nutzen.
+Einstellungen hierfür müssen unter dem entsprechenden Reiter im Abschnitt *Erweitert* vorgenommen werden.
+Detaillierte Anleitungen dazu sind hier zu finden:
+
+> - [MQTT](mqtt_client.md)
+> - [TheThingsNetwork](ttn_integration.md)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/scriptable.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/scriptable.md
new file mode 100644
index 0000000..ef98609
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/scriptable.md
@@ -0,0 +1,19 @@
+---
+sidebar_position: 11
+title: openSenseMap iOS Widget
+description: Ein einfaches Widget für iOS 14 Geräte
+---
+
+
+
+Über die App [Scriptable](https://apps.apple.com/de/app/scriptable/id1405459188) lassen sich unter iOS 14 schnell und einfach kleine Widgets bauen. Mit dem folgenden Code könnt ihr euch ein kleines Widget zum Abrufen der Messwerte eurer senseBox erstellen. Kopiert dazu einfach eure senseBox ID und die Sensor ID in das Script und öffnet dieses in Scriptable.
+
+Wenn ihr folgende URL direkt über ein iOS Gerät öffnet, auf dem App installiert ist, wird das Widget automatisch hinzugefügt.
+[scriptable:///run?scriptName=Osem%20Widget](scriptable:///run?scriptName=Osem%20Widget)
+
+Alternativ könnt ihr den Code über folgenden [Link](https://gist.github.com/mariopesch/61fc8167b84776225ce4d7c7738bba9b) abrufen und kopieren.
+
+Viel Spaß damit!
+
+
+> - [Scriptable](https://apps.apple.com/de/app/scriptable/id1405459188)
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/security.md b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/security.md
new file mode 100644
index 0000000..12f36d2
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/misc/opensensemap/security.md
@@ -0,0 +1,22 @@
+---
+sidebar_position: 10
+title: Sicherheit
+description: Sicherer Datenupload zur openSenseMap
+---
+# Sicherheit
+
+Es besteht die Möglichkeit, deine senseBox mit einem Token vor falscher Dateneingabe zu schützen. Diese Option lässt sich auf der openSenseMap in deinem Dashboard pro senseBox aktivieren oder deaktivieren. Zudem hast du dort die Möglichkeit, einen neuen Token zu generieren, falls dieser in die falschen Hände gefallen sein sollte.
+
+
+
+## Wie wird der Token genutzt?
+
+Sobald du die Option "Authentifizierung aktivieren" ausgewählt hast, müssen alle POST-Requests für deine senseBox an die Endpunkte `https://api.opensensemap.org/boxes/:senseBoxId/:sensorId` und `https://api.opensensemap.org/boxes/:senseBoxId/data` mit einem Authorization-Header versehen werden. Requests ohne diese Header oder mit einem falschen Token werden von der openSenseMap nicht mehr akzeptiert. So ein Header sieht wie folgt aus:
+
+```
+'Authorization' : 'YOUR_BOX_ACCESS_TOKEN'
+```
+
+## MQTT und TTN
+
+Solltest du die Datenübertragung per MQTT oder TTN durchführen, brauchst du diesen Authentifizierungs-Token zwar nicht, es ist aber trotzdem ratsam, die Authentifizierung zu aktivieren, um zu verhindern, dass Dritte Daten zu deiner senseBox senden.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/benutzung.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/benutzung.mdx
new file mode 100644
index 0000000..fde7d80
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/benutzung.mdx
@@ -0,0 +1,18 @@
+---
+title: Setting Up the App
+---
+
+# Setting Up the App
+
+Once the senseBox:bike app is successfully connected to your senseBox:bike, you gain access to live data displayed during your bike ride.
+This live data includes a variety of environmental parameters and information about the condition of your bike.
+
+
+## Live Data
+You have the option to record this data locally and review it later. However, if you want to upload the data to openSenseMap simultaneously, you must first link your user account with the app. This function is located in the menu of the senseBox:bike app.
+
+After successfully linking your account, the data will be automatically uploaded to openSenseMap during recording. This allows you to share your collected data with other users and contribute to environmental research and mapping.
+
+## Private Zones
+
+Furthermore, the senseBox:bike app offers the possibility to set up private zones. In these zones, such as your home, no data will be collected or uploaded to openSenseMap. This ensures your privacy and allows you to customize data collection according to your individual needs. You can find and configure this function in the settings menu of the app.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/download.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/download.mdx
new file mode 100644
index 0000000..82955b5
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/download.mdx
@@ -0,0 +1,35 @@
+---
+title: Download
+---
+
+import GooglePlayBadge from "@site/static/img/bike/app/google-play-badge.png";
+import iosPlayBadge from "@site/static/img/bike/app/apple-store-badge.png";
+import GoogleQRCode from "@site/static/img/bike/app/google-qr-code.png"
+import iosQRCode from "@site/static/img/bike/app/apple-qr-code.png"
+
+# Download
+
+Before you can start using your senseBox:bike, make sure you have downloaded the senseBox:bike app to your smartphone. This app allows you to visualize and control the data from your senseBox:bike.
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/setup.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/setup.mdx
new file mode 100644
index 0000000..1ead72e
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/app/setup.mdx
@@ -0,0 +1,3 @@
+---
+title: Installation
+---
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/bike/bike-overview.md b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/bike-overview.md
new file mode 100644
index 0000000..6d49aac
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/bike-overview.md
@@ -0,0 +1 @@
+Hello from bike
\ No newline at end of file
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/bike/halterung/installation.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/halterung/installation.mdx
new file mode 100644
index 0000000..78a7905
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/bike/halterung/installation.mdx
@@ -0,0 +1,44 @@
+---
+title: Installation
+---
+import halterungSattel from "@site/static/img/bike/halterung/halterungSattel.png"
+import halterungGepaeck from "@site/static/img/bike/halterung/halterungGepaeck.png"
+
+# Installation
+
+## Step 1: Preparation
+- Unpack the delivery and check the contents for completeness.
+- Ensure that you have received both the seat post mount and the luggage rack mount.
+
+
+## Step 2: Mounting the Brackets
+
+
+
+
+
Seat post mount
+
+
+
+
Luggage rack mount
+
+
2 sensor, and RGB LED are attached to the sensor mount. Later, it will be connected to the mainboard and tested.
+
+First, attach the four middle spacers on the top side:
+
+
+
+Next, you need 6 short spacers and attach them as follows on the same side of the PCB mount:
+
+
+
+Now attach 5 short spacers on the underside:
+
+
+
+Now attach the CO2 sensor and the RGB LED to the underside:
+
+
+
+
+Finally, attach the frosted plexiglass over the RGB LED on the top side and the display on the other end. Make sure the display is oriented correctly:
+
+
+
+Your result should look like this:
+
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-2.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-2.mdx
new file mode 100644
index 0000000..7f54c5c
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-2.mdx
@@ -0,0 +1,35 @@
+---
+title: Connect components to the MCU
+---
+
+# Connect components to the MCU
+
+Insert the four long spacers into the corner holes of the senseBox MCU:
+
+
+
+Before attaching the board to the bottom of the case, first remove the protective film from both sides of the large plexiglass plate:
+
+
+
+Now place the MCU on the plate so that the corners fit into the four drilled holes and the board does not cover the elongated cutouts of the case bottom:
+
+
+
+Use the black plastic clips to secure it. Insert them from below through the plexiglass plate and then through the board. Press them firmly until they snap into place:
+
+
+
+
+Now insert a connection cable for the RGB LED into one of the digital ports and two connection cables for the display and CO2 sensor into one of the three I2C slots:
+
+
+
+Now you can connect the cables to the CO2 sensor, the display, and the RGB LED. Make sure that the RGB LED is connected to the digital port, and the display and CO2 sensor are each connected to one of the I2C ports:
+
+
+
+
+Now you can connect the sensor holder to the MCU using the long spacers. Make sure that the holder is not attached the wrong way around and is exactly parallel to the MCU:
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-3.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-3.mdx
new file mode 100644
index 0000000..e890786
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-3.mdx
@@ -0,0 +1,24 @@
+---
+title: Installing and Testing the Software
+---
+
+# Installing and Testing the Software
+
+To be able to test the traffic light, you must download the programme file [here](@site/static/arduino-sketches/co2-trafficlight/co2ampel_watchdog/co2ampel_watchdog.bin) and transfer it to the senseBox. To do this, connect the measuring station to a PC using the USB cable
+with the USB cable. There is a red button next to the USB port on the MCU. Press it twice in succession.
+
+
+
+After that, the senseBox should appear as a new removable drive in your operating system.
+
+
+
+Now copy the file _sensebox_co2_ampel.bin_ from your download folder to the "SENSEBOX" removable drive:
+
+
+
+The station will then restart automatically and should display the first measurement values on the screen.
+
+
+
+If the display remains black, press the reset button mentioned above once to restart the program on the station.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-4.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-4.mdx
new file mode 100644
index 0000000..2132ded
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-4.mdx
@@ -0,0 +1,15 @@
+---
+title: Installing the senseBox in the Case
+---
+
+# Installing the senseBox in the Case
+
+Next, insert the side walls. **_DO NOT_** remove the film from the side parts, as they will stay in place more firmly when assembled:
+
+
+
+Finally, remove the protective film from both sides of the case cover and attach it so that the spacers and side parts snap into place:
+
+
+
+Now the CO2 traffic light is ready for use! You can now hang it up and connect it to a power outlet using the USB cable and power adapter.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/co2Ampel-overview.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/co2Ampel-overview.mdx
new file mode 100644
index 0000000..4af3c64
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/co2Ampel/co2Ampel-overview.mdx
@@ -0,0 +1,43 @@
+---
+title: CO2 Traffic Light
+---
+
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText";
+import image1 from "@site/static/img/co2ampel/image1.jpg";
+import image2 from "@site/static/img/co2ampel/image2.jpg";
+
+# CO2 Traffic Light
+
+
+
+
+
+
+ senseBox Microcontroller (MCU)
+ CO2 Sensor
+ RGB LED
+ Display
+ 3x JST Connection Cables
+ USB Cable
+ USB Power Supply
+
+
+ Case Parts
+
+ 11x Short Spacers
+ 4x Medium Spacers
+ 4x Long Spacers
+ 2x Black Plastic Clips
+ PCB Sensor Holder
+ 6x Plexiglass Plates
+ 1x Piece of Frosted Plexiglass
+
+
+
+
+```
+
+Nach einem Logout und erneutem Login sollte der Arduino aus der Arduino IDE programmierbar sein!
+
+## Arduino Bibliotheken installieren
+Um die Sensoren und die Netzwerkkarte nutzen zu können, müssen noch ein paar Bibliotheken installiert werden. Ein zip-Archiv mit allen benötigten Bibliotheken findest du [hier](https://github.com/sensebox/resources/raw/master/libraries/senseBox_Libraries.zip).
+
+Lade dieses zip-Archiv herunter und integriere nun die beiden Ordner `examples` und `libraries` aus dem Archiv in deinen Arduino Ordner.
+Wenn ihr gefragt werdet ob bestehende Dateien ersetzt werden sollen, folge den Anweisungen unten auf der Seite.
+
+
+
+
+Setze nun wie unten dargestellt im ersten Dialogfeld den Haken unten und bestätigt mit „Ja“. Daraufhin öffnet sich ein neues Fenster, in dem du wieder den Haken setzt, und „Kopieren und ersetzen“ auswählst.
+
+
+
+
+Das folgende Video zeigt den Kopiervorgang noch einmal im Detail:
+
+VIDEO
+
+## Sensoren testen
+Die Sensoren der senseBox:home können nun auf funktionstüchtigkeit und getestet werden.
+Hierzu gibt es einen Sketch, welcher mit den zuvor Arduino-Bibliotheken installiert wurde.
+Vorraussetzung für den test ist natürlich, dass die Sensoren mit dem Arduino verbunden wurden ;)
+
+1. Arduino Anwendung starten
+ - Es kann sein, dass nach dem Start eine Meldung über neue Updates erscheint. Fall du die Version 1.6.5 oder höher installiert hast, kannst du dies überspringen.
+2. unter `Werkzeuge` → `Board` das `Arduino Uno` auswählen
+3. unter `Werkzeuge` → `COM-Port` den entsprechenden Anschluss wählen
+ - Falls mehrere Auswahlmöglichkeiten angezeigt werden, musst du zuerst den richtigen COM-Port im Geräte Manager finden, oder alle Ports ausprobieren.
+
+Ladet nun das Programm, um die Sensoren zu testen und übertragt es auf die Messstation:
+
+1. in der Menüleiste `Datei` → `Beispiele` → `senseBox` → `_01_sensor_test` auswählen
+2. das Programm über das **Pfeil** Icon auf den Mikrocontroller laden
+3. warten bis das Programm übertragen wurde
+4. den seriellen Monitor über das **Lupe** Icon öffnen
+
+
+
+
+Du kannst durch experimente prüfen, ob sich die gemessene Temperatur, Luftfeuchtigkeit oder Beleuchtungsstärke verändern.
+Der Luftdruck lässt sich nicht ohne weiteres beeinflussen. Er sollte grob, je nach Höhenlage und Wetterverhältnissen, zwischen 600 hPa und 1000 hPa liegen.
+Die Intensität des UV-Lichts kann nur mit speziellen Lampen oder durch direkte Sonneneinstrahlung getestet werden.
+In einem geschlossen Raum sollte keine bzw. nur minimale UV-Strahlung gemessen werden können.
+
+## Verbindung zur openSenseMap testen
+Nach dem selben Schema kann noch die Internetverbindung der senseBox:home getestet werden:
+
+1. den seriellen Monitor (Fenster mit den Messwerten) schließen
+2. wenn ein Ethernet Modell vorliegt:
+ - ein Netzwerkkabel von eurem Heimnetzwerk mit der senseBox verbinden
+ - in Menüleiste `Datei` → `Beispiele` → `senseBox` → `_02_internet_test` auswählen
+2. mit WLAN-Modell:
+ - in Menüleiste `Datei` → `Beispiele` → `senseBox` → `_03_wifi_internet_test`
+ - ganz oben in der Datei `03_wifi_internet_test`die WLAN Zugangsdaten eintragen (Netzwerk-Name und Passwort)
+3. das Programm über das **Pfeil** Icon auf den Mikrocontroller laden
+4. den seriellen Monitor über das **Lupe** Icon starten
+
+Wenn die Verbindung klappt, bekommst du eine entsprechende Meldung im seriellen Monitor angezeigt.
+
+
+
+
+# Web-Integration
+Hier wird die Einbindung der senseBox in unser Sensornetzwerk durch die Registrierung auf der openSenseMap beschrieben.
+
+## Registrierung auf der openSenseMap
+Unter `https://opensensemap.org/register` kann eine neue Sensorstation für das openSenseMap Sensornetzwerk registriert werden.
+
+Während der Registrierung wirst du nach einem Hardware Setup gefragt. Wähle dort die „senseBox:home“ aus und setze danach je nach Variante den Haken bei „senseBox:home (Ethernet)“ oder „senseBox:home (WLAN)“.
+
+Ein Software-Programm für einen Arduino Mikrocontroller ist an der Dateiendung `.ino` zu erkennen. Eine solche Datei wird benötigt, um eure senseBox mit der openSenseMap im Internet zu verbinden. Den passenden Sketch bekommst du zusammen mit einer E-Mail zugeschickt, wenn die Station auf der openSenseMap registriert wurde.
+
+## Programm auf die Station laden
+Nachdem du den `.ino` Anhang der Email heruntergeladen hast, muss dieses Programm auf deine senseBox geladen werden. Wie man genau ein Programm auf den Mikrocontroller lädt, ist [hier](software_installation.md) ausführlich erklärt worden. Hier die Schritte in der Übersicht:
+
+- Arduino Anwendung öffnen
+- In der Menüleiste `Datei` → `Öffnen` auswählen und die `sensebox.ino` Datei auswählen
+- Dialog mit "Ja" bestätigen
+- Das Programm über das **Pfeil** Icon auf den Mikrocontroller laden
+- Warten bis das Programm übertragen wurde
+
+Wenn alles richtig gelaufen ist, kannst du nun auf der openSenseMap deine Station auswählen und verfolgen, wie Messungen kontinuierlich übertragen werden!
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/aufbau-video.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/aufbau-video.md
new file mode 100644
index 0000000..ad74e87
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/aufbau-video.md
@@ -0,0 +1,19 @@
+---
+sidebar_position: 1
+title: senseBox:home assembly Video
+description: Assembly of the senseBox:home as a Video
+---
+# senseBox:home assembly Video
+
+> [](https://www.youtube.com/watch?v=dUuRfZI39U8&ab_channel=senseBox)
+
+This tutorial shows you how to assemble your senseBox:home.
+The video is divided into different chapters, and you can jump directly to the individual chapters using the links:
+
+Inserting the senseBox MCU into the case: 0:10
+Attaching the WiFi-Bee: 0:46
+Assembling the radiation protection housing with temperature and humidity sensor: 1:18
+Assembling the fine dust sensor (SDS011): 2:18
+Connecting the external sensors and the USB cable: 4:34
+Connecting the mounting level for sensors in the case. Connecting the air pressure and light sensor: 5:56
+Final steps: 7:49
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-aufstellen.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-aufstellen.md
new file mode 100644
index 0000000..47e7f58
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-aufstellen.md
@@ -0,0 +1,36 @@
+---
+sidebar_position: 1
+title: "Setting up the senseBox:home"
+description: Setting up the senseBox:home
+---
+# Setting up the senseBox:home
+
+To ensure successful data transmission and maximize data comparability, here are some tips to consider when setting up the senseBox:home.
+
+## Technical requirements at the installation site
+
+1. Power Supply: The senseBox requires a continuous power supply. The supplied cable has a length of 3 meters.
+
+2. Data Transmission: The senseBox needs a way to continuously transmit data to the internet. The senseBox can be ordered with WiFi, LoRa, or LAN as transmission options. Depending on the version, access to the corresponding network (WiFi network, TheThingsNetwork (LoRa), or LAN cable to the router) is required.
+
+## Installation Site
+
+1. There is no right or wrong place to set up the senseBox. We encourage you to set up the senseBox where you are most interested in the measurements.
+
+2. The senseBox community appreciates good documentation on the openSenseMap. This includes:
+ * A picture of the station
+ * Characteristics of the installation site, such as height, shelter, orientation
+ * Other descriptions
+
+3. From a scientific perspective, there is extensive research on optimal measurement data collection. Many different factors influence the quality of the measurements. We refer to the following points:
+ * Different positions naturally change the measurements. For example, placing the senseBox directly in the sun can result in very high temperature readings due to radiation.
+ * It is also better to place the senseBox a bit away from the house wall (e.g., on a balcony railing) to avoid distortion from heat dissipation. Detailed information on meteorological data collection can be found at the following link: [https://globalcryospherewatch.org/bestpractices/docs/wmo_8-2012_en.pdf](https://globalcryospherewatch.org/bestpractices/docs/wmo_8-2012_en.pdf)
+
+4. The quality of the measurement data also depends on the placement of the sensors within the senseBox. This information can be found in our construction manuals: [www.sensebox.de/en/material](https://sensebox.de/en/material)
+
+## Maintenance
+
+1. It is essential to avoid condensation inside the senseBox. Therefore, a visual check of the senseBox is recommended at least once a month. If necessary, the silica gel should be replaced.
+2. The senseBox should be regularly cleaned of any accumulated dirt.
+
+You can find more tips at [www.sensebox.de](https://www.sensebox.de) and in our forum [forum.sensebox.de](https://forum.sensebox.de/).
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-1.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-1.md
new file mode 100644
index 0000000..31e3285
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-1.md
@@ -0,0 +1,172 @@
+---
+sidebar_position: 5
+title: "Step 1: Hardware assembly"
+description: Step 1 for assembling the senseBox:home.
+---
+
+# Step 1: Hardware assembly
+
+## Welcome to the tutorial for assembling the senseBox:home
+
+:::info
+Note: Since December 2020, a new acrylic case has been used. Only the first step differs from the previous assembly. All other steps can be carried out analogously to the old case.
+:::
+Since the senseBox is a modular kit, individual steps for sensors may vary or even be skipped in your case.
+
+## Inserting the MCU into the Case
+
+In the first step, the MCU is inserted into the case. The system has been slightly revised over time, so a new mounting system has been used since December 2020.
+
+### senseBox:home from December 2020
+
+senseBoxes purchased since December 2020 are equipped with a new case. The assembly differs only slightly in the first steps from the old version. First, we get an overview of the available components.
+
+
+
+The protective film can now be removed from the acrylic plate.
+
+
+
+Now screw the acrylic plate into the case. Make sure that the opening for the USB port aligns with the opening of the case.
+After that, you can use the black screws to attach the senseBox MCU to the acrylic plate. Again, ensure that the USB port is aligned with the opening of the case.
+
+
+
+
+
+The following steps can be carried out analogously to the old case/mounting system.
+
+### senseBox:home until November 2020
+
+First, we will show how to insert the microcontroller into the case.
+
+
+
+Take the case and align it with the drilled hole facing downwards. Place the green senseBox microcontroller on the opposite side so that the red reset button and the USB port are facing forward.
+
+
+
+Now, take the two smaller screws included and attach the PCB to the housing through the middle mounting holes.
+If the PCB has some play, it’s not a problem.
+
+## Attaching the WiFi-Bee
+
+Next, we’ll demonstrate how to attach the WiFi-Bee.
+
+Each Bee module includes a marking that indicates the correct orientation.
+If you have a different data transmission module, such as LAN or LoRaWAN, the attachment process is the same.
+
+
+
+The WiFi-Bee is mounted on XBee Port 1 and carefully pressed into the socket so that all the Bee's pins are securely inserted.
+
+
+
+## Assembling the Radiation Shield Housing
+
+Now, we’ll show how to assemble the radiation shield housing, where the temperature and humidity sensor will be installed.
+The radiation shield includes some mounting parts for attaching it externally, but we won’t need them initially.
+
+
+
+First, thread a long senseBox cable through the opening at the base of the radiation shield and connect it to the temperature and humidity sensor inside.
+
+The sensor can also be secured to the stand with tape or a cable tie.
+The radiation shield housing ensures good air circulation and protects the sensor from weather conditions.
+
+Now, assemble the radiation shield housing. Later, the sensor will be connected to the senseBox microcontroller.
+
+## Assembling the Particulate Matter Sensor
+
+
+
+Next, we’ll demonstrate how to assemble the particulate matter sensor.
+
+
+
+
+
+The housing for the sensor must have openings for cables and air intake.
+These openings should be on opposite sides with two predefined breakpoints each.
+
+For safety reasons, we recommend drilling these openings.
+Theoretically, you can also punch them out at the breakpoints with a blunt object.
+
+Next, place the particulate matter sensor inside the housing,
+ensuring that the cable connection and air intake nozzle align with the newly created openings.
+
+
+
+The cable for the particulate matter sensor has a different color and should be connected to the larger connector on the sensor.
+
+Then, attach the cable glands.
+Disassemble the cable gland and arrange the individual parts in the correct order. Then screw them back together securely.
+
+
+
+On the other side of the sensor, attach the hose to the air intake nozzle.
+
+> The air intake nozzle now comes with a filter. This filter prevents coarse dirt and insects from entering the sensor.
+> Use a cable gland to seal the hose. After arranging everything correctly, a bit of pressure is required to attach the hose to the nozzle.
+> Finally, put on the lid, and the particulate matter sensor is ready.
+
+
+
+## Connecting External Sensors to the MCU
+
+
+
+The external sensors, including the temperature and humidity sensor and the particulate matter sensor, are now connected to the MCU.
+First, take the cable from the radiation shield and thread it through the last cable gland into the housing.
+
+Connect the cable to one of the slots labeled I2C/Wire.
+
+
+
+Next, take the cable from the particulate matter sensor and thread it through the cable gland.
+This cable goes into one of the slots labeled UART/Serial.
+
+
+
+## Connecting the USB Cable
+
+
+
+Finally, connect the mini-USB cable, which is used to program the microcontroller and power the senseBox during operation.
+Please note that the mini-USB port is sensitive and exposed to the leverage effect of the cable.
+Therefore, avoid pulling on the USB cable.
+
+
+
+## Connecting Internal Sensors to the MCU
+
+
+
+After connecting the external sensors, the remaining sensors inside the housing are installed.
+First, assemble a mounting level. Insert four spacers into the outer holes of the microcontroller.
+
+The spacers have a snap mechanism. If you need to remove them, press lightly on the head instead of forcing them out.
+Next, connect two senseBox cables to the I2C/Wire slots for the air pressure sensor and light sensor.
+
+
+
+Thread the cables through the middle openings of the mounting plate.
+
+
+
+Then, press the mounting plate onto the spacers and connect the cables to the sensors.
+Equip each sensor with two spacers and attach them to the mounting plate.
+
+If you have chosen a light sensor, place it as centrally as possible in the housing to obtain accurate measurements.
+The air pressure sensor can be installed in the outer slot.
+
+
+
+Finally, secure the lid with screws and place a silica gel packet inside the housing for additional moisture protection.
+
+
+
+
+
+Now, screw in the quick-release fasteners to seal the senseBox.
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-2.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-2.md
new file mode 100644
index 0000000..680da67
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-2.md
@@ -0,0 +1,40 @@
+---
+sidebar_position: 6
+title: "Step 2: Register on openSenseMap"
+description: Step 2 for setting up the senseBox:home
+---
+
+# Step 2: Register on openSenseMap
+
+After your measurement station has been assembled, it will be registered on [openSenseMap](https://opensensemap.org).
+
+openSenseMap is a platform to store, compare, and visualize sensor data. Just take a look at it. Go to [www.opensensemap.org](https://www.opensensemap.org) and discover a huge pool of sensor data from around the world. Not only senseBoxes send data to openSenseMap, but also other microcontrollers with sensors. How the individual functions of openSenseMap and its interfaces work can be found [here](https://docs.sensebox.de/opensensemap/).
+
+
+
+## 1. User Account Registration
+Go to [www.opensensemap.org](https://www.opensensemap.org) and create an account. To do this, click on "Login" in the top right corner and then go to "Sign up". You need a valid email address to register. After successful registration, you will receive an email with a confirmation link. Please click the link to complete the registration.
+
+
+
+## 2. Create a new senseBox
+After successful registration, you can start creating your senseBox. Click on "New senseBox / Neue senseBox" in your menu and accept the terms of use. Then follow the registration instructions and provide the following information:
+
+* A freely selectable name for the senseBox
+* The environment (Exposure) where you want to place your senseBox
+* The location where you want to place your senseBox (you can also determine your location automatically)
+
+
+
+Since openSenseMap is open to all types of senseBoxes, you will be asked about the hardware you are using. Select *senseBox:home V2* and the data transmission module you are using. If you want to send your data to openSenseMap via LoRa, select LoRa as the "Connection type". Then you can enter your LoRa settings in the "Advanced" tab. Here you need to enter the Application ID and Device ID that you specified on [TheThingsNetwork](www.thethingsnetwork.org). More information can be found [here](/sensebox-home-erweiterungen/home-erweiterung-lora/).
+
+
+
+For some sensors, you need to select which port you have connected them to.
+
+
+
+## 3. Summary of the Registration and Email
+When you have completed the registration, you need to agree to the publication of your data once again. Then you will receive an overview of your registration. There you will see your senseBox ID, your sensor IDs, and the Arduino code.
+
+The senseBox ID is a unique identifier for your senseBox. With it, you can find your senseBox, for example, via the URL (opensensemap.org/explore/ENTER-YOUR-SENSEBOX-ID-HERE) or track it in datasets. It is also used for various applications and functions related to the senseBox and openSenseMap.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-3.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-3.md
new file mode 100644
index 0000000..a82b5ac
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/aufbau/home-schritt-3.md
@@ -0,0 +1,35 @@
+---
+sidebar_position: 7
+title: "Step 3: Transfer Program Code"
+description: Step 3 for setting up the senseBox:home
+---
+
+# Step 3: Transfer Program Code
+
+After registration, the program code must be copied to the senseBox. If you have a senseBox with WiFi-Bee or Lan-Bee, you can compile the program code online quickly and easily and transfer it via drag-and-drop. You don't need to install any software on your computer.
+
+## Compile Online
+
+The easiest way to get your code onto the senseBox is to use our online compiler. You need to provide some information in the form. If something does not fit your individual setup of the senseBox, you can simply leave the field blank. Finally, press "Compile" and a .BIN file will be downloaded by your browser.
+
+
+
+### Transfer to the senseBox MCU
+
+Connect your senseBox MCU to your computer and double-click the red button, it will be recognized as a removable drive. By clicking "Compile Code" in the web interface, your program code will be compiled on the server and a .BIN file will be offered for download. Depending on the operating system you are using, the copying process differs.
+
+#### Copying on Windows
+
+On Windows, you can simply drag and drop the created .BIN file onto the removable drive SENSEBOX . The red LED on the button will flicker briefly and then the board will restart itself and execute your program code.
+
+#### Copying on MacOS
+
+On MacOS, copying the .BIN file via drag and drop unfortunately does not work at the moment. The following options are available to copy the file to the senseBox:
+
+- Use the [senseBox Copy Tool](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip). Unzip the ZIP file and start the program contained within.
+- Use an alternative file manager such as [muCommander](http://www.mucommander.com/)
+- Copy the file via Terminal using the dd command (recommended only for experienced users!)
+
+#### Copying on Linux
+
+On Linux, you can simply drag and drop the created .BIN file onto the removable drive SENSEBOX . The red LED on the button will flicker briefly and then the board will restart itself and execute your program code.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/circuitpython.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/circuitpython.md
new file mode 100644
index 0000000..82d96ff
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/circuitpython.md
@@ -0,0 +1,156 @@
+---
+date: 2021-01-28
+title: Programming with Circuit Python
+categories: misc
+description: Program your senseBox MCU with Python
+type: Document
+resources:
+ - name: "Circuit Python"
+ link: https://circuitpython.org/board/sensebox_mcu/
+ - name: "Libraries"
+ link: "https://circuitpython.org/libraries"
+ - name: senseBox MCU CircuitPython on Github
+ link: "https://github.com/adafruit/circuitpython/tree/main/ports/atmel-samd/boards/sensebox_mcu"
+image1: /images/2021-01-28-rtc-modul/rtc.png
+---
+
+# Programming with Circuit Python
+CircuitPython is a programming language that simplifies experimenting and programming on basic microcontroller boards. Once the board is set up, programming can be done using any text editor. The senseBox MCU is CircuitPython compatible.
+
+## Installation of Circuit Python
+
+The latest version can always be downloaded from the official [CircuitPython Website](https://circuitpython.org/board/sensebox_mcu/).
+Connect the senseBox MCU to your computer using a USB cable and put it into programming mode by double-clicking the red reset button. Copy the .uf2 file to your senseBox MCU. The senseBox will then be recognized as a new device named "CircuitPy".
+
+## Programming
+
+Open/create the file Code.py on the "CircuitPy" drive and copy the following code as the first example:
+
+```python
+import board
+import digitalio
+import time
+
+led = digitalio.DigitalInOut(board.GREEN_LED)
+led.direction = digitalio.Direction.OUTPUT
+
+while True:
+ led.value = True
+ time.sleep(0.5)
+ led.value = False
+ time.sleep(0.5)
+```
+
+After saving the file, the code will be executed immediately, and the small LED next to the reset button will start blinking. You can now easily modify and save the code, and it will be executed directly.
+
+Alternatively, you can use the following web editor (only with Google Chrome):
+[https://circuitpython.sensebox.de/](https://circuitpython.sensebox.de/)
+
+Many more details about programming with CircuitPython are available on the official [CircuitPython Website](https://circuitpython.org/awesome).
+
+## Libraries
+
+Most components of the senseBox have libraries available that can be used. However, it is important to note that the libraries must be copied to the CIRCUITPY drive. A total of 48Kb of storage is available for this purpose.
+
+> Note: Due to the limited storage space available for libraries, more complex projects such as the CO2 traffic light or the environmental monitoring station cannot be implemented with CircuitPython. However, the storage space should be sufficient to read individual sensors.
+
+The complete package with the libraries can be downloaded [here](https://circuitpython.org/libraries). Make sure to download the _.mpy version_.
+
+### Supported Components
+
+Since some components do not have libraries available or the libraries are too large, here is a brief list of the tested components:
+
+:::info
+The table may be incomplete and is continuously updated. If you have tested components that are not yet listed, we would appreciate a short feedback.
+:::
+
+| Component | Library Available | Test Successful |
+| ------------------- | ----------------- | ---------------------------------------- |
+| BME680 Environmental Sensor | Yes | Yes |
+| CO2 Sensor | Yes | Yes |
+| BMP280 | Yes | Yes (adjustment of the I2C address necessary) |
+| HDC1080 | No | No |
+| BMX055 | No | No |
+| HC-SR04 Ultrasonic | Yes | |
+| WS2818 RGB LED | Yes | Yes |
+| Display | Yes | Yes |
+| SD-Bee | Yes | Yes |
+| LoRa-Bee | | |
+| WiFi-Bee | No | WiFi is not supported by CP |
+
+## Serial Monitor
+
+To access the Serial Monitor via the terminal
+
+```
+ls /dev/tty.*
+```
+
+alle verfügbaren Ports auflisten lassen. Die senseBox MCU sollte als usbmodemXXX auftauchen.
+
+```
+screen /dev/tty.board_name 115200
+```
+
+## SD Card
+
+To load libraries from the SD card, copy the following code as `sdmount_lib.py` onto the SD card.
+
+```python
+import sys
+
+import adafruit_sdcard
+import board
+import busio
+import digitalio
+import storage
+from digitalio import DigitalInOut, Direction
+
+xb2_pwr = DigitalInOut(board.XB2_PWR)
+xb2_pwr.direction = Direction.OUTPUT
+xb2_pwr.value = False
+
+
+# Connect to the card and mount the filesystem.
+spi = busio.SPI(board.SCK, board.MOSI, board.MISO)
+cs = digitalio.DigitalInOut(board.XB2_CS)
+sdcard = adafruit_sdcard.SDCard(spi, cs)
+vfs = storage.VfsFat(sdcard)
+storage.mount(vfs, "/sd")
+sys.path.append("/sd")
+sys.path.append("/sd/lib")
+```
+
+The libraries can then be copied to the SD card in /lib.
+By using `import sdmount_lib`, the SD module is activated and the libraries can be used. More information on using an SD module with Circuit Python can be found directly at [Adafruit](https://learn.adafruit.com/adafruit-micro-sd-breakout-board-card-tutorial/circuitpython).
+
+## Uninstallation
+
+To uninstall Circuit Python, put the senseBox into programming mode by double-clicking the red reset button. Simply copy a .bin file (e.g., created in Blockly) onto the senseBox MCU, and the senseBox MCU will be programmable again as usual via Blockly and Arduino.
+
+## Power Supply of the Ports
+
+By default, the individual ports/pins are not powered. The following code (as used in the SD example) can be used to power the individual interfaces.
+
+Example for the XBee 2 port:
+
+```python
+xb2_pwr = DigitalInOut(board.XB2_PWR) # hier den jeweilen Pin angeben siehe Tabelle
+xb2_pwr.direction = Direction.OUTPUT
+xb2_pwr.value = True
+```
+The other ports can be turned on as follows. Note that the status of the XBee ports is inverted:
+
+| Ports/Pin | Name in Code | Status (activated) | Status (deactivated) |
+| ----------- | ------------ | ------------------ | -------------------- |
+| XBEE 1 | XB1_PWR | False | True |
+| XBEE 2 | XB2_PWR | False | True |
+| I2C | I2C_PWR | True | False |
+| UART | UART_PWR | True | False |
+| Green LED | GREEN_LED | True | False |
+| Red LED | RED_LED | True | False |
+| Pins D1-D13 | D1-D13 | True | False |
+
+- [Circuit Python](https://circuitpython.org/board/sensebox_mcu/)
+- [Libraries](https://circuitpython.org/libraries)
+- [senseBox MCU CircuitPython on Github](https://github.com/adafruit/circuitpython/tree/main/ports/atmel-samd/boards/sensebox_mcu)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-LoRa.md b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-LoRa.md
new file mode 100644
index 0000000..61af16a
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-LoRa.md
@@ -0,0 +1,119 @@
+---
+sidebar_position: 3
+title: senseBox:home with LoRa
+description: Transmit senseBox:home data via LoRa
+---
+
+# senseBox:home with LoRa
+
+## LoRa and TheThingsNetwork
+
+The data is transmitted via [TheThingsNetwork](https://www.thethingsnetwork.org/) (TTN).
+In the first step, you need to create an **Application** and a **Device** and set up data forwarding to the openSenseMap using a **Webhook**.
+In general, all sensors that can be selected directly on the openSenseMap can be used.
+Decoding takes place directly on the openSenseMap, so there is **no need** to configure it in the TTN Console.
+
+## Registering with TheThingsNetwork
+
+Many gateways, established by various groups, associations, or companies, use TheThingsNetwork to receive and transmit data.
+To process data within the network, you first need to create an account, set up an **Application**, and register the **Devices**.
+
+In many cities, the network already has good coverage. You can check the coverage on [ttnmapper.org](https://ttnmapper.org/).
+> Note: The coverage data may not reflect reality and could be outdated.
+
+### Creating the Application and Adding a Device
+
+Create a new account at [https://eu1.cloud.thethings.network/](https://eu1.cloud.thethings.network/).
+Then, select **Go to Applications**.
+
+
+
+You’ll see an overview of all registered **Applications**. Click **add Application** to create a new one.
+
+
+
+Choose a name for your Application and optionally add a short description.
+
+
+
+After clicking **Add Application**, you’ll be taken to the overview page.
+
+
+
+Within an Application, you can now register multiple Devices. Click **+ Add end device**.
+
+
+
+Now, click **Manually** at the top and fill in the fields as shown in the image.
+Generate the **DeviceEUI** and **AppKey** using the respective buttons, and click **Fill with zeros** for the **AppEUI**.
+Finally, you can give the Device a custom ID or use the pre-generated one. Click **Register end device**.
+
+
+
+### Setting up the openSenseMap Integration
+
+The data is transmitted via TheThingsNetwork as simple bytes and forwarded to the openSenseMap.
+To enable this forwarding, click **Integrations** in the sidebar, then **Webhooks**, and add a new Webhook using the **+ Add webhook** button.
+
+
+
+Some services already have pre-configured **Webhooks**.
+For forwarding to the openSenseMap, select a **Custom webhook** (the last option in the list).
+
+
+
+Name the integration and enter it under Webhook ID. Select **JSON** as the **Webhook Format**.
+For the integration URL, use `https://ttn.opensensemap.org/v3` and check **Uplink Message**. Leave the field that appears empty.
+
+
+
+Now, click **Register Webhook**.
+
+The registration with TheThingsNetwork is now complete.
+
+## Registering on the openSenseMap
+
+Register on the openSenseMap as described here. Select "LoRa" as the connection type and add the sensors you connected to your senseBox in the first step.
+
+
+
+To ensure proper communication between TheThingsNetwork and the openSenseMap, select **senseBox:home** as the decoding profile.
+Add your TTN Application ID and TTN Device ID. Click next to complete the registration.
+
+## Compiling and Uploading
+
+After registration, you can compile the program code for your senseBox on the openSenseMap.
+No software installation on your computer is required.
+
+
+
+
+
+Copy the Device EUI, Application EUI, and Application Key from the Device overview and paste them into the respective fields.
+Click "Compile" to generate the program.
+
+### Copying to the senseBox
+
+Put the senseBox into learning mode by double-clicking the red reset button.
+The senseBox will appear as a removable drive, and you can copy the previously downloaded program onto it.
+The senseBox will then restart automatically, and the data will be transmitted.
+
+> Note: On macOS, dragging and dropping the .BIN file does not work.
+> The easiest way is to use our senseBox Sketch Uploader. Simply unzip the file and start the program.
+> You can [download it here](https://sensebox.de/docs/senseBox_Sketch_Uploader_DE.zip). Alternatively, you can use [MuCommander](https://www.mucommander.com/) or copy the file via the terminal using `dd` (recommended for advanced users only).
+
+## Troubleshooting
+
+If your data is not displayed on the openSenseMap, first check whether the data is reaching TheThingsNetwork.
+You can do this from your Application's overview page. Look for **Live Data** messages marked **Forward Uplink Data message**.
+
+
+
+If data appears in the console but is not forwarded to the openSenseMap, verify that all parameters for TTN integration were copied correctly to the openSenseMap.
+You can find these parameters in the openSenseMap dashboard.
+
+
+
+Click "Edit" for your senseBox and select "TheThingsNetwork" from the sidebar menu.
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-solar.mdx b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-solar.mdx
new file mode 100644
index 0000000..167f527
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/products/home/erweiterungen/home-erweiterung-solar.mdx
@@ -0,0 +1,59 @@
+---
+sidebar_position: 4
+title: Solar Extension
+description: Extend your senseBox:home with a solar panel
+---
+
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText";
+import solarZelle from "@site/static/img/sensebox-home-bilder/home-erweiterung-solar/solar_top.png";
+import powerBoost from "@site/static/img/sensebox-home-bilder/home-erweiterung-solar/powerboost-top.png";
+
+# Solar Extension
+
+## Solar Panel
+
+
Die zweite Generation der senseBox:edu für den Einsatz im
Bildungsbereich. Klicke hier für alle nötigen Informationen!
-
+
),
to: '/docs/boards/mcus2/mcu-s2-overview?board=edus2',
},
{
- title: ':edu',
+ title: translateTitle(':edu'),
description: (
- <>
+
Informationen zum Anschluss und zur Programmierung der senseBox:edu für
den Einsatz im Bildungsbereich
-
+
),
to: '/docs/boards/mcu/mcu-overview?board=edu',
},
{
- title: ':bike',
+ title: translateTitle(':bike'),
description: (
- <>
+
Anleitung und Informationen zur senseBox:bike, der dazugehörigen App und
der Installation der Fahrradhalterung
-
+
),
to: '/docs/category/bike?board=bike',
},
{
- title: ':CO2 Ampel',
+ title: translateTitle(':CO2 Ampel'),
description: (
- <>
+
Informationen zum Anschluss und Programmierung der Sensoren, Bees und
weiteren Bauteilen für Bildungszwecke
-
+
),
to: '/docs/products/co2Ampel/co2Ampel-overview?board=co2',
},
{
- title: ':home',
+ title: translateTitle(':home'),
description: (
- <>
+
Aufstellungsort, Installation und alle weiteren Informationen zu
Sensoren der senseBox:home findest du hier!
-
+
),
to: '/docs/boards/mcu/mcu-overview?board=home',
},
{
- title: ':mini',
+ title: translateTitle(':mini'),
description: (
- <>
+
Alle relevanten Informationen zur Miniaturversion der senseBox findest
du hier!
-
+
),
to: '/docs/boards/mini/mini-overview?board=mini',
},
-]
+];
const ThumbNailPreviewList = [
{
- title: 'openSenseMap',
+ title: translateTitle('openSenseMap'),
Image: osem,
description: (
- <>Die openSenseMap als Internetplattform für offene Umweltdaten
+
+ Die openSenseMap als Internetplattform für offene Umweltdaten
+
),
to: 'https://docs.opensensemap.org/',
},
{
- title: 'Blockly',
+ title: translateTitle('Blockly'),
Image: blockly,
description: (
- <>
- Die frei verfügbare grafische Oberfläche zum Programmieren der senseBox{' '}
-
+
+ Die frei verfügbare grafische Oberfläche zum Programmieren der senseBox
+
),
onClick: () => {
useBoardStore.setState({ board: 'Blockly' })
@@ -94,20 +114,20 @@ const ThumbNailPreviewList = [
to: '/docs/category/blockly-2',
},
{
- title: 'Hardware Glossar',
+ title: translateTitle('Hardware Glossar'),
Image: hardware,
description: (
- <>
+
Informationen zum Anschluss und zur Programmierung der Sensoren, Bees
und weiteren Bauteilen
-
+
),
onClick: () => {
useBoardStore.setState({ board: 'Glossar' })
},
to: '/docs/category/glossar',
},
-]
+];
function ThumbailPreview({ Image, title, description, onClick, to }) {
return (
@@ -128,10 +148,7 @@ function ThumbailPreview({ Image, title, description, onClick, to }) {
function Feature({ title, description, to }) {
const handleBoardChange = selectedBoard => {
- // Verwende die setBoard-Funktion direkt, um das Board im Store zu aktualisieren
useBoardStore.setState({ board: selectedBoard })
-
- // Hier kannst du weitere Aktionen ausführen, wenn sich das Board ändert
}
return (
@@ -150,32 +167,33 @@ function Feature({ title, description, to }) {
)
}
+
export default function HomepageFeatures() {
- return (
-
-
-
-
-
-
senseBox Dokumentation
-
Der Platz für die Beschreibung der senseBox-Dokumentation.
-
-
-
-
-
- {FeatureList.map((props, idx) => (
-
-
-
- {ThumbNailPreviewList.map((props, idx) => (
-
-
- )
-}
+ return (
+
+
+
+
+
+
{translateTitle('senseBox Dokumentation')}
+
Der Platz für die senseBox-Dokumentation.
+
+
+
+
+
+ {FeatureList.map((props, idx) => (
+
+
+
+ {ThumbNailPreviewList.map((props, idx) => (
+
+
+ )
+ }
\ No newline at end of file
diff --git a/src/components/TutorialPorts/TutorialPorts_en.js b/src/components/TutorialPorts/TutorialPorts_en.js
new file mode 100644
index 0000000..696f899
--- /dev/null
+++ b/src/components/TutorialPorts/TutorialPorts_en.js
@@ -0,0 +1,45 @@
+import React from 'react'
+// MCU Ports
+import i2cPort from '@site/static/img/en/mcu/ports/i2c-wire-port.png'
+import uartPort from '@site/static/img/en/mcu/ports/uart-serial-port.png'
+import ioPort from '@site/static/img/en/mcu/ports/io-port.png'
+// MCU S2 Ports
+import i2cPortS2 from '@site/static/img/en/mcus2/ports/i2c-wire-port.png'
+import uartPortS2 from '@site/static/img/en/mcus2/ports/uart-serial-port.png'
+import ioPortS2 from '@site/static/img/mcus2/ports/io-port.png'
+import { useBoardStore } from '@site/src/lib/stores/store'
+
+const portImages = {
+ i2c: i2cPort,
+ uart: uartPort,
+ io: ioPort,
+}
+
+const portImagesS2 = {
+ i2c: i2cPortS2,
+ uart: uartPortS2,
+ io: ioPortS2,
+}
+
+function TutorialPorts({ port }) {
+ const board = useBoardStore(state => state.board)
+
+ const imageSrc = board === ':edu S2' ? portImagesS2[port] : portImages[port]
+
+ return (
+
+ {imageSrc ? (
+
+
+
+ The component is connected to the {port.toUpperCase()} port.
+
+
+ ) : (
+
Please specify a valid port type: i2c, uart, or io.
+ )}
+
+ Arduino run first: Arduino loop forever: Initialize Display Print on display Clear Display
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/display/blockly-display-2.svg b/static/img/en/blockly-bilder/display/blockly-display-2.svg
new file mode 100644
index 0000000..2a4cafd
--- /dev/null
+++ b/static/img/en/blockly-bilder/display/blockly-display-2.svg
@@ -0,0 +1,1321 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+
+
+
+
+ Hello World!
+
+
+
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+
+
+ 999
+
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+0 0 0 Zeichne Punkt x-Koordinate y-Koordinate Radius Ausgefüllt ✓ 0 0 0 0 Zeichne Rechteck x-Koordinate y-Koordinate Breite Höhe Ausgefüllt ✓ 0 15 0 50 5 0 15 Zeichne Diagramm Title Y-Achsen Beschriftung X-Achsen Beschriftung X-Wertebereich Anfang X-Wertebereich Ende Y-Wertebereich Anfang Y-Wertebereich Ende X-Linienabstand Y-Linienabstand Zeitabschnitt Wert 0 15 0 50 5 0 15 Zeichne Diagramm Title Y-Achsen Beschriftung X-Achsen Beschriftung X-Wertebereich Anfang X-Wertebereich Ende Y-Wertebereich Anfang Y-Wertebereich Ende X-Linienabstand Y-Linienabstand Zeitabschnitt Wert Temperatur T s Temperatur-/Luftfeuchtigkeitssensor (HDC1080) Messwert: Temperatur in °C ▾
+ Arduino run first: Arduino loop forever:
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-1.svg b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-1.svg
new file mode 100644
index 0000000..42fd1cd
--- /dev/null
+++ b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-1.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: 30 1 Initialise RGB LED (WS2818) Port: on Board ▾ Brightness Number
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-2.svg b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-2.svg
new file mode 100644
index 0000000..dc7974d
--- /dev/null
+++ b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-2.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: 30 1 Initialise RGB LED (WS2818) Port: on Board ▾ Brightness Number 0 Set RGB-LED at Port: on Board ▾ Position Color
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-3.svg b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-3.svg
new file mode 100644
index 0000000..6f16ecb
--- /dev/null
+++ b/static/img/en/blockly-bilder/erster-sketch/rgb-led-block-3.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: 30 1 Initialise RGB LED (WS2818) Port: on Board ▾ Brightness Number Interval: Interval 500 ms 0 Set RGB-LED at Port: on Board ▾ Position Color random colour
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/logik/blockly-entscheidungen-1.svg b/static/img/en/blockly-bilder/logik/blockly-entscheidungen-1.svg
new file mode 100644
index 0000000..e80e82a
--- /dev/null
+++ b/static/img/en/blockly-bilder/logik/blockly-entscheidungen-1.svg
@@ -0,0 +1,1204 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+
+ Button
+
+
+ is Pressed▾
+
+
+ Pin:
+
+
+ on Board▾
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ on▾
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+ else
+
+
+
+ Button
+
+
+ is Pressed▾
+
+
+ Pin:
+
+
+ on Board▾
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ off▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO3▾
+
+
+ Status
+
+
+ on▾
+
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ on▾
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+ else
+
+
+
+ <▾
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ 0
+
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ on▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO3▾
+
+
+ Status
+
+
+ off▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO4▾
+
+
+ Status
+
+
+ off▾
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+ else
+
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ 0
+
+
+
+ =▾
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ off▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO3▾
+
+
+ Status
+
+
+ on▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO4▾
+
+
+ Status
+
+
+ off▾
+
+
+
+
+
+
+
+
+ if
+
+
+ do
+
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ 0
+
+
+
+ >▾
+
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO2▾
+
+
+ Status
+
+
+ off▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO3▾
+
+
+ Status
+
+
+ off▾
+
+
+
+ LED connected to
+
+
+ Pin:
+
+
+ IO4▾
+
+
+ Status
+
+
+ on▾
+
+
+
+
+
+
+
+
+= ▾
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ and▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ not
+
+
+
+teste wenn wahr wenn falsch 0
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+ constrain
+
+
+ low
+
+
+ high
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 100
+
+
+
+ random integer from
+
+
+ to
+
+
+
+Zufallszahl (0.0 -1.0)
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Map Value
+
+
+ from Min
+
+
+ from Max
+
+
+ to Min
+
+
+ to Max
+
+
+
+
+ Arduino run first: Arduino loop forever: Initialize Display Print on display Show Text/Number Font color White ▾ Fontsize 1 x-Coordinates 0 y-Coordinates 0 Value Map Value from Min from Max to Min to Max Light Visible + UV Value: Illuminance in Lux ▾ 0 3 20000 100
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/mathematik/blockly-mathematik-2.svg b/static/img/en/blockly-bilder/mathematik/blockly-mathematik-2.svg
new file mode 100644
index 0000000..320863f
--- /dev/null
+++ b/static/img/en/blockly-bilder/mathematik/blockly-mathematik-2.svg
@@ -0,0 +1 @@
++ ▾
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ square root▾
+
+
+
+sin ▾ π ▾
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ is
+
+
+ even▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+ change
+
+
+ i▾
+
+
+ by
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ round▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ remainder of
+
+
+ ÷
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 10
+
+
+
+ repeat
+
+
+ times
+
+
+ do
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ repeat
+
+
+ while▾
+
+
+ do
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 10
+
+
+
+
+ 1
+
+
+
+ count with
+
+
+ j▾
+
+
+ from
+
+
+ to
+
+
+ by
+
+
+ do
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Create file on SD-Card
+
+
+ filename
+
+
+ Data
+
+
+ .
+
+
+ csv▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Write Data to SD-Card
+
+
+ linebreak
+
+
+ ✓
+
+
+
+ Open a file from SD-Card
+
+
+ Data
+
+
+ .
+
+
+ csv▾
+
+
+
+
+ Arduino run first: Arduino loop forever: Create file on SD-Card filename Data . csv ▾ Interval: Interval 60000 ms Write Data to SD-Card linebreak ✓ Temperature/Humidity Sensor (HDC1080) Value: Temperature in °C ▾ Open a file from SD-Card Data . csv ▾
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/sensoren/blockly-sensoren-0.svg b/static/img/en/blockly-bilder/sensoren/blockly-sensoren-0.svg
new file mode 100644
index 0000000..7c20ba4
--- /dev/null
+++ b/static/img/en/blockly-bilder/sensoren/blockly-sensoren-0.svg
@@ -0,0 +1,2614 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ ESP32-S2 MPU6050
+
+
+ Value:
+
+
+ X▾
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ ESP32-S2 MPU6050
+
+
+ Value:
+
+
+ Y▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ ESP32-S2 MPU6050
+
+
+ Value:
+
+
+ Z▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ ESP32-S2 MPU6050
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ humidity in %▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Button
+
+
+ is Pressed▾
+
+
+ Pin:
+
+
+ on Board▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Button
+
+
+ was Pressed▾
+
+
+ Pin:
+
+
+ on Board▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Button
+
+
+ as Switch▾
+
+
+ Pin:
+
+
+ on Board▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Airpressure/Temperature Sensor (BMP280)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Airpressure/Temperature Sensor (BMP280)
+
+
+ Value:
+
+
+ Airpressure in hPa▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Airpressure/Temperature Sensor (BMP280)
+
+
+ Value:
+
+
+ altitude in m▾
+
+
+ Pressure at Sea Level
+
+
+ 1013
+
+
+ hPa
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Clear Display
+
+
+
+
+ Light Visible + UV
+
+
+ Value:
+
+
+ Illuminance in Lux▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Initialize Display
+
+
+
+
+ Print on display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Clear Display
+
+
+
+
+ Light Visible + UV
+
+
+ Value:
+
+
+ UV-Light in µW/cm²▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Fine Particular Sensor
+
+
+ Value:
+
+
+ PM2.5▾
+
+
+ in µg/m³ at
+
+
+ Serial1▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Fine Particular Sensor
+
+
+ Value:
+
+
+ PM10▾
+
+
+ in µg/m³ at
+
+
+ Serial1▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Soil Moisture and Temperature (SMT50)
+
+
+ Port:
+
+
+ A▾
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Soil Moisture and Temperature (SMT50)
+
+
+ Port:
+
+
+ A▾
+
+
+ Value:
+
+
+ Soil Moisture▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ GPS Modul
+
+
+ Value:
+
+
+ latitude▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ GPS Modul
+
+
+ Value:
+
+
+ longitude▾
+
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Environmental sensor (BME680)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ Print on display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Environmental sensor (BME680)
+
+
+ Value:
+
+
+ humidity in %▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Environmental sensor (BME680)
+
+
+ Value:
+
+
+ Airpressure in Pa▾
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Display
+
+
+
+ Arduino run first:
+
+
+ Arduino loop forever:
+
+
+
+ Print on display
+
+
+
+
+ Clear Display
+
+
+
+ Show Text/Number
+
+
+ Font color
+
+
+ White▾
+
+
+ Fontsize
+
+
+ 1
+
+
+ x-Coordinates
+
+
+ 0
+
+
+ y-Coordinates
+
+
+ 0
+
+
+ Value
+
+
+
+ Environmental sensor (BME680)
+
+
+ Value:
+
+
+ Indoor Air Quality (IAQ)▾
+
+
+
+
+
+
+
+ Initialize Display Arduino run first: Arduino loop forever: Print on display Clear Display Show Text/Number Font color White ▾ Fontsize 1 x-Coordinates 0 y-Coordinates 0 Value Ultrasonic distance sensor at Port A ▾ Trigger IO3 ▾ Echo IO2 ▾ Max distance 250 cm
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/sensoren/blockly-sensoren-9.svg b/static/img/en/blockly-bilder/sensoren/blockly-sensoren-9.svg
new file mode 100644
index 0000000..53d491a
--- /dev/null
+++ b/static/img/en/blockly-bilder/sensoren/blockly-sensoren-9.svg
@@ -0,0 +1,1043 @@
+
+ Initialize Display Arduino run first: Arduino loop forever: Print on display Clear Display Show Text/Number Font color White ▾ Fontsize 1 x-Coordinates 0 y-Coordinates 0 Value Microphone Pin: IO2 ▾
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/text/blockly-text-2.svg b/static/img/en/blockly-bilder/text/blockly-text-2.svg
new file mode 100644
index 0000000..9982c60
--- /dev/null
+++ b/static/img/en/blockly-bilder/text/blockly-text-2.svg
@@ -0,0 +1,1191 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ create text with
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ to
+
+
+ item▾
+
+
+ append text
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ length of
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ is empty
+
+
+
+
+ Arduino run first: Arduino loop forever: set int Element ▾ to
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/variablen/blockly-variablen-2.svg b/static/img/en/blockly-bilder/variablen/blockly-variablen-2.svg
new file mode 100644
index 0000000..84bf48b
--- /dev/null
+++ b/static/img/en/blockly-bilder/variablen/blockly-variablen-2.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: Print on display Show Text/Number Font color White ▾ Fontsize 1 x-Coordinates 0 y-Coordinates 0 Value int Tore ▾ Clear Display Initialize Display set int Tore ▾ to 3
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/variablen/blockly-variablen-3.svg b/static/img/en/blockly-bilder/variablen/blockly-variablen-3.svg
new file mode 100644
index 0000000..334e7c8
--- /dev/null
+++ b/static/img/en/blockly-bilder/variablen/blockly-variablen-3.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: Initialize Display set int Tore ▾ to 3 if do Button is Pressed ▾ Pin: on Board ▾ 1 change Tore ▾ by Print on display Clear Display Show Text/Number Font color White ▾ Fontsize 1 x-Coordinates 0 y-Coordinates 0 Value int Tore ▾
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/web-lora/blockly-lora-1.svg b/static/img/en/blockly-bilder/web-lora/blockly-lora-1.svg
new file mode 100644
index 0000000..f6bf7c6
--- /dev/null
+++ b/static/img/en/blockly-bilder/web-lora/blockly-lora-1.svg
@@ -0,0 +1,1518 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize LoRa (OTAA)
+
+
+ Device EUI (lsb)
+
+
+ {
+
+
+ DEVICE ID
+
+
+ }
+
+
+ Application EUI (lsb)
+
+
+ {
+
+
+ APP ID
+
+
+ }
+
+
+ App Key (msb)
+
+
+ {
+
+
+ APP KEY
+
+
+ }
+
+
+ Transmission interval in minutes
+
+
+ 5
+
+
+
+
+ Initialize LoRa (ABP)
+
+
+ Network Session Key (msb)
+
+
+ {
+
+
+ NWSKEY
+
+
+ }
+
+
+ App Session Key (msb)
+
+
+ {
+
+
+ APPSKEY
+
+
+ }
+
+
+ Device Adress
+
+
+ DEVADDR
+
+
+ Transmission interval in minutes
+
+
+ 5
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Concentration
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Analog Value
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ X Value
+
+
+ Y Value
+
+
+ Z Value
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Latitude
+
+
+ Longitude
+
+
+ Altitude
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Send as Lora Message
+
+
+
+ Measurement
+
+
+ Bytes
+
+
+ 2
+
+
+
+
+
+ Arduino run first: Arduino loop forever: Initialize LoRa (OTAA) Device EUI (lsb) { DEVICE ID } Application EUI (lsb) { APP ID } App Key (msb) { APP KEY } Transmission interval in minutes 5 Send as Lora Message Measurement Bytes 2 × ▾ Temperature/Humidity Sensor (HDC1080) Value: Temperature in °C ▾ 100
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/web-lora/blockly-lora-4.svg b/static/img/en/blockly-bilder/web-lora/blockly-lora-4.svg
new file mode 100644
index 0000000..0b6684e
--- /dev/null
+++ b/static/img/en/blockly-bilder/web-lora/blockly-lora-4.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: Initialize LoRa (OTAA) Device EUI (lsb) { DEVICE ID } Application EUI (lsb) { APP ID } App Key (msb) { APP KEY } Transmission interval in minutes 5 Send as Lora Message Measurement Bytes 2 + ▾ + ▾ Temperature/Humidity Sensor (HDC1080) Value: Temperature in °C ▾ 18 771
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/web-lora/blockly-lora-5.svg b/static/img/en/blockly-bilder/web-lora/blockly-lora-5.svg
new file mode 100644
index 0000000..2c46f9e
--- /dev/null
+++ b/static/img/en/blockly-bilder/web-lora/blockly-lora-5.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: Initialize LoRa (OTAA) Device EUI (lsb) { DEVICE ID } Application EUI (lsb) { APP ID } App Key (msb) { APP KEY } Transmission interval in minutes 5 Send as Lora Message Measurement Bytes 3 Light Visible + UV Value: Illuminance in Lux ▾
\ No newline at end of file
diff --git a/static/img/en/blockly-bilder/web-lora/blockly-lora-6.svg b/static/img/en/blockly-bilder/web-lora/blockly-lora-6.svg
new file mode 100644
index 0000000..37e853d
--- /dev/null
+++ b/static/img/en/blockly-bilder/web-lora/blockly-lora-6.svg
@@ -0,0 +1,1198 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Temperature
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Humidity
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Pressure
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Luminosity
+
+
+ Channel
+
+
+ 1
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Connect to openSenseMap
+
+
+ SSL
+
+
+ ✓
+
+
+ Type
+
+
+ Stationary▾
+
+
+ senseBox ID
+
+
+ senseBox ID
+
+
+ API Key
+
+
+ access_token
+
+
+ Sensors
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Send measurement to openSenseMap
+
+
+ Phänomen
+
+
+ sensorID
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Connect to Wifi
+
+
+ Networkname
+
+
+ SSID
+
+
+ Password
+
+
+ Password
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Initialize Wifi Access Point
+
+
+ Networkname
+
+
+ SSID
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1000
+
+
+
+ wait
+
+
+ milliseconds
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 100
+
+
+
+ wait
+
+
+ microseconds
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ current elapsed Time (milliseconds)
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ current elapsed Time (microseconds)
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ wait forever (end program)
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Interval:
+
+
+ Interval
+
+
+ 10000
+
+
+ ms
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Accelerometer
+
+
+ Direction
+
+
+ X-Axis▾
+
+
+ Range
+
+
+ 2g▾
+
+
+
+
+ Arduino run first: Arduino loop forever: Interval: Interval 2000 ms Send values send to channel: 1 ▾ CO2 Sensor (Sensirion SCD30) Value: CO2 in ppm ▾ send to channel: 2 ▾ CO2 Sensor (Sensirion SCD30) Value: Temperature in °C ▾ Initialise Phyphox device with name: CO2 Traffic Light Create experiment Title CO2 Traffic Light Description Forwards measurements of the CO2 Traffic Light With graphs: Timestamp Channel 1 ▾ Create Graph CO2 concentration Unit x-axis t Unit y-axis ppm Label x-axis Time Label y-axis Concentration style Line ▾ x-axis value y-axis value Timestamp Create Graph Temperature Unit x-axis t Unit y-axis °C Label x-axis Time Label y-axis Temperature style Line ▾ x-axis value y-axis value Channel 2 ▾
\ No newline at end of file
diff --git a/static/img/en/hardware-bilder/bodenfeuchte-temperatursensor/block_bodenfeuchte_temperatur.svg b/static/img/en/hardware-bilder/bodenfeuchte-temperatursensor/block_bodenfeuchte_temperatur.svg
new file mode 100644
index 0000000..f759a5a
--- /dev/null
+++ b/static/img/en/hardware-bilder/bodenfeuchte-temperatursensor/block_bodenfeuchte_temperatur.svg
@@ -0,0 +1,1242 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Soil Moisture and Temperature (SMT50)
+
+
+ Port:
+
+
+ A▾
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ CO2 Sensor (Sensirion SCD30)
+
+
+ Value:
+
+
+ CO2 in ppm▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Ultrasonic distance sensor at Port
+
+
+ A▾
+
+
+ Trigger
+
+
+ A1▾
+
+
+ Echo
+
+
+ A2▾
+
+
+ Max distance
+
+
+ 250
+
+
+ cm
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Fine Particular Sensor
+
+
+ Value:
+
+
+ PM2.5▾
+
+
+ in µg/m³ at
+
+
+ Serial1▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ GPS Modul
+
+
+ Value:
+
+
+ latitude▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Light Visible + UV
+
+
+ Value:
+
+
+ Illuminance in Lux▾
+
+
+
+
+ Arduino run first: Arduino loop forever: Initialise LED-Matrix Port: A ▾ Brightness: 20 Show text/number Port: A ▾ Auto-Scroll ✓ Color Input Hello World!
\ No newline at end of file
diff --git a/static/img/en/hardware-bilder/luftdruck/block_luftdruck_temperatur.svg b/static/img/en/hardware-bilder/luftdruck/block_luftdruck_temperatur.svg
new file mode 100644
index 0000000..b939fe3
--- /dev/null
+++ b/static/img/en/hardware-bilder/luftdruck/block_luftdruck_temperatur.svg
@@ -0,0 +1,1207 @@
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Airpressure/Temperature Sensor (DPS310)
+
+
+ Value:
+
+
+ Airpressure in hPa▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Microphone
+
+
+ Pin:
+
+
+ A1▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ ESP32-S2 MPU6050
+
+
+ Value:
+
+
+ X▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ ESP32-S2 Phododiode
+
+
+ Value:
+
+
+ Light intensity▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Particulate Matter Sensor (Sensirion SPS30)
+
+
+ Value:
+
+
+ PM1.0▾
+
+
+ in µg/m³
+
+
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Temperature/Humidity Sensor (HDC1080)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ ToF Distance Imager
+
+
+ Value:
+
+
+ Closest distance in cm▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Environmental sensor (BME680)
+
+
+ Value:
+
+
+ Temperature in °C▾
+
+
+
+
+ rect,
+.blocklyEditableText>rect {
+fill: #fff;
+fill-opacity: .6;
+stroke: none;
+}
+.blocklyNonEditableText>text,
+.blocklyEditableText>text {
+fill: #000;
+}
+.blocklyFlyoutLabelText {
+fill: #000;
+}
+.blocklyText.blocklyBubbleText {
+fill: #000;
+}
+.blocklyEditableText:not(.editing):hover>rect {
+stroke: #fff;
+stroke-width: 2;
+}
+.blocklyHtmlInput {
+font-family: sans-serif;
+font-weight: normal;
+}
+.blocklySelected>.blocklyPath {
+stroke: #fc3;
+stroke-width: 3px;
+}
+.blocklyHighlightedConnectionPath {
+stroke: #fc3;
+}
+.blocklyPath {
+fill-opacity: .5;
+}
+.blocklyPathLight,
+.blocklyPathDark {
+display: none;
+}
+.blocklyInsertionMarker>.blocklyPath {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+fill-opacity: 0.2;
+stroke: none;
+}
+.blocklySvg {
+ background-color: #fff;
+ outline: none;
+ overflow: hidden; /* IE overflows by default. */
+ position: absolute;
+ display: block;
+}
+
+.blocklyWidgetDiv {
+ display: none;
+ position: absolute;
+ z-index: 99999; /* big value for bootstrap3 compatibility */
+}
+
+.injectionDiv {
+ height: 100%;
+ position: relative;
+ overflow: hidden; /* So blocks in drag surface disappear at edges */
+ touch-action: none;
+}
+
+.blocklyNonSelectable {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+}
+
+.blocklyWsDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+/* Added as a separate rule with multiple classes to make it more specific
+ than a bootstrap rule that selects svg:root. See issue #1275 for context.
+*/
+.blocklyWsDragSurface.blocklyOverflowVisible {
+ overflow: visible;
+}
+
+.blocklyBlockDragSurface {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: visible !important;
+ z-index: 50; /* Display below toolbox, but above everything else. */
+}
+
+.blocklyBlockCanvas.blocklyCanvasTransitioning,
+.blocklyBubbleCanvas.blocklyCanvasTransitioning {
+ transition: transform .5s;
+}
+
+.blocklyTooltipDiv {
+ background-color: #ffffc7;
+ border: 1px solid #ddc;
+ box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
+ color: #000;
+ display: none;
+ font: 9pt sans-serif;
+ opacity: .9;
+ padding: 2px;
+ position: absolute;
+ z-index: 100000; /* big value for bootstrap3 compatibility */
+}
+
+.blocklyDropDownDiv {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 1000;
+ display: none;
+ border: 1px solid;
+ border-color: #dadce0;
+ background-color: #fff;
+ border-radius: 2px;
+ padding: 4px;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownDiv.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyDropDownContent {
+ max-height: 300px; /* @todo: spec for maximum height. */
+ overflow: auto;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.blocklyDropDownArrow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ z-index: -1;
+ background-color: inherit;
+ border-color: inherit;
+}
+
+.blocklyDropDownButton {
+ display: inline-block;
+ float: left;
+ padding: 0;
+ margin: 4px;
+ border-radius: 4px;
+ outline: none;
+ border: 1px solid;
+ transition: box-shadow .1s;
+ cursor: pointer;
+}
+
+.blocklyArrowTop {
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-top-left-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyArrowBottom {
+ border-bottom: 1px solid;
+ border-right: 1px solid;
+ border-bottom-right-radius: 4px;
+ border-color: inherit;
+}
+
+.blocklyResizeSE {
+ cursor: se-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeSW {
+ cursor: sw-resize;
+ fill: #aaa;
+}
+
+.blocklyResizeLine {
+ stroke: #515A5A;
+ stroke-width: 1;
+}
+
+.blocklyHighlightedConnectionPath {
+ fill: none;
+ stroke: #fc3;
+ stroke-width: 4px;
+}
+
+.blocklyPathLight {
+ fill: none;
+ stroke-linecap: round;
+ stroke-width: 1;
+}
+
+.blocklySelected>.blocklyPathLight {
+ display: none;
+}
+
+.blocklyDraggable {
+ cursor: grab;
+ cursor: -webkit-grab;
+}
+
+.blocklyDragging {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+ /* Changes cursor on mouse down. Not effective in Firefox because of
+ https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
+.blocklyDraggable:active {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Change the cursor on the whole drag surface in case the mouse gets
+ ahead of block during a drag. This way the cursor is still a closed hand.
+ */
+.blocklyDraggable {
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.blocklyDragging.blocklyDraggingDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyDragging>.blocklyPath,
+.blocklyDragging>.blocklyPathLight {
+ fill-opacity: .8;
+ stroke-opacity: .8;
+}
+
+.blocklyDragging>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyDisabled>.blocklyPath {
+ fill-opacity: .5;
+ stroke-opacity: .5;
+}
+
+.blocklyDisabled>.blocklyPathLight,
+.blocklyDisabled>.blocklyPathDark {
+ display: none;
+}
+
+.blocklyInsertionMarker>.blocklyPath,
+.blocklyInsertionMarker>.blocklyPathLight,
+.blocklyInsertionMarker>.blocklyPathDark {
+ fill-opacity: .2;
+ stroke: none;
+}
+
+.blocklyMultilineText {
+ font-family: monospace;
+}
+
+.blocklyNonEditableText>text {
+ pointer-events: none;
+}
+
+.blocklyFlyout {
+ position: absolute;
+ z-index: 20;
+}
+
+.blocklyText text {
+ cursor: default;
+}
+
+/*
+ Don't allow users to select text. It gets annoying when trying to
+ drag a block and selected text moves instead.
+*/
+.blocklySvg text,
+.blocklyBlockDragSurface text {
+ user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ cursor: inherit;
+}
+
+.blocklyHidden {
+ display: none;
+}
+
+.blocklyFieldDropdown:not(.blocklyHidden) {
+ display: block;
+}
+
+.blocklyIconGroup {
+ cursor: default;
+}
+
+.blocklyIconGroup:not(:hover),
+.blocklyIconGroupReadonly {
+ opacity: .6;
+}
+
+.blocklyIconShape {
+ fill: #00f;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+.blocklyIconSymbol {
+ fill: #fff;
+}
+
+.blocklyMinimalBody {
+ margin: 0;
+ padding: 0;
+}
+
+.blocklyHtmlInput {
+ border: none;
+ border-radius: 4px;
+ height: 100%;
+ margin: 0;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ text-align: center;
+ display: block;
+ box-sizing: border-box;
+}
+
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+.blocklyMainBackground {
+ stroke-width: 1;
+ stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
+}
+
+.blocklyMutatorBackground {
+ fill: #fff;
+ stroke: #ddd;
+ stroke-width: 1;
+}
+
+.blocklyFlyoutBackground {
+ fill: #ddd;
+ fill-opacity: .8;
+}
+
+.blocklyMainWorkspaceScrollbar {
+ z-index: 20;
+}
+
+.blocklyFlyoutScrollbar {
+ z-index: 30;
+}
+
+.blocklyScrollbarHorizontal,
+.blocklyScrollbarVertical {
+ position: absolute;
+ outline: none;
+}
+
+.blocklyScrollbarBackground {
+ opacity: 0;
+}
+
+.blocklyScrollbarHandle {
+ fill: #ccc;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #bbb;
+}
+
+/* Darken flyout scrollbars due to being on a grey background. */
+/* By contrast, workspace scrollbars are on a white background. */
+.blocklyScrollbarHandle {
+ fill: #bbb;
+}
+
+.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
+.blocklyScrollbarHandle:hover {
+ fill: #aaa;
+}
+
+.blocklyInvalidInput {
+ background: #faa;
+}
+
+.blocklyVerticalMarker {
+ stroke-width: 3px;
+ fill: rgba(255,255,255,.5);
+ pointer-events: none;
+}
+
+.blocklyComputeCanvas {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.blocklyNoPointerEvents {
+ pointer-events: none;
+}
+
+.blocklyContextMenu {
+ border-radius: 4px;
+ max-height: 100%;
+}
+
+.blocklyDropdownMenu {
+ border-radius: 2px;
+ padding: 0 !important;
+}
+
+.blocklyMenuItem {
+ /* 28px on the left for icon or checkbox. */
+ padding-left: 28px;
+}
+
+/* BiDi override for the resting state. */
+.blocklyMenuItemRtl {
+ /* Flip left/right padding for BiDi. */
+ padding-left: 5px;
+ padding-right: 28px;
+}
+
+.blocklyMenu {
+ background: #fff;
+ border: 1px solid transparent;
+ box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
+ font: normal 13px Arial, sans-serif;
+ margin: 0;
+ outline: none;
+ padding: 4px 0;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100%;
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+.blocklyMenu.blocklyFocused {
+ box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
+}
+
+.blocklyMenu {
+ background: inherit; /* Compatibility with gapi, reset from goog-menu */
+ border: inherit; /* Compatibility with gapi, reset from goog-menu */
+ font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
+ outline: none;
+ position: relative; /* Compatibility with gapi, reset from goog-menu */
+ z-index: 20000; /* Arbitrary, but some apps depend on it... */
+}
+
+/* State: resting. */
+.blocklyMenuItem {
+ border: none;
+ color: #000;
+ cursor: pointer;
+ list-style: none;
+ margin: 0;
+ /* 7em on the right for shortcut. */
+ min-width: 7em;
+ padding: 6px 15px;
+ white-space: nowrap;
+}
+
+/* State: disabled. */
+.blocklyMenuItemDisabled {
+ color: #ccc;
+ cursor: inherit;
+}
+
+/* State: hover. */
+.blocklyMenuItemHighlight {
+ background-color: rgba(0,0,0,.1);
+}
+
+/* State: selected/checked. */
+.blocklyMenuItemCheckbox {
+ height: 16px;
+ position: absolute;
+ width: 16px;
+}
+
+.blocklyMenuItemCheckbox {
+ background: url(/media/blockly/sprites.png) no-repeat -48px -16px;
+ float: left;
+ margin-left: -24px;
+ position: static; /* Scroll with the menu. */
+}
+
+.blocklyMenuItemCheckbox {
+ float: right;
+ margin-right: -24px;
+}
+
+
+.blocklyCommentForeignObject {
+ position: relative;
+ z-index: 0;
+}
+
+.blocklyCommentRect {
+ fill: #E7DE8E;
+ stroke: #bcA903;
+ stroke-width: 1px;
+}
+
+.blocklyCommentTarget {
+ fill: transparent;
+ stroke: #bcA903;
+}
+
+.blocklyCommentTargetFocused {
+ fill: none;
+}
+
+.blocklyCommentHandleTarget {
+ fill: none;
+}
+
+.blocklyCommentHandleTargetFocused {
+ fill: transparent;
+}
+
+.blocklyFocused>.blocklyCommentRect {
+ fill: #B9B272;
+ stroke: #B9B272;
+}
+
+.blocklySelected>.blocklyCommentTarget {
+ stroke: #fc3;
+ stroke-width: 3px;
+}
+
+.blocklyCommentDeleteIcon {
+ cursor: pointer;
+ fill: #000;
+ display: none;
+}
+
+.blocklyCommentDeleteIcon {
+ display: block;
+}
+
+.blocklyDeleteIconShape {
+ fill: #000;
+ stroke: #000;
+ stroke-width: 1px;
+}
+
+.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
+ stroke: #fc3;
+}
+
+
+.blocklyCommentTextarea {
+ background-color: #fef49c;
+ border: 0;
+ display: block;
+ margin: 0;
+ outline: 0;
+ padding: 3px;
+ resize: none;
+ text-overflow: hidden;
+}
+
+
+.blocklyAngleCircle {
+ stroke: #444;
+ stroke-width: 1;
+ fill: #ddd;
+ fill-opacity: 0.8;
+}
+
+.blocklyAngleMarks {
+ stroke: #444;
+ stroke-width: 1;
+}
+
+.blocklyAngleGauge {
+ fill: #f88;
+ fill-opacity: 0.8;
+ pointer-events: none;
+}
+
+.blocklyAngleLine {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-linecap: round;
+ pointer-events: none;
+}
+
+
+.blocklyColourTable {
+ border-collapse: collapse;
+ display: block;
+ outline: none;
+ padding: 1px;
+}
+
+.blocklyColourTable>tr>td {
+ border: 0.5px solid #888;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ width: 20px;
+}
+
+.blocklyColourTable>tr>td.blocklyColourHighlighted {
+ border-color: #eee;
+ box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+
+.blocklyColourSelected:hover {
+ border-color: #eee !important;
+ outline: 1px solid #333;
+ position: relative;
+}
+
+
+.blocklyHtmlTextAreaInput {
+ font-family: monospace;
+ resize: none;
+ overflow: hidden;
+ height: 100%;
+ text-align: left;
+}
+
+.blocklyHtmlTextAreaInputOverflowedY {
+ overflow-y: scroll;
+}
+
+
+.blocklyFlyoutButton {
+ fill: #888;
+ cursor: default;
+}
+
+.blocklyFlyoutButtonShadow {
+ fill: #666;
+}
+
+.blocklyFlyoutButton:hover {
+ fill: #aaa;
+}
+
+.blocklyFlyoutLabel {
+ cursor: default;
+}
+
+.blocklyFlyoutLabelBackground {
+ opacity: 0;
+}
+
+
+.blocklyZoom>svg>image {
+ opacity: .4;
+}
+
+.blocklyZoom>svg>image:hover {
+ opacity: .6;
+}
+
+.blocklyZoom>svg>image:active {
+ opacity: .8;
+}
+
+
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+ background-color: rgba(255, 255, 255, .2);
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 5px 1px 0;
+}
+
+.blocklyToolboxCategory {
+ margin: 1px 0 1px 5px;
+}
+
+.blocklyTreeRow {
+ height: 22px;
+ line-height: 22px;
+ margin-bottom: 3px;
+ padding-right: 8px;
+ white-space: nowrap;
+}
+
+.blocklyTreeRow {
+ margin-left: 8px;
+ padding-right: 0;
+}
+
+.blocklyTreeIcon {
+ background-image: url(/media/blockly/sprites.png);
+ height: 16px;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 16px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: -32px -1px;
+}
+
+.blocklyTreeIconClosed {
+ background-position: 0 -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: -32px -17px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconClosed {
+ background-position: 0 -17px;
+}
+
+.blocklyTreeIconOpen {
+ background-position: -16px -1px;
+}
+
+.blocklyTreeSelected>.blocklyTreeIconOpen {
+ background-position: -16px -17px;
+}
+
+.blocklyTreeLabel {
+ cursor: default;
+ font: 16px sans-serif;
+ padding: 0 3px;
+ vertical-align: middle;
+}
+
+.blocklyTreeLabel {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyTreeLabel {
+ color: #fff;
+}
+
+
+.blocklyTreeSeparator {
+ border-bottom: solid #e5e5e5 1px;
+ height: 0;
+ margin: 5px 0;
+}
+
+.blocklyTreeSeparator {
+ border-right: solid #e5e5e5 1px;
+ border-bottom: none;
+ height: auto;
+ margin: 0 5px 0 5px;
+ padding: 5px 0;
+ width: 0;
+}
+
+
+.blocklyToolboxDelete {
+ cursor: url("/media/blockly/handdelete.cur"), auto;
+}
+
+.blocklyToolboxGrab {
+ cursor: url("/media/blockly/handclosed.cur"), auto;
+ cursor: grabbing;
+ cursor: -webkit-grabbing;
+}
+
+/* Category tree in Toolbox. */
+.blocklyToolboxDiv {
+ background-color: #ddd;
+ overflow-x: visible;
+ overflow-y: auto;
+ padding: 4px 0 4px 0;
+ position: absolute;
+ z-index: 70; /* so blocks go under toolbox when dragging */
+ -webkit-tap-highlight-color: transparent; /* issue #1345 */
+}
+
+.blocklyToolboxContents {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.blocklyToolboxContents:focus {
+ outline: none;
+}
+
+
+.blocklyModalOverlay {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ position: fixed;
+}
+.blocklyModalContainer {
+ background-color: #fff;
+ border: 1px solid gray;
+ font-family: Helvetica;
+ font-weight: 300;
+ padding: 1em;
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0px 10px 20px grey;
+ z-index: 100;
+ margin: 15% auto;
+}
+.blocklyModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.blocklyModalHeaderTitle {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ line-height: 1.25;
+}
+.blocklyModalBtn {
+ margin-left: auto;
+ height: fit-content;
+}
+.blocklyModalBtnClose:before {
+ content: "\2715";
+}
+.blocklyModalBtn {
+ margin-right: 0.5em;
+ border: 1px solid gray;
+ font-weight: 500;
+ color: gray;
+ border-radius: 25px;
+}
+.blocklyModalBtnPrimary {
+ background-color: gray;
+ color: #fff;
+}
+
+
+.typedModalTitle {
+ font-weight: bold;
+ font-size: 1em;
+}
+.typedModalVariableInputContainer {
+ margin: 1em 0 1em 0;
+}
+.typedModalVariableLabel{
+ margin-right: 0.5em;
+}
+.typedModalTypes ul{
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+}
+.typedModalTypes li {
+ margin-right: 1em;
+ display: flex;
+}
+
+
+ /** Setup grid layout of DropDown */
+ .fieldGridDropDownContainer.blocklyMenu {
+ display: grid;
+ grid-gap: 7px;
+ }
+ /* Change look of cells (add border, sizing, padding, and text color) */
+ .blocklyMenuItem {
+ border: 1px solid rgba(1, 1, 1, 0.5);
+ border-radius: 4px;
+ color: white;
+ min-width: auto;
+ padding-left: 15px; /* override padding-left now that checkmark is hidden */
+ }
+ /* Change look of selected cell */
+ .blocklyMenuItemCheckbox {
+ display: none; /* Hide checkmark */
+ }
+ .blocklyMenuItem.blocklyMenuItemSelected {
+ background-color: rgba(1, 1, 1, 0.25);
+ }
+ /* Change look of focus/highlighted cell */
+ .blocklyMenuItem.blocklyMenuItemHighlight {
+ box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
+ }
+ .blocklyMenuItemHighlight {
+ /* Uses less selectors so as to not affect blocklyMenuItemSelected */
+ background-color: inherit;
+ }
+ .fieldGridDropDownContainer {
+ margin: 7px; /* needed for highlight */
+ }
+
+
+.fieldSliderContainer {
+ align-items: center;
+ display: flex;
+ height: 32px;
+ justify-content: center;
+ width: 150px;
+}
+.fieldSlider {
+ -webkit-appearance: none;
+ background: transparent; /* override white in chrome */
+ margin: 4px;
+ padding: 0;
+ width: 100%;
+}
+.fieldSlider:focus {
+ outline: none;
+}
+/* Webkit */
+.fieldSlider::-webkit-slider-runnable-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ margin-top: -7px;
+ width: 24px;
+}
+/* Firefox */
+.fieldSlider::-moz-range-track {
+ background: #ddd;
+ border-radius: 5px;
+ height: 10px;
+}
+.fieldSlider::-moz-range-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+.fieldSlider::-moz-focus-outer {
+ /* override the focus border style */
+ border: 0;
+}
+/* IE */
+.fieldSlider::-ms-track {
+ /* IE wont let the thumb overflow the track, so fake it */
+ background: transparent;
+ border-color: transparent;
+ border-width: 15px 0;
+ /* remove default tick marks */
+ color: transparent;
+ height: 10px;
+ width: 100%;
+ margin: -4px 0;
+}
+.fieldSlider::-ms-fill-lower {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-fill-upper {
+ background: #ddd;
+ border-radius: 5px;
+}
+.fieldSlider::-ms-thumb {
+ background: #fff;
+ border: none;
+ border-radius: 50%;
+ box-shadow: 0 0 0 4px rgba(255,255,255,.15);
+ cursor: pointer;
+ height: 24px;
+ width: 24px;
+}
+
+
+.zoomToFit {
+ opacity: 0.4;
+}
+.zoomToFit:hover {
+ opacity: 0.6;
+}
+.zoomToFit:active {
+ opacity: 0.8;
+}
+
+
+.blocklyBackpack {
+ opacity: 0.4;
+}
+.blocklyBackpackDarken {
+ opacity: 0.6;
+}
+.blocklyBackpack:active {
+ opacity: 0.8;
+}
+.blocklyPath {
+ fill-opacity: 1;
+ }
+ .blocklyPathDark {
+ display: flex;
+ }
+ .blocklyPathLight {
+ display: flex;
+ } ]]>
+
+">
+
+
+
+
+
+
+
+
+
+
+
+
+ Water Temperature
+
+
+ Port:
+
+
+ A▾
+
+
+ Index:
+
+
+ 0▾
+
+
+
+
+ Arduino run first: Arduino loop forever: LED connected to Pin: BUILTIN_1 ▾ Status on ▾
\ No newline at end of file
diff --git a/static/img/en/mcu/led-block-3.svg b/static/img/en/mcu/led-block-3.svg
new file mode 100644
index 0000000..5dc2b57
--- /dev/null
+++ b/static/img/en/mcu/led-block-3.svg
@@ -0,0 +1,1043 @@
+
+ Arduino run first: Arduino loop forever: LED connected to Pin: BUILTIN_1 ▾ Status on ▾ 1000 wait milliseconds LED connected to Pin: BUILTIN_1 ▾ Status off ▾ 1000 wait milliseconds
\ No newline at end of file
diff --git a/static/img/en/mcu/mcu-battery-port.jpg b/static/img/en/mcu/mcu-battery-port.jpg
new file mode 100644
index 0000000..06fac8b
Binary files /dev/null and b/static/img/en/mcu/mcu-battery-port.jpg differ
diff --git a/static/img/en/mcu/mcu-modus.png b/static/img/en/mcu/mcu-modus.png
new file mode 100644
index 0000000..7414c7b
Binary files /dev/null and b/static/img/en/mcu/mcu-modus.png differ
diff --git a/static/img/en/mcu/mcu-usb-port.jpg b/static/img/en/mcu/mcu-usb-port.jpg
new file mode 100644
index 0000000..a1adb11
Binary files /dev/null and b/static/img/en/mcu/mcu-usb-port.jpg differ
diff --git a/static/img/en/mcu/ports/i2c-wire-port.png b/static/img/en/mcu/ports/i2c-wire-port.png
new file mode 100644
index 0000000..af5ec73
Binary files /dev/null and b/static/img/en/mcu/ports/i2c-wire-port.png differ
diff --git a/static/img/en/mcu/ports/io-port.png b/static/img/en/mcu/ports/io-port.png
new file mode 100644
index 0000000..b9655c8
Binary files /dev/null and b/static/img/en/mcu/ports/io-port.png differ
diff --git a/static/img/en/mcu/ports/uart-serial-port.png b/static/img/en/mcu/ports/uart-serial-port.png
new file mode 100644
index 0000000..77d52ae
Binary files /dev/null and b/static/img/en/mcu/ports/uart-serial-port.png differ
diff --git a/static/img/en/mcu/sensebox-mcu-ports.jpg b/static/img/en/mcu/sensebox-mcu-ports.jpg
new file mode 100644
index 0000000..9276e61
Binary files /dev/null and b/static/img/en/mcu/sensebox-mcu-ports.jpg differ
diff --git a/static/img/en/mcus2/mcus2-ports.png b/static/img/en/mcus2/mcus2-ports.png
new file mode 100644
index 0000000..22a6e7b
Binary files /dev/null and b/static/img/en/mcus2/mcus2-ports.png differ
diff --git a/static/img/en/mcus2/mcus2top.png b/static/img/en/mcus2/mcus2top.png
new file mode 100644
index 0000000..0405194
Binary files /dev/null and b/static/img/en/mcus2/mcus2top.png differ
diff --git a/static/img/en/mcus2/ports/i2c-wire-port.png b/static/img/en/mcus2/ports/i2c-wire-port.png
new file mode 100644
index 0000000..1bc128f
Binary files /dev/null and b/static/img/en/mcus2/ports/i2c-wire-port.png differ
diff --git a/static/img/en/mcus2/ports/io-port.png b/static/img/en/mcus2/ports/io-port.png
new file mode 100644
index 0000000..1739381
Binary files /dev/null and b/static/img/en/mcus2/ports/io-port.png differ
diff --git a/static/img/en/mcus2/ports/uart-serial-port.png b/static/img/en/mcus2/ports/uart-serial-port.png
new file mode 100644
index 0000000..b3106a9
Binary files /dev/null and b/static/img/en/mcus2/ports/uart-serial-port.png differ
diff --git a/static/img/en/mcus2/sd-card-slot.png b/static/img/en/mcus2/sd-card-slot.png
new file mode 100644
index 0000000..9e84cef
Binary files /dev/null and b/static/img/en/mcus2/sd-card-slot.png differ
diff --git a/static/img/en/mcus2/wifi-modul-s2.png b/static/img/en/mcus2/wifi-modul-s2.png
new file mode 100644
index 0000000..4799b36
Binary files /dev/null and b/static/img/en/mcus2/wifi-modul-s2.png differ
diff --git a/static/img/en/sensebox-home-bilder/home-schritt-2/osem-2.png b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-2.png
new file mode 100644
index 0000000..80506e1
Binary files /dev/null and b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-2.png differ
diff --git a/static/img/en/sensebox-home-bilder/home-schritt-2/osem-3.png b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-3.png
new file mode 100644
index 0000000..f43df25
Binary files /dev/null and b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-3.png differ
diff --git a/static/img/en/sensebox-home-bilder/home-schritt-2/osem-4.png b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-4.png
new file mode 100644
index 0000000..d821557
Binary files /dev/null and b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-4.png differ
diff --git a/static/img/en/sensebox-home-bilder/home-schritt-2/osem-5.png b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-5.png
new file mode 100644
index 0000000..00e3c5e
Binary files /dev/null and b/static/img/en/sensebox-home-bilder/home-schritt-2/osem-5.png differ
diff --git a/static/img/hardware-bilder/bodenfeuchte-temperatursensor/sensoren_bodenfeuchte_temperatur.png:Zone.Identifier b/static/img/hardware-bilder/bodenfeuchte-temperatursensor/sensoren_bodenfeuchte_temperatur.png_Zone.Identifier
similarity index 100%
rename from static/img/hardware-bilder/bodenfeuchte-temperatursensor/sensoren_bodenfeuchte_temperatur.png:Zone.Identifier
rename to static/img/hardware-bilder/bodenfeuchte-temperatursensor/sensoren_bodenfeuchte_temperatur.png_Zone.Identifier
diff --git a/static/img/hardware-bilder/luftdruck/Screen Shot 2024-04-25 at 11.46.52.png:Zone.Identifier b/static/img/hardware-bilder/luftdruck/Screen Shot 2024-04-25 at 11.46.52.png:Zone.Identifier
deleted file mode 100644
index 053d112..0000000
--- a/static/img/hardware-bilder/luftdruck/Screen Shot 2024-04-25 at 11.46.52.png:Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet
diff --git a/static/img/hardware-bilder/luftdruck/block-bmp280.png:Zone.Identifier b/static/img/hardware-bilder/luftdruck/block-bmp280.png:Zone.Identifier
deleted file mode 100644
index 053d112..0000000
--- a/static/img/hardware-bilder/luftdruck/block-bmp280.png:Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet
+
+### 2. Battery
+If you want to supply your senseBox with power via a battery, you can do this via the two-pin JST connector on the senseBox MCU.
+Simply plug the JST connector of the battery into the JST connector on the senseBox MCU. This is located at the top, next to the USB connection.
+
+
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-kompilieren.mdx b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-kompilieren.mdx
new file mode 100644
index 0000000..2b00539
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/boards/mcu/mcu-kompilieren.mdx
@@ -0,0 +1,73 @@
+---
+sidebar_position: 4
+title: Compile and transfer
+hide_title: false
+---
+
+import Layout from "@site/src/Layout";
+import { useBoardStore } from "@site/src/lib/stores/store";
+import BoardDropdown from "@site/src/components/BoardDropdown/BoardDropdown";
+import Tabs from '@theme/Tabs';
+
+import TabItem from '@theme/TabItem';
+import AlertBox from "@site/src/components/AlertBox/AlertBox";
+import copyToMCUGif from "@site/static/img/mcu/copy-to-mcu.gif"
+import copyToMCUGifMac from "@site/static/img/mcu/copy-to-mcu-mac.gif"
+
+## Compile
+In order for your program to be executed by the senseBox, it must first be translated into machine language.
+This process is called _compiling_. In the case of the senseBox, our server takes care of compiling.
+
+To have your sketch compiled, click on the orange button with the notepad symbol in Blockly.
+
+
+
+Once your sketch has been successfully compiled, you will be prompted to download a .BIN file.
+Save it in a location where you can easily find it later.
+
+## Transfer
+
+
+### Changing the mode of the senseBox MCU
+The senseBox MCU has two modes. The programming and the learning mode.
+
+In the **programming mode** a transmitted program is executed. You can recognize it by the green status LEDs of the senseBox MCU.
+
+In the **learning mode** the senseBox is recognized as a removable storage and new programs can be transferred.
+You can recognize it by the red LED next to the reset button lighting up permanently/pulsating.
+
+
+
+Um dein Programm übertragen zu können, musst du deine MCU nun in den Lern-Modus versetzen.
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
{" "}
+ 
+ 
+
+
+
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+
+
+ 
+ 
+