UNPKG

pxt-core-own

Version:

Microsoft MakeCode, also known as Programming Experience Toolkit (PXT), provides Blocks / JavaScript tools and editors

1,417 lines (1,261 loc) 32.5 kB
/* Import all components */ @import 'themes/default/globals/site.variables'; @import 'themes/pxt/globals/site.variables'; /* Reference import */ @import (reference) "semantic.less"; /******************************* Layout *******************************/ html { height: 100%; width: 100%; overflow: hidden; font-size:16px; } body { height: 100%; width: 100%; padding: 0; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: fixed; } * { min-height: 0; min-width: 0; } pre { tab-size: 4; } /* Main Layout */ #allcontent { height: 100%; width: 100%; display: flex; flex-direction: column; position: absolute; } #msccBanner { /* Don't change! This legal text should always be above everything else */ z-index: @aboveEverythingZIndex; } #editorcontent { flex: 1 1 auto; position: relative; } #filelist, #maineditor, #sidedocs { position: absolute; bottom: 0rem; } #filelist, #maineditor, #sidedocs { top: @mainMenuHeight; } .hideMenuBar #filelist, .hideMenuBar #maineditor, .hideMenuBar #sidedocs { top: 0 !important; } .full-abs { position: absolute !important; left: 0; top: 0; bottom: 0; right: 0; } .no-select { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* Main Editor layout */ #maineditor { left: @simulatorWidth; right: 0; overflow: visible; } /* Editor tools */ @editorToolsHeight: 10rem; @editorToolsCollapsedHeight: 4.7rem; @editorToolsCollapsedMobileHeight: 3.4rem; @editorToolsThinHeight: 3rem; #editortools { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: @editorToolsZIndex; height: @editorToolsCollapsedHeight; background-color: @editorToolsBackground; } .transparentEditorTools #editortools { background-color: transparent; z-index: (@blocklyFlyoutZIndex)-1; } #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #filelist { bottom: @editorToolsCollapsedHeight; } .hideEditorToolbar #blocksArea, .hideEditorToolbar #monacoEditor, .hideEditorToolbar #pxtJsonEditor, .hideEditorToolbar #serialEditor, .hideEditorToolbar #filelist { bottom: 0rem !important; } #filelistOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; cursor: pointer; } /* File list / Simulator layout */ #simulator { height: 100%; } #filelist, #downloadArea { min-width: @simulatorWidth; max-width: @simulatorWidth; left: 0; } #filelist { padding: 1em 2em 1em 2em; overflow-x: hidden; overflow-y: auto; margin-top: 0; margin-bottom: 0; width: 100%; background-color: @simulatorBackground; z-index: @simulatorZIndex; } #filelist .simtoolbar { -webkit-transition: opacity 0.2s; /* Safari */ -moz-transition: opacity 0.2s; /* Mozilla */ -webkit-transition-timing-function: linear; /* Mozilla */ -o-transition: opacity 0.2s; /* Opera */ transition: opacity 0.2s; transition-timing-function: linear; } #downloadArea { margin-top: 0 !important; padding-top: 0.55rem; background-color: @simulatorBackground; } .transparentEditorTools #downloadArea { background-color: transparent !important; } .filemenu { direction:ltr; } #filelist .menu { width: 100%; margin: 0; margin-top: 1rem; } #filelist .nested.item { padding: .92857143em 1.14285714em; padding-left: 2rem; } #filelist .header { background: rgba(0,0,0,0.05); } #simulators { text-align: center; } .simulator .ui.embed .icon.xicon::before { transform: translateX(-77%) translateY(-120%); transition: opacity .25s ease,color .25s ease; } .simulator .ui.embed .icon.xicon::after { background: rgba(0,0,0,.3); transition: opacity .25s ease; } .simulator .ui.embed .icon.xicon:hover:before { color: @green; } .simulator .ui.embed .icon.xicon:hover:after { opacity: 0.6; } /* Simulator */ div.simframe { border:none; margin:0 0 0.5rem 0; position: relative; background:transparent; width:100%; padding-bottom: 81.96%; } div.simframe > iframe { position:absolute; top:0; left: 0; width:100%; height:100%; } .simHeadless { height: 0 !important; width: 0 !important; } /* Menu */ .menubar .ui.menu .item.editor-menuitem { padding: 0; } .menubar .ui.menu .item.editor-menuitem:hover { background: none; } .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid { background: fade(@black, 40%) !important; border: 3px solid fade(@black, 20%); border-radius: 2.5rem !important; position: relative; } .menubar .ui.menu.fixed .ui.item.editor-menuitem .item { border-radius: 2.5rem !important; width: 140px; z-index: 2; } .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.link:hover { background: none; } .menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) { opacity: 0.6; } .menubar .ui.menu.inverted.fixed .ui.item.editor-menuitem .active.item { background: none; color: @mainMenuInvertedBackground !important; } .ui.item.editor-menuitem .item.toggle { z-index: 1 !important; margin: 1px; height: 46px; left: 0; position: absolute; opacity: 1 !important; background: none; margin: 0; -webkit-transition: margin-left .3s; /* Safari */ -moz-transition: margin-left .3s; /* Mozilla */ -webkit-transition-timing-function: ease-in; /* Mozilla */ -o-transition: margin-left .3s; /* Opera */ transition: margin-left .3s; transition-timing-function: ease-in; } .active.item.blocks-menuitem ~ .toggle { margin-left: 0 !important; box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .active.item.javascript-menuitem ~ .toggle { margin-left: 140px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .active.item.python-menuitem ~ .toggle { margin-left: 280px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } /* Help card */ #helpcard { position: absolute; right: 7rem; bottom: 2.2rem; margin: 0; z-index: @helpCardZIndex; font-size:0.8rem; } /* Logo */ .ui.menu .ui.item.logo { font-size: 2.2rem; margin: 0; padding: 0rem !important; } .ui.item.logo .name { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, inherit; color: #666666; padding: 0 0.3rem; } .ui.item.logo svg { width: 1.2rem; height: 1.2rem; } .ui.item.logo img { max-height: 1.6rem; margin-left: 1rem; margin-right: 1rem; } /* Powered by Microsoft logo*/ #editorlogo { position: fixed; bottom: 0; right: 0; height: 42px; background-color: @blocklySvgColor; z-index: @editorLogoZIndex; display: none; } #editorlogo > .poweredbylogo { position: absolute; left: 10px; bottom: 5px; width: 100%; height: 32px; background-repeat: no-repeat; background-size: contain; } /* Sandbox */ .sandboxfooter { position:absolute; bottom:0rem; right:0rem; z-index: @sandboxFooterZIndex; margin-bottom: 0.2rem !important; } .sandboxfooter .item{ font-size: 0.8rem !important; } /* code card */ .ui.card .image pre { margin-left:0.5rem; margin-right:0.5rem; color: #000; font-size:0.7rem; white-space: pre-wrap; max-height: 10rem; overflow-y: hidden; } /* Popup message */ #msg { position: absolute; bottom: 5rem; left: 0; right: 0; text-align: center; } #msg > div { display: inline-block !important; z-index: @editorMessageZIndex; } #msg > div:empty { display: none !important; } /* Button Colors */ .ui.button.editortools-btn { &:extend(.ui.grey.button all); } /* Icon and text */ .ui.item.link.dbg-btn > .icon-and-text.icon ~ .ui.text, .ui.item.link > .icon-and-text.icon ~ .ui.text.exit-debugmode-btn, .ui.item.icon > .icon-and-text.icon ~ .ui.text, .ui.button.icon > .icon-and-text.icon ~ .ui.text { margin-left: 0.5em !important; } /* Beta */ .ui.label.betalabel { padding: 0.3em; } /* Collapse/expand button for simulator, sidedocs */ #togglesim, #sidedocstoggle { position: absolute; border-top-left-radius: 100px; border-bottom-left-radius: 100px; top: 40%; height: 20%; z-index: @sidedocZIndex; padding: 0; margin: 0; background: grey; box-shadow: none!important; transition: none; &:hover, &:focus { background: #5A5A5A; } } // Factor in 4rem height of top bar #togglesim { left: -21px; top: calc(~'40% - 2.4rem'); height: calc(~'20% + 0.8rem'); } .collapsedEditorTools #togglesim { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 100px; border-bottom-right-radius: 100px; left: -21px; } /******************************* Notification banner *******************************/ #notificationBanner { z-index: 1000; } .notificationBannerVisible #filelist, .notificationBannerVisible #maineditor, .notificationBannerVisible #sidedocs { top: calc(@mainMenuHeight + @bannerHeight); } .notificationBannerVisible #mainmenu { top: @bannerHeight; margin: 0; } #notificationBanner { padding: 0; font-family: "Segoe UI", "Helvetica Neue", sans-serif; height: @bannerHeight; margin-top: 0; display: flex; flex-direction: row; align-items: center; .bannerLeft { display: block; .content { display: flex; flex-direction: row; align-items: center; line-height: 100%; > * { margin-left: 0.25rem; } img { height: @bannerHeight; } a.link { font-weight: bold; text-decoration: underline; &:hover, &:focus { cursor: pointer; } } } } .bannerRight { display: flex; flex-direction: row-reverse; flex-grow: 1; line-height: 100%; .close { &:hover, &:focus { cursor: pointer; color: darken(@bannerContrastColor, 25%); } } } } #notificationBanner.default { background-color: @bannerBackgroundColor; color: @bannerContrastColor; outline: 2px solid @bannerContrastColor; a.link { color: @bannerLinkColor; &:hover, &:focus { color: darken(@bannerLinkColor, 10%); } } } /****************************** Avatar ******************************/ .avatar { position: relative; } @media only screen { .avatar .avatar-image { position: absolute; left: 0; top: 1em; width: 3em; height: 3em; background-size: contain; background-image: @avatarImage; } } @media only print { .avatar .avatar-image { display: list-item; list-style-image: @avatarImage; list-style-position: inside; } } .avatar .message:after { top: 1.1em; left: -1em; bottom: auto; border-width: 0px 1em 0.7em 0; border-color: rgba(0, 0, 0, 0) #EEE; content: ''; position: absolute; border-style: solid; display: block; width: 0; } /* Json editor */ #pxtJsonEditor .ui.content { padding: 1rem; } .rtl #fileNameInput { text-align: right; } /* Simulator effects */ @keyframes glow { to { outline-color: yellow; } } .glow > div { outline: 3px solid transparent; animation: glow 0.3s infinite alternate; transition: outline 0.3s linear; } .grayscale { -moz-filter: grayscale(1); -webkit-filter: grayscale(1); filter: grayscale(1); } .sepia { -webkit-filter: sepia(1); filter: sepia(1); } .blur { -moz-filter: blur(1); -webkit-filter: blur(1); filter: blur(1); } // clashes with highlighted typescript code snippets svg .highlight { border-bottom: 2px solid #FFC107; } /* Modulator */ #modulatorWrapper, #modulatorAudioOutput { display: none; } /******************************* Field editors *******************************/ .hidden { display: none !important; } /******************************* Social Buttons *******************************/ .social-icons a.facebook { color: white; background-color: #3b5998; } .social-icons a.twitter { color: white; background-color: #00aced; } .social-icons a.discourse { color: white; background-color: @primaryColor; } /******************************* Layout Variables *******************************/ .ui.widedesktop.only { display:none !important; } .ui.tablet.only { display:none !important; } .ui.mobile.only { display: none !important; } /******************* Font size *************************/ p.ui.font.small { font-size:0.8em; } /** App **/ .ui.app .ui.app.hide { display: none !important; } /** Screen modes **/ @media only screen and (min-width: @largeMonitorBreakpoint) and (min-height:30em) { .ui.widedesktop.only { display:unset !important; } .ui.widedesktop.hide { display:none !important; } } /* smaller desktop screen */ @media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 12/10) { .ui.desktop.only { display:none !important; } } /* thin desktop portrait mode */ @media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 7/10) { .ui.landscape.only { display:none !important; } } @media only screen and (min-width: @computerBreakpoint) { .ui.portrait.only { display:none !important; } } /* Tablet only */ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { .ui.tablet.only { display:unset !important; } } /* Mobile + Tablet */ @media only screen and (max-width: @largestTabletScreen) { #root.sandbox .active.item.sim-menuitem ~ .toggle { margin-left: 0 !important; box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } #root.sandbox .active.item.blocks-menuitem ~ .toggle { margin-left: 40px !important; box-shadow: 2px 0px 0px rgba(0,0,0,0.1), -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } #root.sandbox .active.item.javascript-menuitem ~ .toggle { margin-left: 80px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } #root.sandbox .active.item.python-menuitem ~ .toggle { margin-left: 120px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .simView #boardview { padding-top: @sandboxMobileMenuHeight; } .ui.portrait.only { display:unset !important; } .ui.portrait.hide { display:none !important; } } /* Mobile only */ @media only screen and (max-width: @largestMobileScreen) { .ui.mobile.only { display:unset !important; } .ui.mobile.hide { display:none !important; } } /* Scren heights */ /** Thin **/ @media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) { .ui.tall.only { display:none !important; } .simView #boardview { padding-top: @thinMenuHeight; } } @media only screen and (min-height: @thinEditorBreakpoint) { .ui.thin.only { display:none !important; } } /******************************* fuyllscreensim *******************************/ .fullscreensim { /* Full screen */ #filelist { position: fixed; z-index: @fullscreenZIndex; top:0 !important; left:0 !important; bottom:0 !important; right:0 !important; padding: 0 !important; margin: 0 !important; max-width: 100%; min-width: 100%; height:100% !important; } #filelistOverlay { display: none; } #boardview { position: relative; height:100%; background-color: white; padding-top: 1rem; padding-bottom: 4.5rem; padding-left: 0rem; padding-right: 0rem; background-color: @fullscreenBackgroundGradientStart; background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */ background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* Standard syntax */ } #simulator .hidefullscreen, .menubar .ui.item:not(.logo), #maineditor, #editortools, #serialPreview { display: none !important; z-index: -10 !important; } .sandboxfooter { z-index: @sandboxFooterZIndex; bottom: 1rem; } #mainmenu { background: transparent !important; } #filelist .simtoolbar { position: fixed; bottom: 1rem; left: auto; right: auto; display: block !important; } #simulators { position: relative; padding: 3rem 1rem 3rem; width: 100%; height: 100%; } div.simframe { position:relative; width: 50%; height: 100%; float: left; padding-bottom: 0 !important; } div.simframe > iframe { position:relative; max-width: 90%; } div.simframe:only-child { width: 100%; } div.simframe:only-child > iframe { max-width: 100%; } .simtoolbar .ui.button { font-size: 1.7rem; } div.simframe:not(:first-child) { display: unset; } } /*********************************** Headless Simtoolbar (Minecraft) ************************************/ #root.headless { #filelist { display: block; bottom: 0 !important; } #filelist .simtoolbar.item { margin: 1rem 0; } i.green.icon { color: rgba(0,0,0,.6)!important; } } #root.headless.collapsedEditorTools { #filelist { position: absolute; width: auto; top: auto; left: 5rem; background: none transparent; min-width: inherit; max-width: inherit; } #boardview { display: none; } } #root.headless:not(.collapsedEditorTools) { #filelist { left: 0; z-index: 40; } } /******************************* Media Adjustments *******************************/ /* Large Monitor */ @media only screen and (min-width: @largeMonitorBreakpoint) { #editorlogo > .poweredbylogo { .includePoweredByLogos(); // set the @poweredByLarge variable background-image: @poweredByLarge; } } /* Small Monitor */ @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { #editorlogo > .poweredbylogo { .includePoweredByLogos(); // set the @poweredByLarge variable background-image: @poweredByLarge; } } /* Tablet */ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { #editorlogo { height: 18px; } #editorlogo > .poweredbylogo { height: 12px; bottom: 3px; .includePoweredByLogos(); // set the @poweredBySmall variable background-image: @poweredBySmall; } } /* Mobile */ @media only screen and (max-width: @largestMobileScreen) { #editorlogo { height: 18px; } #editorlogo > .poweredbylogo { height: 13px; bottom: 3px; .includePoweredByLogos(); // set the @poweredBySmall variable background-image: @poweredBySmall; } } /* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */ @media only screen and (min-width: @computerBreakpoint) { .collapsedEditorTools:not(.headless) #filelist { min-width: 21px; width: 21px; padding: 0; } .collapsedEditorTools:not(.headless) #filelist > * { display: none; } .collapsedEditorTools #downloadArea { background: @editorToolsBackground; } .collapsedEditorTools:not(.headless) #maineditor { left: 21px; } .collapsedEditorTools.headless #maineditor { left: 0; } } /* <= Small Monitor (Mobile + Tablet + Small Monitor) */ @media only screen and (max-width: @largestSmallMonitor) { /* Layout */ #filelist, #downloadArea { min-width:@simulatorWidthSmall; max-width:@simulatorWidthSmall; } #maineditor { left:@simulatorWidthSmall; } /* Logo */ .ui.logo.brand .name { display: none !important; } /* Help card */ #helpcard { top: auto; bottom: 2.2rem; margin: 0; } } /* <= Tablet (Mobile + Tablet) */ @media only screen and (max-width: @largestTabletScreen) { /* Logo */ .ui.logo.brand, .ui.logo.organization { font-size: 0rem; padding-right: 0; } /* Help card */ #helpcard { top: auto; bottom: 2rem; margin: 0; } /* Layout */ #filelist { position:absolute; padding: 0; margin: 1em; bottom: 4rem !important; top: auto; width: auto; min-width: inherit; max-width: inherit; background: transparent !important; overflow: visible; } .collapsedEditorTools #filelist { display: none; } #filelistOverlay { display: block; top: auto; left: 4rem; /* match left pos of #boardview */ bottom: -3rem; width: 10rem; /* match width of div.simframe */ height: 9rem; } #root:not(.fullscreensim):not(.headless) { #boardview { position: absolute; left: 4rem; width: 10rem; } #filelist .simtoolbar { margin: 0.5em 0; } #filelist .simtoolbar > div:not(:first-child), #filelist .simtoolbar > .buttons > .button { display: none; } #filelist .simtoolbar > .buttons > .play-button, #filelist .simtoolbar > .buttons > .restart-button { display: block; } #filelist .simtoolbar > div:first-child { flex-direction: column; border-radius: 4px; overflow: hidden; } #filelist .simtoolbar > div:first-child > button { border-radius: 0; font-size: .92857143rem; } #editortools .left .buttons:first-child { position: absolute; bottom: 0; } } #root.headless { #filelist { left: 5rem!important; z-index: 42!important; } } #root.collapsedEditorTools #editortools .left .buttons:first-child { bottom: auto!important; // undo bottom positioning for collapsed toolbar } #maineditor { left: 0; right:0; } #maineditor:not(.sandbox) { bottom: 0rem; } #editortools { height: 10rem; } #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #msg { bottom: 10rem; } #tutorialcard.bottom { bottom: 11rem; } .hideEditorFloats #editortools { height: @editorToolsCollapsedHeight; } .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor, .hideEditorFloats #msg { bottom: @editorToolsCollapsedHeight; } .hideEditorFloats #tutorialcard.bottom { bottom: @editorToolsCollapsedHeight; } /* Simulator */ div.simframe { display:inline-block; width: 10rem; margin-right:0.5rem; padding-bottom: 81.96% !important; } div.simframe:not(:first-child) { display:none; } #simulators { flex-direction: row; display: flex !important; } /* Simulator Toggle Button */ #togglesim, .collapsedEditorTools #togglesim { border-top-right-radius: 100px; border-top-left-radius: 100px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; top: unset; left: 40%; width: 20%; height: unset; bottom: 10rem; } .collapsedEditorTools #togglesim { bottom: 4.7rem; } /* Hide floating editors */ .hideEditorFloats .editorFloat { display:none; } #downloadArea { display: none; } /* Menu spacing */ #root:not(.sandbox) .menubar .ui.menu .item { padding: 0.3em !important; } #root .menubar .ui.menu .item.editor-menuitem .item { padding: 0.7em !important; } #root .menubar .ui.menu.fixed .ui.item.editor-menuitem .item { width: 40px; height: 38px; } .active.item.javascript-menuitem ~ .toggle { margin-left: 40px !important; } .active.item.python-menuitem ~ .toggle { margin-left: 80px !important; } /* Top Menu */ #maineditor { top: @mobileMenuHeight; } .hideMenuBar #maineditor { top: 0; } .sandbox #maineditor { top: @sandboxMobileMenuHeight; } /* Logo */ .ui.item.logo img { max-height: 2.5rem; margin-left: 0.4rem; margin-right: 0.4rem; } .ui.mini.image { display: block !important; } } /* Custom width treshold to force vertical stacking on the start page */ @media only screen and (max-width: 1095px) { .ui.modal.projectsdialog h2.editorname { top: 5%; } .ui.modal.projectsdialog .loader.editoravatar { top: 60%; } } /* Mobile */ @media only screen and (max-width: @largestMobileScreen) { .hideEditorFloats #editortools { height: @editorToolsCollapsedMobileHeight; } .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor { bottom: @editorToolsCollapsedMobileHeight; } .ui.modal.projectsdialog h2.editorname { font-size: 1.2rem; } .hideEditorFloats #editortools .column.mobile.only { padding-top: 0.5rem; padding-bottom: 0.5rem; } .logo-wide #mainmenu { .ui.logo.brand, .ui.logo.organization { display: none !important; } } .fullscreensim .simtoolbar .ui.button { font-size: 1rem; } .collapsedEditorTools #togglesim { bottom: 3.4rem; } } @media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) { /* Top Menu */ #maineditor { top: @thinMenuHeight; } #filelist { top: @thinMenuHeight; padding: 0.5rem 1.5rem; } #editortools { height: @editorToolsThinHeight; } #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #filelist { bottom: @editorToolsThinHeight; } #editortools .ui.button { padding: .5em; } #downloadArea { padding-top: 0; } #editorToolbarArea, #projectNameArea { padding-top: 0.5rem; font-size: 0.8em; } } .simView #filelist { position: fixed; z-index: @fullscreenZIndex; top:0 !important; left:0 !important; bottom:0 !important; right:0 !important; padding: 0; margin: 0; max-width: 100%; min-width: 100%; height:100%; } .simView #boardview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: hidden; background-color: white; padding-left: 2em; padding-right: 2em; padding-bottom: 2em; padding-top: @mainMenuHeight; background-color: @fullscreenBackgroundGradientStart; background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */ background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* Standard syntax */ } .simView #maineditor { display: none !important; z-index: -10 !important; } .sandboxfooter { left: 0.5em !important; right: 0.5em !important; margin: 0rem !important; right: auto; text-align: center; } .sandboxfooter .item{ font-size: 0.7rem !important; } .simView .sandboxfooter { z-index: @sandboxFooterZIndex; } .simView #simulators { position: absolute; top: @mainMenuHeight; bottom: 4rem; left: 0; right: 0; } .simView div.simframe { position:relative; width: 50%; height: 100%; float: left; padding-bottom: 0 !important; } .simView div.simframe > iframe { position:relative; max-width: 90%; } .simView div.simframe:only-child { width: 100%; } .simView div.simframe:only-child > iframe { max-width: 100%; } /* ui embed overrides */ div.simframe.ui.embed { background: transparent; } .sandbox { #simulators, #simulator, #editortools { display: none; } #maineditor { overflow: hidden; left: 0; } /* Not needed in triple toggle view */ #filelistOverlay { display: none; } #simulators { flex-direction: row; display: flex !important; } div.simframe:not(:first-child) { display: inherit; } #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #editortools, #msg { bottom: 1.5rem !important; } .active.item.sim-menuitem ~ .toggle { margin-left: 0 !important; box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .active.item.blocks-menuitem ~ .toggle { margin-left: 140px !important; box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .active.item.javascript-menuitem ~ .toggle { margin-left: 280px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } .active.item.python-menuitem ~ .toggle { margin-left: 420px !important; box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important; background: @editorToggleColor !important; } } /* Hardware selection dialog */ .hardwaredialog .ui.cardimage { background-position: top; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } .sandbox.simView { #simulators, #simulator, #editortools { display: inherit; } #filelist .simtoolbar { position: fixed; bottom: 0.25em; left: auto; right: auto; flex-direction: row !important; margin-bottom: 1em !important; } } img.pixelart { image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; }