pxt-calliope/custom.css

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  padding: 0;
  overflow: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.rtl #fileNameInput {
    text-align: right;
}

#settings .popup {
    width: 25rem;
}

#root.inverted {
    background: #1B1C1D;
}

.rtl .ui.menu .ui.dropdown .menu > .item,
.rtl .ui.modal {
    text-align: right;
}

.ui.dropdown,
.ui.buttons {
    margin-right: 0.25rem;
}

.searchdialog .cards {
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top:0.5rem;
}

.ui.card > .content > a.header {
    word-break: break-all;
}

.ui.top.attached.label .link.icon {
    position: absolute;
    top: 9px;
    right: 8px;
}

#content .ui.button > .icon-and-text {
    margin-right: 4px;
    margin-left: -2px;
}

.rtl #content .ui.button > .icon-and-text {
    margin-left: 4px;
    margin-right: -2px;
}

.ui.button.icon.clear {
    background: transparent;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.rtl .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
    margin: 0.0em 0.0em 0.0em 0.75em
}

.ui.logs {
    font-family: monospace;
    font-size:0.8em;
    max-height: 13em;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    margin-bottom: 1em;
    cursor:pointer;
}

.ui.log {
    clear:both;
    border-left-width: 2px;
    border-left-style: solid;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.ui.log {
    border-left-color:#ccc;
}
.ui.log.blue {
    border-left-color:#0AaCbE;
}
.ui.log.yellow {
    border-left-color:#cFb41A;
}
.ui.log.green {
    border-left-color:#AACF83;
}
.ui.log.red {
    border-left-color:#FF3A54;
}
.ui.log.black {
    border-left-color:#202020;
}

.ui.log.gauge, .ui.log.counter {
    color:white;
    border-radius: 4px;
    margin-left:0.1em;
    margin-right:0.2em;
    padding-left:0.25em;
    padding-right:0.25em;
}

.ui.log.counter {
    background:grey;
}

.ui.log.gauge.blue {
    background:#0AaCbE;
}
.ui.log.gauge.yellow {
    background:#cFb41A;
}
.ui.log.gauge.green {
    background:#AACF83;
}
.ui.log.gauge.red {
    background:#FF3A54;
}
.ui.log.gauge.black {
    background:#000;
}

svg.ui.trend {
    width: 8em;
    height: 1.5em;
    margin-top: 0.1em;
    float: right;
    vertical-align: middle;
    cursor:pointer;
}

svg.ui.trend polyline {
    stroke: #000;
    stroke-width: 1px;
    stroke-linejoin: round;
    fill:none;
}

svg.ui.trend.blue polyline {
    stroke:#0AaCbE;
}
svg.ui.trend.yellow polyline {
    stroke:#cFb41A;
}
svg.ui.trend.green polyline {
    stroke:#AACF83;
}
svg.ui.trend.red polyline {
    stroke:#FF3A54;
}
svg.ui.trend.black polyline {
    stroke:#000;
}

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

.highlight {
    border-bottom: 2px solid #FFC107;
}

.ui.hideempty:empty {
    display:none !important;
}

#root .debuggerview h4 {
    margin: 0.9em 0 0 0;
}

html {
    font-size:16px;
}

.top-margin {
    margin-top:0.5em !important;
}

.flash {
    animation: flash-animation 0.4s alternate infinite;
    -webkit-animation: flash-animation 0.4s alternate infinite;
}

@keyframes flash-animation {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

.cloudflash {
    animation: cloud-flash-animation 0.8s alternate infinite;
    -webkit-animation: cloud-flash-animation 0.8s alternate infinite;
}

@keyframes cloud-flash-animation {
    from { opacity: 1; }
    to   { opacity: 0.8; }
}

.ui.fluid.button.half{
    width:50% !important;
}
.ui.fluid.button.sixty{
    width:60% !important;
}

/*******************************
    Blockly
    Add Blockly CSS here that you don't want overriden in themes
*******************************/

#blocksEditor {
    position: absolute;
}

#blocksEditor > div.loading {
    background:#fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.7;
}

.blocklyMainBackground {
    stroke:none !important;
}

.rtl text.blocklyText {
    text-align:right;
}

/* This ensures built-in blockly toolbox icons are hidden */
span.blocklyTreeIcon {
    background: none !important;
}

/* This is to ensure the leds inside showLeds fill the entire checkbox */
text.blocklyCheckbox {
    fill: #ff3030 !important;
    text-shadow: 0px 0px 6px #f00;
    font-size: 17pt !important;
}

.blocklyPreview {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: calc(100% - 1em);
    max-height: calc(100% - 1em);
}

body.blocklyMinimalBody {
    min-width: initial;
    overflow: initial;
}

@supports (-ms-accelerator:true) {
    .rtl .blocklyPreview {
        right:50%;
        left:auto;
    }
}

/* Fix for context menu scroll issue */
div.blocklyWidgetDiv {
    position: fixed;
}

/*******************************
    Monaco Editor
    Add Monaco Editor CSS here that you don't want override in themes
*******************************/
#monacoEditor {
    direction:ltr;
}

/* Monaco Editor Errors */
.monaco-editor .error-view-zone {
    font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
    width: initial !important;
}
.monaco-editor.vs-dark .error-view-zone {
    color:white;
}
.monaco-editor .error-view-zone .marker-widget {
    border-radius: 2px !important;
    padding-left: 10px !important;
    padding-right: 20px !important;
}

/* Fix for monaco editor Signature bug in Safari */
.monaco-editor .parameter-hints-widget {
    flex-direction: row !important;
}

.line-numbers {
    display:none;
}

.monacoToolboxDiv {
    position: relative;
    display: inline-block;
    overflow-x: visible;
    overflow-y: auto;
    vertical-align: top;
}
.monacoToolboxDiv.hide {
    display: none;
}
.monaco-editor-hover {
    z-index:1000;
}

#monacoEditorInner {
    position: relative !important;
    display: inline-block;
}