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
text/less
/* 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 ;
}
.full-abs {
position: absolute ;
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 ;
}
#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 ;
padding-top: 0.55rem;
background-color: @simulatorBackground;
}
.transparentEditorTools #downloadArea {
background-color: transparent ;
}
.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 ;
width: 0 ;
}
/* 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%) ;
border: 3px solid fade(@black, 20%);
border-radius: 2.5rem ;
position: relative;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
border-radius: 2.5rem ;
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 ;
}
.ui.item.editor-menuitem .item.toggle {
z-index: 1 ;
margin: 1px;
height: 46px;
left: 0;
position: absolute;
opacity: 1 ;
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 ;
box-shadow: 2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.active.item.javascript-menuitem ~ .toggle {
margin-left: 140px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.active.item.python-menuitem ~ .toggle {
margin-left: 280px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
/* 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 ;
}
.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 ;
}
.sandboxfooter .item{
font-size: 0.8rem ;
}
/* 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 ;
z-index: @editorMessageZIndex;
}
#msg > div:empty {
display: none ;
}
/* 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 ;
}
/* 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 ;
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 ;
}
/*******************************
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 ;
}
.ui.tablet.only {
display:none ;
}
.ui.mobile.only {
display: none ;
}
/*******************
Font size
*************************/
p.ui.font.small {
font-size:0.8em;
}
/** App **/
.ui.app .ui.app.hide {
display: none ;
}
/** Screen modes **/
@media only screen and (min-width: @largeMonitorBreakpoint) and (min-height:30em) {
.ui.widedesktop.only {
display:unset ;
}
.ui.widedesktop.hide {
display:none ;
}
}
/* smaller desktop screen */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 12/10) {
.ui.desktop.only {
display:none ;
}
}
/* thin desktop portrait mode */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 7/10) {
.ui.landscape.only {
display:none ;
}
}
@media only screen and (min-width: @computerBreakpoint) {
.ui.portrait.only {
display:none ;
}
}
/* Tablet only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
.ui.tablet.only {
display:unset ;
}
}
/* Mobile + Tablet */
@media only screen and (max-width: @largestTabletScreen) {
#root.sandbox .active.item.sim-menuitem ~ .toggle {
margin-left: 0 ;
box-shadow: 2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
#root.sandbox .active.item.blocks-menuitem ~ .toggle {
margin-left: 40px ;
box-shadow: 2px 0px 0px rgba(0,0,0,0.1), -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
#root.sandbox .active.item.javascript-menuitem ~ .toggle {
margin-left: 80px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
#root.sandbox .active.item.python-menuitem ~ .toggle {
margin-left: 120px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.simView #boardview {
padding-top: @sandboxMobileMenuHeight;
}
.ui.portrait.only {
display:unset ;
}
.ui.portrait.hide {
display:none ;
}
}
/* Mobile only */
@media only screen and (max-width: @largestMobileScreen) {
.ui.mobile.only {
display:unset ;
}
.ui.mobile.hide {
display:none ;
}
}
/* Scren heights */
/** Thin **/
@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
.ui.tall.only {
display:none ;
}
.simView #boardview {
padding-top: @thinMenuHeight;
}
}
@media only screen and (min-height: @thinEditorBreakpoint) {
.ui.thin.only {
display:none ;
}
}
/*******************************
fuyllscreensim
*******************************/
.fullscreensim {
/* Full screen */
#filelist {
position: fixed;
z-index: @fullscreenZIndex;
top:0 ;
left:0 ;
bottom:0 ;
right:0 ;
padding: 0 ;
margin: 0 ;
max-width: 100%;
min-width: 100%;
height:100% ;
}
#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 ;
z-index: -10 ;
}
.sandboxfooter {
z-index: @sandboxFooterZIndex;
bottom: 1rem;
}
#mainmenu {
background: transparent ;
}
#filelist .simtoolbar {
position: fixed;
bottom: 1rem;
left: auto;
right: auto;
display: block ;
}
#simulators {
position: relative;
padding: 3rem 1rem 3rem;
width: 100%;
height: 100%;
}
div.simframe {
position:relative;
width: 50%;
height: 100%;
float: left;
padding-bottom: 0 ;
}
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 ;
}
#filelist .simtoolbar.item {
margin: 1rem 0;
}
i.green.icon {
color: rgba(0,0,0,.6) ;
}
}
#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 ;
}
/* 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 ;
top: auto;
width: auto;
min-width: inherit;
max-width: inherit;
background: transparent ;
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 ;
z-index: 42 ;
}
}
#root.collapsedEditorTools #editortools .left .buttons:first-child {
bottom: auto ; // 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% ;
}
div.simframe:not(:first-child) {
display:none;
}
#simulators {
flex-direction: row;
display: flex ;
}
/* 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 ;
}
#root .menubar .ui.menu .item.editor-menuitem .item {
padding: 0.7em ;
}
#root .menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
width: 40px;
height: 38px;
}
.active.item.javascript-menuitem ~ .toggle {
margin-left: 40px ;
}
.active.item.python-menuitem ~ .toggle {
margin-left: 80px ;
}
/* 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 ;
}
}
/* 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 ;
}
}
.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 ;
left:0 ;
bottom:0 ;
right:0 ;
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 ;
z-index: -10 ;
}
.sandboxfooter {
left: 0.5em ;
right: 0.5em ;
margin: 0rem ;
right: auto;
text-align: center;
}
.sandboxfooter .item{
font-size: 0.7rem ;
}
.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 ;
}
.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 ;
}
div.simframe:not(:first-child) {
display: inherit;
}
#blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #editortools, #msg {
bottom: 1.5rem ;
}
.active.item.sim-menuitem ~ .toggle {
margin-left: 0 ;
box-shadow: 2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.active.item.blocks-menuitem ~ .toggle {
margin-left: 140px ;
box-shadow: 2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.active.item.javascript-menuitem ~ .toggle {
margin-left: 280px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
.active.item.python-menuitem ~ .toggle {
margin-left: 420px ;
box-shadow: -2px 0px 0px rgba(0,0,0,0.1) ;
background: @editorToggleColor ;
}
}
/* 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 ;
margin-bottom: 1em ;
}
}
img.pixelart {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}