mirror of
https://github.com/sensebox/blockly-app
synced 2025-02-23 16:23:59 +01:00
879 lines
22 KiB
CSS
879 lines
22 KiB
CSS
![]() |
/**
|
||
|
* @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;
|
||
|
}
|