pxt-ev3/theme/style.less
2017-07-07 18:19:41 +03:00

169 lines
4.0 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';
@import 'themes/default/collections/menu.variables';
@import 'fieldeditors';
/* Reference import */
@import (reference) "semantic.less";
/*******************************
Add your custom CSS here
*******************************/
/* Roboto font */
@RobotoFont: data-uri("../docs/static/fonts/Roboto_400_normal.woff");
@font-face {
font-family: 'Roboto';
src: @RobotoFont format("woff");
}
.ui.button.download-button {
&:extend(.ui.primary.button all);
}
.ui.button.editortools-btn {
&:extend(.ui.blue.button all);
}
.projectname-input {
}
.ui.button.getting-started-btn {
&:extend(.ui.green.button all);
}
.ui.button.exit-tutorial-btn {
&:extend(.ui.blue.button all);
}
/* Menu bar colors */
#menubar .ui.item {
color: @blue;
}
/* logo */
#logo a.ui.image .ui.logo {
min-width: 2.0rem;
}
/* Toolbox padding */
.blocklyToolboxDiv, .monacoToolboxDiv {
padding: 0.5rem;
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.31);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.31);
box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.31);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
div.blocklyTreeRow {
border-radius: 0px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.50);
-moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.50);
box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.50);
}
div.blocklyTreeRoot div div div div div.blocklyTreeRow {
padding-top: 0.5rem !important;
}
/* Remove shadow around blockly blocks */
.blocklyPathDark, .blocklyPathLight {
display: none;
}
/* Blockly Text */
span.blocklyTreeLabel {
font-family: @pageFont !important;
text-transform: uppercase !important;
font-size:1rem !important;
font-weight: bold;
}
.blocklyFlyoutBackground {
fill: #282828 !important;
}
.monacoFlyout {
background: rgba(40, 40, 40, 0.9);
}
/* Editor menu toggle */
#menubar .ui.menu .item.editor-menuitem {
background: @red !important;
}
#menubar .ui.menu .item.editor-menuitem .item {
color: white !important;
}
/* Search box */
#blocklySearchArea {
margin: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
}
.blocklySearchInputField {
border-radius: 1rem !important;
}
.sandboxfooter a:not(.thin) {
color:white !important;
}
/* Monaco editor */
.monaco-editor, .monaco-editor .inputarea, .monaco-editor-background {
background: @blocklySvgColor !important;
}
/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
#filelist {
background: transparent;
}
div.blocklyTreeRow {
padding-bottom: 2rem !important;
min-height: @blocklyRowHeightMobile;
line-height: @blocklyRowHeightMobile/2;
}
#blocklyTrashIcon {
margin: 0.2rem;
}
}
/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
div.blocklyTreeRow {
padding-left: 0.5rem !important;
min-height: @blocklyRowHeightTablet;
line-height: @blocklyRowHeightTablet/2;
}
}
/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
div.blocklyTreeRow {
padding-left: 0.5rem !important;
min-height: @blocklyRowHeightComputer;
line-height: @blocklyRowHeightComputer/2;
}
}
/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
div.blocklyTreeRow {
padding-left: 0.5rem !important;
min-height: @blocklyRowHeightWide;
line-height: @blocklyRowHeightWide/2;
}
}
/* Mobile, Tablet AND thin screen */
@media only screen and (max-width: @largestTabletScreen) and (max-height: @thinEditorBreakpoint) {
.sandboxfooter a:not(.thin) {
color: @black !important;
}
}