refactoring
This commit is contained in:
203
assets/css/styles.css
Executable file
203
assets/css/styles.css
Executable file
@@ -0,0 +1,203 @@
|
||||
/* load the Orbitron font */
|
||||
@font-face {
|
||||
font-family: Orbitron;
|
||||
src: url(fonts/orbitron-medium-webfont.woff);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: Orbitron !important;
|
||||
}
|
||||
body {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* the whole interface is in the table */
|
||||
table.blockly-table {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
td, tr {
|
||||
padding: 0px;
|
||||
}
|
||||
/* robot ID label error */
|
||||
span.has-error {
|
||||
color: #a94442 !important;
|
||||
border-color: #a94442 !important;
|
||||
background-color: #f2dede !important;
|
||||
}
|
||||
/* robot ID input error */
|
||||
input.has-error {
|
||||
border-color: #a94442 !important;
|
||||
}
|
||||
/* robot connect button */
|
||||
a.btn-robot-go, a.btn-robot-go:hover {
|
||||
color: #3768d8;
|
||||
}
|
||||
/* start code button */
|
||||
a.btn-start {
|
||||
border-width: 3px !important;
|
||||
border-color: #4cae4c !important;
|
||||
background-color: #44CC00 !important;
|
||||
}
|
||||
/* stop code button */
|
||||
a.btn-stop {
|
||||
border-width: 3px !important;
|
||||
border-color: #d43f3a !important;
|
||||
background-color: #b80000 !important;
|
||||
}
|
||||
.btn:hover, .btn.hover {
|
||||
border-width: 3px;
|
||||
border-color: #fc3 !important;
|
||||
}
|
||||
/* google blockly modifications */
|
||||
.goog-menuitem-content {
|
||||
font-size: 2em !important;
|
||||
}
|
||||
/* start and stop button group */
|
||||
div.btn-group-control {
|
||||
width: 100%;
|
||||
z-index: 35;
|
||||
bottom: 0px;
|
||||
position: fixed !important;
|
||||
}
|
||||
/* coockie button */
|
||||
a.cc-btn:hover {
|
||||
background-color: #ffd500ff !important;
|
||||
}
|
||||
/* the battery div */
|
||||
div#battery {
|
||||
z-index: 35;
|
||||
right: 0.5vw;
|
||||
font-size: 2vw;
|
||||
color: #ee4d4d;
|
||||
position: absolute;
|
||||
}
|
||||
/* the battery div connected status */
|
||||
div#battery.connected {
|
||||
color: #44CC00;
|
||||
}
|
||||
/* the control panel */
|
||||
div#panel {
|
||||
z-index: 36;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
/* the live stream div */
|
||||
div#stream {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
/* Blockly workspace */
|
||||
div#blocklyArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* ace editor */
|
||||
div#blocklyCode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
/* read only ace editor */
|
||||
div#readOnlyBlocklyCode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
/* for desktop screen */
|
||||
@media screen and (min-width: 1000px) {
|
||||
/* logo object */
|
||||
img.logo {
|
||||
width: 25%;
|
||||
padding: 1vw;
|
||||
}
|
||||
/* robot ID input container */
|
||||
div.input-group {
|
||||
width: 35%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* robot ID label */
|
||||
span.input-group-addon {
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
padding: 0.5vw 1vw !important;
|
||||
}
|
||||
/* robot ID input field */
|
||||
input.form-control {
|
||||
font-size: 2vw;
|
||||
padding: 0.5vw 1vw !important;
|
||||
}
|
||||
/* robot connect button container */
|
||||
div.btn-group-robot {
|
||||
width: 35%;
|
||||
}
|
||||
/* robot connect button */
|
||||
a.btn-robot-go {
|
||||
width: 100%;
|
||||
font-size: 10vw !important;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
/* left table cell */
|
||||
td#leftCell {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
/* right table cell */
|
||||
td#rightCell {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* for mobile and tablet screen */
|
||||
@media screen and (max-width: 1000px) {
|
||||
/* logo object */
|
||||
img.logo {
|
||||
width: 25%;
|
||||
padding: 1vw;
|
||||
}
|
||||
/* robot ID input container */
|
||||
div.input-group {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* robot ID label */
|
||||
span.input-group-addon {
|
||||
font-size: 4.5vw;
|
||||
font-weight: bold;
|
||||
padding: 0.5vw 1vw !important;
|
||||
}
|
||||
/* robot ID input field */
|
||||
input.form-control {
|
||||
font-size: 4.5vw;
|
||||
padding: 0.5vw 1vw !important;
|
||||
}
|
||||
/* robot connect button container */
|
||||
div.btn-group-robot {
|
||||
width: 100%;
|
||||
}
|
||||
/* robot connect button */
|
||||
a.btn-robot-go {
|
||||
width: 100%;
|
||||
font-size: 10vw !important;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
/* left table cell */
|
||||
td#leftCell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* right table cell */
|
||||
td#rightCell {
|
||||
display: none;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user