1
0
Fork 0
mirror of https://github.com/sensebox/blockly-app synced 2025-02-23 16:23:59 +01:00
blockly-app/assets/blockly/ardublockly/ardublockly.css

879 lines
22 KiB
CSS
Raw Permalink Normal View History

/**
* @license Licensed under the Apache License, Version 2.0 (the "License"):
* http://www.apache.org/licenses/LICENSE-2.0
*
* @fileoverview CSS file for the Ardublockly application.
*
* There are a lot of '!important' tags in this file as a lot of the rules set
* here go against the css rules from the Materialize framework.
*/
/******************/
/* Font sources */
/******************/
@font-face {
font-family: "Droid Sans Mono";
src: url("font/droid/DroidSansMono.ttf") format("truetype");
}
/**********/
/* HTML */
/**********/
html,
body {
height: 100% !important;
padding: 0;
margin: 0;
}
body {
background-color: #eeeeee;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*********************/
/* Arduino Colours */
/*********************/
.arduino_teal {
background-color: #00979C;
}
.arduino_teal_dark {
background-color: #006468;
/* background-color: #00878F; from community logo */
}
.arduino_teal_light {
background-color: #62AEB2;
}
.arduino_orange {
background-color: #E47128;
}
.arduino_yellow {
background-color: rgba(255, 204, 51, 1);
/* background-color: #FFCC33; */
/* background-color: #E5AD24; from community logo */
}
.arduino_brown {
background-color: #8C7965;
}
.sensebox_green {
background-color: #4EAF47;
}
.hidden {
display: none;
}
/********************/
/* Navigation bar */
/********************/
.nav-fixed {
border-radius: 0;
position: inherit;
margin-bottom: 30px;
z-index: 997 !important;
}
@media only screen and (min-width : 993px) {
body {
padding-top: 100px;
}
.nav-fixed {
position: fixed;
right: 0;
left: 0;
top: 0;
margin-bottom: 0px;
z-index: 997;
}
}
/* Side nav Logo */
ul.side-nav li.logo {
text-align: center;
margin: 0px !important;
padding: 0px 0px !important;
border: none !important;
height: 145px;
background-color: transparent;
}
ul.side-nav li.logo:hover {
background-color: transparent;
}
ul.side-nav li.side-menu-end {
background-color: #eeeeee;
border-radius: 0px 0px 25px 0px;
border-left: 4px solid #ffffff;
border-bottom: 4px solid #dddddd;
border-right: 4px solid #dddddd;
border-bottom: 4px solid #dddddd;
line-height: 25px;
}
/************************************/
/* Blocks, Arduino, and XML areas */
/************************************/
.content {
margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff;
}
.height_transition {
transition: height 0.2s ease-out;
-ms-transition: height 0.2s ease-out;
-moz-transition: height 0.2s ease-out;
-webkit-transition: height 0.2s ease-out;
}
#blocks_panel {
padding: 0px;
position: relative !important;
min-height: 480px;
}
.blocks_panel_large {
height: -moz-calc(100vh - 190px); /* Firefox */
height: -webkit-calc(100vh - 190px); /* WebKit */
height: -o-calc(100vh - 190px); /* Opera */
height: calc(100vh - 190px); /* Standard */
}
.blocks_panel_small {
height: -moz-calc(100vh - 350px); /* Firefox */
height: -webkit-calc(100vh - 350px); /* WebKit */
height: -o-calc(100vh - 350px); /* Opera */
height: calc(100vh - 350px); /* Standard */
}
#content_blocks {
margin: 0;
padding: 0;
min-height: 480px;
height: -moz-calc(100vh - 190px); /* Firefox */
height: -webkit-calc(100vh - 190px); /* WebKit */
height: -o-calc(100vh - 190px); /* Opera */
height: calc(100vh - 190px); /* Standard */
}
#content_xml {
resize: none;
outline: none;
border: none;
padding: 0px 5px;
font-family: monospace;
font-size: smaller;
overflow: scroll;
font-style: 0.2em !important;
min-height: 384px;
}
.content_xml_large {
height: -moz-calc(100vh - 286px); /* Firefox */
height: -webkit-calc(100vh - 286px); /* WebKit */
height: -o-calc(100vh - 286px); /* Opera */
height: calc(100vh - 286px); /* Standard */
}
.content_xml_small {
height: -moz-calc(100vh - 446px); /* Firefox */
height: -webkit-calc(100vh - 446px); /* WebKit */
height: -o-calc(100vh - 446px); /* Opera */
height: calc(100vh - 446px); /* Standard */
}
/* The materialize framework changes height of the div to show or hide */
/* the collapsible elements. */
#content_arduino {
resize: none;
outline: none;
border: none;
padding: 0px 5px;
font-size: 0.9rem;
font-family: "Droid Sans Mono", monospace;
overflow: auto;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
min-height: 388px;
}
.content_arduino_large {
height: -moz-calc(100vh - 280px); /* Firefox */
height: -webkit-calc(100vh - 280px); /* WebKit */
height: -o-calc(100vh - 280px); /* Opera */
height: calc(100vh - 280px); /* Standard */
}
.content_arduino_small {
height: -moz-calc(100vh - 440px); /* Firefox */
height: -webkit-calc(100vh - 440px); /* WebKit */
height: -o-calc(100vh - 440px); /* Opera */
height: calc(100vh - 440px); /* Standard */
}
/****************/
/* IDE output */
/****************/
.ide_output_wrapper {
width: 100%;
margin: 0;
padding: 0;
position: fixed;
bottom: -16px;
z-index: 10;
}
.ide_output_collapsible {
box-shadow: 0 0px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-left: 0;
border-right: 0;
}
.ide_output_header_normal {
background-color: #4EAF47;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_highlight {
background-color: #62AEB2;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_error {
background-color: #E47128;
color: #ffffff;
-moz-transition: background-color 0.6s ease-in;;
-o-transition: background-color 0.6s ease-in;
-webkit-transition: background-color 0.6s ease-in;
}
#content_ide_output {
resize: none;
outline: none;
border: none;
padding: 0px 5px;
font-family: monospace;
overflow: auto;
font-style: 0.2em !important;
min-height: 160px;
max-height: 160px;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
background-color: #303030;
color: #ffffff;
}
/* IDE output content text formatting */
#content_ide_output .arduino_dialog_success {
color: #00979C; /* arduino light teal */
font-size: 1.2rem;
margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_failure {
color: #E47128; /* arduino orange */
font-size: 1.2rem;
margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_out {
color: #ffffff;
font-size: 0.9rem;
}
#content_ide_output .arduino_dialog_out_error {
color: #E47128; /* arduino orange */
font-size: 0.9rem;
padding-top: 8px;
display: block;
}
/* Spacer is used to not leave any content behind the collapsible header */
#ide_output_spacer {
height: 40px;
}
@media only screen and (min-width: 0) {
#ide_output_spacer {
height: 20px;
}
}
@media only screen and (min-width: 601px) {
#ide_output_spacer {
height: 30px;
}
}
@media only screen and (min-width: 993px) {
#ide_output_spacer {
height: 40px;
}
}
/*************/
/* Buttons */
/*************/
#ide_buttons_wrapper {
position: absolute;
right: 25px;
top: -20px;
height: 55px;
width: 160px;
z-index: 12;
}
#button_compile_sketch {
position: absolute;
right: 0px;
top: 0px;
width: 55px;
height: 55px;
}
#button_compile_sketch i {
font-size: 2.4rem !important;
line-height: 55px;
}
#button_copy_clipboard {
position: absolute;
right: 72px;
top: 10px;
visibility: visible;
opacity: 1;
-moz-transition: visibility 0.3s linear, opacity 0.3s linear;
-webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
-o-transition: visibility 0.3s linear, opacity 0.3s linear;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_ide_large {
position: absolute;
right: 0px;
top: 0px;
width: 55px;
height: 55px;
}
#button_ide_large i {
font-size: 2.4rem !important;
line-height: 55px;
}
#button_ide_middle {
position: absolute;
right: 72px;
top: 10px;
visibility: hidden;
opacity: 0;
-moz-transition: visibility 0.3s linear, opacity 0.3s linear;
-webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
-o-transition: visibility 0.3s linear, opacity 0.3s linear;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_ide_left {
position: absolute;
right: 126px;
top: 10px;
visibility: hidden;
opacity: 0;
-moz-transition: visibility 0.3s linear, opacity 0.3s linear;
-webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
-o-transition: visibility 0.3s linear, opacity 0.3s linear;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_ide_large:hover:before,
#button_ide_middle:hover:before,
#button_ide_left:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255, 0.25);
transition: all .3s linear;
}
#button_load_xml {
position: absolute;
right: 36px;
bottom: 36px;
display: none;
}
#button_load_xml .mdi-action-extension {
font-size: 2.1rem !important;
}
/* These floating buttons needs to be at a higher z index than card when */
/* floating and lower when clicked. */
#button_ide_large:hover,
#button_ide_middle:hover,
#button_ide_left:hover,
#button_load_xml:hover {
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#button_ide_large:active,
#button_ide_middle:active,
#button_ide_left:active,
#button_load_xml:active {
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Toggle the toolbox on and off button */
.button_toggle_toolbox_on {
position: absolute;
margin: 0 !important;
padding: 0 !important;
left: 12px;
top: 8px;
text-align: center;
font-size: 1.5rem !important;
z-index: 5;
border-color: #e0e0e0 !important;
border-width: 1px !important;
-webkit-border-radius: 4px 4px 4px 4px !important;
-moz-border-radius: 4px 4px 4px 4px !important;
border-radius: 4px 4px 4px 4px !important;
background: rgba(98, 174, 178, .2) !important; /* Arduino Light Teal */
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
-ms-transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
-moz-transition: background 0.3s linear, -moz-box-shadow 0.3s linear, border-width 0.3s linear;
-webkit-transition: background 0.3s linear, -webkit-box-shadow 0.3s linear, border-width 0.3s linear;
}
.button_toggle_toolbox_off {
position: absolute;
margin: 0 !important;
padding: 0px !important;
left: 12px;
top: 8px;
text-align: center;
font-size: 1.5rem !important;
z-index: 5;
}
/*****************************/
/* Spinner and new colours */
/*****************************/
.ide_loader {
position: absolute !important;
right: 0px !important;
top: 0px !important;
width: 55px !important;
height: 55px !important;
z-index: 5;
}
.spinner-orange {
border-color: #E47128;
}
.active .spinner-layer.spinner-orange {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-dark-teal {
border-color: #00878F;
}
.active .spinner-layer.spinner-dark-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-yellow {
border-color: rgba(255, 204, 51, 1);
}
.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-light-teal {
border-color: #62AEB2;
}
.active .spinner-layer.spinner-light-teal {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.spinner-purple {
border-color: #8e24aa;
}
.active .spinner-layer.spinner-purple {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
/************************/
/* Modals and content */
/************************/
/* Large modal section blocks */
.modal_section {
margin: 24px 0px;
width: 100%;
}
/* Blocks tick label as a title */
.modal_label_title {
font-size: 1.6rem !important;
color: black;
}
/* Blocks modal divider */
#blocks_menu_body .divider {
margin-top: 4px;
margin-bottom: 8px;
}
/* Arduino output modal dialog */
#arduino_dialog_body {
padding-top: 25px;
}
.arduino_dialog_out {}
.arduino_dialog_out_error {
color: #E47128; /* arduino orange */
padding-top: 25px;
display: block;
}
.arduino_dialog_success {
color: #00979C; /* arduino light teal */
}
.arduino_dialog_failure {
color: #E47128; /* arduino orange */
}
/* Footer buttons padding */
.modal_right_button {
margin: 0px 0px 0px 48px !important;
}
/* Small modal responsive design */
.modal_small {
height: auto !important;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-height: 450px;
}
.modal_small .modal-content {
margin-top: 0;
padding-top: 12px;
margin-bottom: 0;
padding-bottom: 0;
}
.modal_small input {
width: 100%;
}
@media only screen and (min-width: 0) {
.modal_small {
max-width: 75% !important;
width: 75% !important;
}
}
@media only screen and (min-width: 601px) {
.modal_small {
max-width: 55% !important;
width: 55% !important;
}
}
@media only screen and (min-width: 993px) {
.modal_small {
max-width: 35% !important;
width: 35% !important;
}
}
/*****************/
/* Sketch name */
/*****************/
.sketch_name_wrapper {
display: inline-block;
padding-left: 5px;
}
.sketch_name_icon {
display: inline !important;
font-size: 1.2rem !important;
float: right;
padding-top: 3px;
}
.sketch_name {
width: auto !important;
max-width: 400px;
line-height: 64px;
height: 3rem !important;
font-size: 1.5rem !important;
border-bottom: 0px solid #EEE !important;
font-style: italic;
}
.sketch_name:focus {
border-bottom: 1px solid #EEE !important;
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
.sketch_name {
max-width: 200px;
}
/* Remove the "Ardublockly title only leaving the sketch name */
.app_title {
display: none;
}
}
@media only screen and (min-width : 600px) {
.sketch_name {
max-width: 275px;
}
}
@media only screen and (min-width : 993px) {
.sketch_name {
max-width: 350px;
}
}
/************/
/* Others */
/************/
/* Edit logo for code and xml collapsibles */
.collapsible_logo {
width: 3rem;
font-size: 1.6rem;
line-height: 3rem;
font-weight: bold;
display: block;
float: left;
text-align: center;
margin-right: 1rem;
}
/* Colours for the new and deleted code highlighting */
.code_highlight_new {
background-color: rgba(255, 204, 51, 0.5); /* Arduino yellow 50% */
}
.code_highlight_deleted {
background-color: #FDBEBE;
}
/*****************************/
/* Overwriting Blockly CSS */
/*****************************/
/* Blockly text for the following components: */
.blocklyTreeLabel, /* Toolbox */
.blocklyText, /* Block */
.goog-menuitem-content { /* Drop down menu */
font-family: "Roboto", sans-serif!important;
}
/* Entire Blockly area, Toolbox dranw on top */
.blocklySvg {
border-width: 0 !important;
}
/* Toolbox */
.blocklyToolboxDiv {
border-color: #e0e0e0 !important;
border-width: 0px 1px 0px 0px !important;
-webkit-border-radius: 0px 4px 4px 0px !important;
-moz-border-radius: 4px 4px 0px 0px !important;
border-radius: 0px 4px 4px 0px !important;
border: none !important;
margin: 0px !important;
padding: 0px 0px 0px 0px !important;
background: rgba(98, 174, 178, .2) !important; /* Arduino Light Teal */
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
overflow: hidden !important;
}
.blocklyTreeRoot {
background: none !important;
border: none !important;
margin: 36px 0px 0px 0px !important;
padding: 0px 1px !important;
height: -moz-calc(100% - 37px); /* Firefox */
height: -webkit-calc(100% - 37px); /* WebKit */
height: -o-calc(100% - 37px); /* Opera */
height: calc(100% - 37px); /* Standard */
overflow-x: hidden;
overflow-y: auto;
}
.blocklyTreeRow {
background: none !important;
/* border: none !important; */
margin: 0px 0px !important;
padding: 7px 16px 7px 0px !important;
box-sizing: content-box !important;
}
[aria-level = "2"]{
margin-left: 16px !important;
}
.blocklyTreeSelected {
background-color: #E47128 !important; /* arduino orange */
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 204, 51, 1) !important; /* arduino yellow */
}
.blocklyTreeLabel {
}
.blocklyTreeSeparator{
padding: 0px !important;
margin: 0px !important;
}
/* Toolbox second column with blocks*/
.blocklyFlyoutBackground {
fill: #DEEEEF !important;
fill-opacity: 0.7 !important;
-webkit-border-radius: 0px 4px 4px 0px !important;
-moz-border-radius: 0px 4px 4px 0px !important;
border-radius: 0px 4px 4px 0px !important;
}
/* Blockly scrollbars */
.blocklyScrollbarKnob {
fill: #00878F !important;
fill-opacity: 0.7 !important;
}
.blocklyScrollbarBackground {
stroke-width: 0px !important;
fill: none !important;
}
/* Edit select colour to Arduino yellow. (Edited out as already this colour)
.blocklyHighlightedConnectionPath,
.blocklySelected>.blocklyPath {
stroke: rgba(255, 204, 51, 1) !important;
} */
/*********************************/
/* Overwriting Materialize CSS */
/*********************************/
/* Modify container to have a larger width in all resolutions */
.container {
width: 90%;
max-width: initial !important;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media only screen and (min-width : 601px) {
.container {
width: 95%;
}
}
@media only screen and (min-width : 993px) {
.container {
width: 100%;
}
}
@media only screen and (min-width : 1380px) {
.container {
width: 90%;
}
}
/* Maximize horizontal space for mobile */
@media only screen and (min-width: 0px) and (max-width: 600px) {
body {
padding-top: 0px;
}
/* Expand to all visible horizontal space */
.container {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
nav {
margin: 0 !important;
padding: 0px 12px !important;
}
/* remove space between cards and navigation bar */
.col {
margin-top: -8px;
}
}
/* Increase the text size of the side menu */
ul.side-nav {
padding: 0px !important;
line-height: 64px !important;
}
ul.side-nav i {
font-size: 1.8rem !important;
}
ul.side-nav .collapsible {
margin: 0 !important;
}
/* Set the background effect in the side menu */
ul.side-nav {
background-color: transparent;
box-shadow: none !important;
}
ul.side-nav li {
background-color: #eeeeee;
}
ul.side-nav li {
background-color: #eeeeee;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 2px solid #dddddd;
border-left: 2px solid #ffffff;
}
ul.side-nav li ul li ul {
cursor: pointer;
border: none !important;
}
ul.side-nav li ul li ul li {
border: none !important;
}
/* Add extra margin to the side menu button*/
.button-collapse {
margin-right: 16px;
}
/* Increase the size of Materialize Modal in small resolutions */
@media only screen and (max-width : 600px) {
.modal {
width: 80% !important;
max-width: 80% !important;
}
}
/* Why the hell does button large has a predefined background colour !! */
.btn-large:hover {
background-color: inherit;
}
/* Circle clipper (loading animation) thickness */
.circle-clipper .circle {
border-width: 4px !important;
}
/* Materialize messes with these, so reset them here */
.blocklyHtmlInput {
border: none !important;
border-radius: 4px !important;
font-family: sans-serif !important;
height: 100% !important;
margin: 0 !important;
outline: none !important;
padding: 0 1px !important;
width: 100% !important;
background-color: white !important;
}
img.animated-gif{
width: auto;
height: 200px;
}
.sb-disabled {
background: rgb(168, 167, 167) !important;
}