pxt-calliope/theme/style.less
2016-12-11 08:52:02 +13:00

155 lines
3.2 KiB
Plaintext

/* Import all components */
@import 'semantic';
@import 'pxt';
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';
@import 'site/globals/site.variables';
/* Reference import */
@import (reference) "semantic.less";
/*******************************
Add your custom CSS here
*******************************/
.download-button {
&:extend(.ui.button all);
&:extend(.purple all);
}
.download-button.download-button-full {
&:extend(.ui.inverted.purple.button all);
}
.download-button:hover {
&:extend(.green all);
color: black !important;
}
.play-button.play-button-full {
&:extend(.ui.inverted.button all);
}
.getting-started-btn {
&:extend(.ui.button all);
&:extend(.orange all);
}
#filelist {
background: #fff url(https://az742082.vo.msecnd.net/pub/psopafpj) 0 0 repeat !important;
}
/*******************************
Blockly
*******************************/
.blocklyTreeRow {
border-bottom: 1px solid #ecf0f1 !important;
margin-bottom: 0px !important;
}
/* Blockly toolbox font size same as the page font */
.blocklyTreeLabel {
font-family: @pageFont !important;
font-weight: 200;
}
.blocklyToolboxDiv, .monacoToolboxDiv {
background-color: white !important;
border-left: 1px solid #ecf0f1 !important;
}
.blocklyFlyoutBackground {
fill: #525A67 !important;
fill-opacity: 0.5 !important;
}
/* Remove shadow around blockly blocks */
.blocklyPathDark, .blocklyPathLight {
display: none;
}
.organization {
top: 1.6em;
}
/* Blockly Toolbox Buttons */
.blocklyToolboxButtons .blocklyAddPackageButton {
&:extend(.ui.inverted.pink.button all);
&:extend(.circular all);
}
.blocklyToolboxButtons .blocklyUndoButton {
&:extend(.ui.inverted.blue.button all);
&:extend(.circular all);
}
/*******************************
Monaco
*******************************/
.monaco-editor, .monaco-editor .inputarea {
background: #ecf0f1;
}
.monacoDraggableBlock {
background: #ecf0f1;
border: solid 3px #ecf0f1;
}
.monaco-editor-background {
background: #ecf0f1;
}
.monacoFlyout {
background: rgba(82, 90, 103, 0.5);
}
/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
#filelist {
background: transparent !important;
}
.organization {
top: auto;
}
}
/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
.organization {
top: auto;
}
/* Blockly Toolbox buttons */
#blocklyToolboxButtons, #monacoToolboxButtons {
margin-right: 0.5rem;
margin-left: 0.5rem;
}
}
/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
.organization {
top: auto;
}
/* Blockly Toolbox buttons */
#blocklyToolboxButtons, #monacoToolboxButtons {
margin-right: 1rem;
margin-left: 1rem;
}
}
/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
.blocklyTreeRow {
width: 230px;
padding-left: 1rem;
}
/* Blockly Toolbox buttons */
#blocklyToolboxButtons, #monacoToolboxButtons {
margin-right: 2rem;
margin-left: 2rem;
}
}