Applying UI updates from Lego (#322)

This commit is contained in:
Sam El-Husseini 2018-02-12 12:23:25 -08:00 committed by GitHub
parent 7bd2192a0a
commit 96f1086c8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 34 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 705 B

After

Width:  |  Height:  |  Size: 681 B

View File

@ -9,14 +9,14 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="101.07757"
height="100.57249"
viewBox="0 0 101.07757 100.57249"
width="76.47757"
height="75.972496"
viewBox="0 0 76.477571 75.972499"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="simulator.svg"
inkscape:export-filename="/Users/sam/pxt-ev3/docs/static/backgrounds/simulator.png"
inkscape:export-filename="C:\Users\samelh\pxt-ev3\docs\static\backgrounds\simulator.png"
inkscape:export-xdpi="50.11311"
inkscape:export-ydpi="50.11311">
<defs
@ -29,20 +29,20 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="4"
inkscape:cx="134.33221"
inkscape:cy="8.1953909"
inkscape:cx="60.782211"
inkscape:cy="-4.104587"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="28.3"
fit-margin-left="28.3"
fit-margin-right="28.3"
fit-margin-bottom="28.3"
fit-margin-top="16"
fit-margin-left="16"
fit-margin-right="16"
fit-margin-bottom="16"
units="px"
inkscape:window-width="2556"
inkscape:window-height="1395"
inkscape:window-x="4"
inkscape:window-y="1"
inkscape:window-width="3000"
inkscape:window-height="1875"
inkscape:window-x="-13"
inkscape:window-y="-13"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
@ -60,9 +60,9 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-68.659229,-124.25339)">
transform="translate(-80.959229,-136.55339)">
<ellipse
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.31372549"
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.47058824"
id="path4699"
cx="119.19801"
cy="174.53964"

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -127,7 +127,8 @@
"invertedMenu": false,
"invertedMonaco": false,
"monacoToolbox": true,
"invertedToolbox": true,
"invertedToolbox": false,
"coloredToolbox": true,
"hasAudio": true,
"usbHelp": [],
"extendEditor": true,

View File

@ -31,6 +31,7 @@ span.blocklyTreeIcon {
/*box-shadow: inset 0px 0px 0px 2px #D3A805;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;*/
box-shadow: 3px 0 1px -2px @legoGreyLight;
}
div.blocklyTreeRow {
@ -39,10 +40,14 @@ div.blocklyTreeRow {
/*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
border: none !important;
border-bottom: 1px solid #EBEBEB !important;
}
div.blocklyTreeSeparator {
border-bottom: solid #CEA403 2px;
border: none;
/*border-bottom: solid #CEA403 2px;*/
}
/* Remove shadow around blockly blocks */
@ -66,9 +71,9 @@ span.blocklyTreeLabel {
}
.blocklySearchInputField {
border-radius: 1rem !important;
border: 1px solid #ebebeb !important;
}
/* Square shaped corners */
.blocklyDropDownDiv {
border-radius: 0px !important;

View File

@ -8,6 +8,6 @@
}
#mainmenu {
background: #f4f7f9;
background: @legoGreyLight;
border-bottom: 5px solid #00a5c8;
}

View File

@ -27,9 +27,11 @@
@orange: #fa7f2a;
@green: @brightYellowishGreen;
@legoGreyLight: #eaeeef;
@legoGreyLight: #F4F1F4;
@legoGreyDark: #f4f7f9;
@grey: @legoGreyLight;
/* Lego official colors */
/* Solid */
@ -126,7 +128,7 @@
--------------------*/
@simulatorBackground: #D6EDFF; /* #FFF */ /* #fcfbfa; */
@editorToolsBackground: #fff; /* #fcfbfa; */
@editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */
@blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/
@homeScreenBackground: #EAEEEF;
@ -149,8 +151,8 @@
Editor
--------------------*/
@blocklyToolboxColor: #FAC80A;
@trashIconColor: white;
@blocklyToolboxColor: #FFF; /*#FAC80A;*/
@trashIconColor: #FAC80A; /*white*/
/*-------------------

View File

@ -29,11 +29,23 @@
&:extend(.ui.primary.button all);
}
.ui.button.editortools-btn {
&:extend(.ui.blue.button all);
@buttonBackgroundColor: white;
@buttonForegroundColor: #5E5E5E;
.ui.button.editortools-btn, .simtoolbar .ui.button,
.ui.button.collapse-button, .ui.button.collapsed-button {
background-color: @buttonBackgroundColor;
color: @buttonForegroundColor;
border: none !important;
box-shadow: none !important;
}
.ui.button.editortools-btn:hover,
.ui.button.editortools-btn:focus {
color: darken(@buttonForegroundColor, 0.2) !important;
}
.projectname-input {
.ui.input.projectname-input input {
box-shadow: none; border: none !important;
}
.ui.button.getting-started-btn {
@ -93,7 +105,7 @@
}
#downloadArea {
background: white;
background: @legoGreyLight;
}
/* Mobile */
@ -109,15 +121,18 @@
/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
#editortools, #downloadArea {
background: #828A95;
}
}
/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
#editortools, #downloadArea {
background: #828A95;
}
/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
@media only screen and (min-width: @computerBreakpoint) {
.fullscreensim #boardview {
background: @simulatorBackground data-uri("../docs/static/backgrounds/simulator.png") 0 0 repeat !important;
}
}
/* Mobile, Tablet AND thin screen */