/* 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 #githubEditor,

.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;

}

#editortools .download-button.icon-and-text {

text-align: center;

}

.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,

.active.item.python-menuitem ~ .toggle {

margin-left: 140px !important;

box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;

background: @editorToggleColor !important;

}

#editortoggle .active.item.javascript-menuitem ~ .toggle.hasdropdown,

#editortoggle .active.item.python-menuitem ~ .toggle.hasdropdown {

border-top-right-radius: 0px!important;

border-bottom-right-radius: 0px!important;

}

#editortoggle > .link {

justify-content: center;

}

#editordropdown {

width: auto;

border-top-left-radius: 0px!important;

border-bottom-left-radius: 0px!important;

}

#editordropdown .menu > .item {

width: 184px;

opacity: 1;

}

#editordropdown .menu > .item.selected:after {

content: '✔';

float: right;

}

#root:not(.hc) #editordropdown {

.menu > .item.selected {

background: none;

color: @mainMenuInvertedBackground !important;

}

&.active, #mainmenu #editordropdown.active:focus {

background-color: @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 {

margin-left: 1rem;

margin-right: 1rem;

height: 1.6rem;

}

/* 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;

}

.ui.card .extra.content a.learnmore {

color: @lightTextColor;

}

/* 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);

/* Fixes an error in some webkit browsers where icons get repositioned on hover */

position: relative;

}

.ui.button.big-play-button,

.ui.button.hw-button,

.ui.button.hw-button > .icon.caret {

/* Fixes an error in some webkit browsers where icons get repositioned on hover */

position: relative;

}

/* 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 */

#computertogglesim,

#mobiletogglesim,

#sidedocstoggle {

position: absolute;

border-top-left-radius: 100px;

border-bottom-left-radius: 100px;

top: 40%;

height: 20%;

padding: 0;

margin: 0;

background: @grey;

box-shadow: none!important;

transition: none;

opacity: 0.8;

&:hover,

&:focus {

opacity: 1;

}

}

#computertogglesim,

#sidedocstoggle {

z-index: @sidedocZIndex;

}

#mobiletogglesim {

z-index: @blocklyToolboxZIndex;

}

// Factor in 4rem height of top bar

#mobiletogglesim,

#computertogglesim {

left: -21px;

top: calc(~'40% - 2.4rem');

height: calc(~'20% + 0.8rem');

}

.collapsedEditorTools #computertogglesim,

.collapsedEditorTools #mobiletogglesim {

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;

}

.collapse-button.ui.tablet.only {

display:inherit !important; // fix for simulator toggle, IE11 does not have "unset"

}

}

/* Mobile + Tablet */

@media only screen and (max-width: @largestTabletScreen) {

#root.sandbox:not(.headless) {

.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: 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;

}

.active.item.javascript-menuitem ~ .toggle,

.active.item.python-menuitem ~ .toggle {

margin-left: 80px !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;

}

.collapse-button.ui.computer.only {

display:none !important; // hide desktop simulator toggle

}

.hideEditorToolbar #filelist {

display:none !important;

}

}

/* Mobile only */

@media only screen and (max-width: @largestMobileScreen) {

.ui.mobile.only {

display:unset !important;

}

.ui.mobile.only.inherit {

display:inherit !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, .filemenu {

display: none;

}

}

#root.headless:not(.collapsedEditorTools) {

#filelist {

left: 0;

z-index: 40;

}

}

#root.headless.transparentEditorTools {

#editortools {

left: auto;

height: 5.7rem;

margin-right: 1rem;

}

#editortools #downloadArea,

#editortools > div > div > .ui.grid > .column.left {

display: none;

}

@media only screen and (max-width: @largestTabletScreen) {

#editortools > div > div > .ui.grid > .column.right {

width: 100%!important;

}

}

}

#projectNameArea input {

font-size: 0.95rem;

}

/*******************************

Media Adjustments

*******************************/

/* Large Monitor */