mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-07-08 20:06:32 +00:00
Merge pull request #98 from bcmi-labs/theme-update-vol2
Theme update vol2
This commit is contained in:
Akos Kitta
GitHub
commit
ef74b04b0b
4
.gitignore
vendored
4
.gitignore
vendored
@ -6,8 +6,8 @@ downloads/
|
||||
build/
|
||||
!electron/build/
|
||||
src-gen/
|
||||
browser-app/webpack.config.js
|
||||
electron-app/webpack.config.js
|
||||
*webpack.config.js
|
||||
.DS_Store
|
||||
/workspace/static
|
||||
.DS_Store
|
||||
# switching from `electron` to `browser` in dev mode.
|
||||
|
||||
@ -42,6 +42,8 @@ import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
|
||||
import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
|
||||
import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
|
||||
import { EditorMode } from './editor-mode';
|
||||
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
|
||||
import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
|
||||
|
||||
export namespace ArduinoMenus {
|
||||
export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
|
||||
@ -57,7 +59,7 @@ export namespace ArduinoToolbarContextMenu {
|
||||
|
||||
@injectable()
|
||||
export class ArduinoFrontendContribution implements FrontendApplicationContribution,
|
||||
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution {
|
||||
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution, ColorContribution {
|
||||
|
||||
@inject(MessageService)
|
||||
protected readonly messageService: MessageService;
|
||||
@ -577,4 +579,34 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
|
||||
return undefined;
|
||||
}
|
||||
|
||||
registerColors(colors: ColorRegistry): void {
|
||||
colors.register(
|
||||
{
|
||||
id: 'arduino.branding.primary',
|
||||
defaults: {
|
||||
dark: 'statusBar.background',
|
||||
light: 'statusBar.background'
|
||||
},
|
||||
description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.branding.secondary',
|
||||
defaults: {
|
||||
dark: 'statusBar.background',
|
||||
light: 'statusBar.background'
|
||||
},
|
||||
description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.foreground',
|
||||
defaults: {
|
||||
dark: 'editorWidget.background',
|
||||
light: 'editorWidget.background',
|
||||
hc: 'editorWidget.background'
|
||||
},
|
||||
description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -26,8 +26,6 @@ import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
|
||||
import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
|
||||
import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
|
||||
import { ArduinoWorkspaceService } from './arduino-workspace-service';
|
||||
import { ThemeService } from '@theia/core/lib/browser/theming';
|
||||
import { ArduinoTheme } from './arduino-theme';
|
||||
import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
|
||||
import { ArduinoOutlineViewContribution } from './customization/arduino-outline-contribution';
|
||||
import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
|
||||
@ -71,9 +69,18 @@ import { ArduinoAboutDialog } from './customization/arduino-about-dialog';
|
||||
import { ArduinoShellLayoutRestorer } from './shell/arduino-shell-layout-restorer';
|
||||
import { EditorMode } from './editor-mode';
|
||||
import { ListItemRenderer } from './components/component-list/list-item-renderer';
|
||||
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
|
||||
import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
|
||||
|
||||
const ElementQueries = require('css-element-queries/src/ElementQueries');
|
||||
|
||||
MonacoThemingService.register({
|
||||
id: 'arduinoTheme',
|
||||
label: 'Light (Arduino)',
|
||||
uiTheme: 'vs',
|
||||
json: require('../../src/browser/data/arduino.color-theme.json')
|
||||
});
|
||||
|
||||
export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
|
||||
ElementQueries.listen();
|
||||
ElementQueries.init();
|
||||
@ -85,6 +92,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
|
||||
bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
|
||||
bind(KeybindingContribution).toService(ArduinoFrontendContribution);
|
||||
bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
|
||||
bind(ColorContribution).toService(ArduinoFrontendContribution);
|
||||
|
||||
bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
|
||||
bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
|
||||
@ -200,9 +208,6 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
|
||||
bind(ArduinoWorkspaceService).toSelf().inSingletonScope();
|
||||
rebind(WorkspaceService).toService(ArduinoWorkspaceService);
|
||||
|
||||
const themeService = ThemeService.get();
|
||||
themeService.register(...ArduinoTheme.themes);
|
||||
|
||||
// Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
|
||||
bind(EditorMode).toSelf().inSingletonScope();
|
||||
bind(FrontendApplicationContribution).toService(EditorMode);
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
|
||||
import { Theme } from '@theia/core/lib/browser/theming';
|
||||
import { MonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
|
||||
|
||||
const ARDUINO_CSS = require('../../src/browser/style/arduino.useable.css');
|
||||
const ARDUINO_JSON = MonacoThemeRegistry.SINGLETON.register(
|
||||
require('../../src/browser/data/arduino.color-theme.json'), {}, 'arduino', 'vs').name!;
|
||||
|
||||
export class ArduinoTheme {
|
||||
|
||||
static readonly arduino: Theme = {
|
||||
type: 'light',
|
||||
id: 'arduino-theme',
|
||||
label: 'Arduino Light Theme',
|
||||
description: 'Arduino Light Theme',
|
||||
editorTheme: ARDUINO_JSON,
|
||||
activate() {
|
||||
ARDUINO_CSS.use();
|
||||
},
|
||||
deactivate() {
|
||||
ARDUINO_CSS.unuse();
|
||||
}
|
||||
};
|
||||
|
||||
static readonly themes: Theme[] = [
|
||||
ArduinoTheme.arduino
|
||||
];
|
||||
|
||||
}
|
||||
@ -207,7 +207,7 @@ export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConf
|
||||
|
||||
return <React.Fragment>
|
||||
<div className='search'>
|
||||
<input type='search' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
|
||||
<input type='search' className='theia-input' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
|
||||
<i className='fa fa-search'></i>
|
||||
</div>
|
||||
<div className='boards list'>
|
||||
|
||||
@ -16,7 +16,7 @@ export class ArduinoSelect<T> extends Select<T> {
|
||||
control: styles => ({
|
||||
...styles,
|
||||
minWidth: 120,
|
||||
color: 'var(--theia-ui-font-color1)'
|
||||
color: 'var(--theia-foreground)'
|
||||
}),
|
||||
dropdownIndicator: styles => ({
|
||||
...styles,
|
||||
@ -45,7 +45,7 @@ export class ArduinoSelect<T> extends Select<T> {
|
||||
// `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
|
||||
// color when selecting an option in the select by clicking and then not releasing the button.
|
||||
// https://react-select.com/styles#overriding-the-theme
|
||||
primary50: 'var(--theia-accent-color4)',
|
||||
primary50: 'var(--theia-list-activeSelectionBackground)',
|
||||
}
|
||||
});
|
||||
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;
|
||||
|
||||
@ -51,7 +51,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
|
||||
const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
|
||||
const onClickInstall = () => install(item);
|
||||
const installButton = item.installable &&
|
||||
<button className='install' onClick={onClickInstall}>INSTALL</button>;
|
||||
<button className='theia-button install' onClick={onClickInstall}>INSTALL</button>;
|
||||
|
||||
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const version = event.target.value;
|
||||
@ -68,6 +68,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
|
||||
return <label>{availableVersions[0]}</label>
|
||||
} else {
|
||||
return <select
|
||||
className='theia-select'
|
||||
value={input.selectedVersion}
|
||||
onChange={onSelectChange}>
|
||||
{
|
||||
|
||||
@ -10,7 +10,7 @@ export class SearchBar extends React.Component<SearchBar.Props> {
|
||||
render(): React.ReactNode {
|
||||
return <input
|
||||
ref={this.setRef}
|
||||
className={SearchBar.Styles.SEARCH_BAR_CLASS}
|
||||
className={`theia-input ${SearchBar.Styles.SEARCH_BAR_CLASS}`}
|
||||
type='text'
|
||||
placeholder='Filter your search...'
|
||||
size={1}
|
||||
|
||||
@ -1,91 +1,115 @@
|
||||
{
|
||||
"tokenColors": [
|
||||
{
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Comments",
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#95a5a6cc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Keywords Attributes",
|
||||
"scope": [
|
||||
"storage",
|
||||
"support",
|
||||
"string.quoted.single.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#00979D"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "literal",
|
||||
"scope": [
|
||||
"meta.function.c",
|
||||
"entity.name.function",
|
||||
"meta.function-call.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#D35400"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "punctuation",
|
||||
"scope": [
|
||||
"punctuation.section",
|
||||
"meta.function-call.c",
|
||||
"meta.block.c",
|
||||
"meta.function.c",
|
||||
"entity.name.function.preprocessor.c",
|
||||
"meta.preprocessor.macro.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "strings",
|
||||
"scope": [
|
||||
"string.quoted.double"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#005C5F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "meta keywords",
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"meta.preprocessor.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#728E00"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "numeric preprocessor",
|
||||
"scope": [
|
||||
"meta.preprocessor.macro.c",
|
||||
"constant.numeric.preprocessor.c",
|
||||
"meta.preprocessor.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"editor.background": "#FFFFFF",
|
||||
"editorCursor.foreground": "#434f54",
|
||||
"editor.foreground": "#434f54",
|
||||
"editorWhitespace.foreground": "#BFBFBF",
|
||||
"editor.lineHighlightBackground": "#434f5410",
|
||||
"editor.selectionBackground": "#ffcb00"
|
||||
},
|
||||
"name": "Arduino"
|
||||
}
|
||||
"tokenColors": [
|
||||
{
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Comments",
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#95a5a6cc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Keywords Attributes",
|
||||
"scope": [
|
||||
"storage",
|
||||
"support",
|
||||
"string.quoted.single.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#00979D"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "literal",
|
||||
"scope": [
|
||||
"meta.function.c",
|
||||
"entity.name.function",
|
||||
"meta.function-call.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#D35400"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "punctuation",
|
||||
"scope": [
|
||||
"punctuation.section",
|
||||
"meta.function-call.c",
|
||||
"meta.block.c",
|
||||
"meta.function.c",
|
||||
"entity.name.function.preprocessor.c",
|
||||
"meta.preprocessor.macro.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "strings",
|
||||
"scope": [
|
||||
"string.quoted.double"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#005C5F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "meta keywords",
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"meta.preprocessor.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#728E00"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "numeric preprocessor",
|
||||
"scope": [
|
||||
"meta.preprocessor.macro.c",
|
||||
"constant.numeric.preprocessor.c",
|
||||
"meta.preprocessor.c"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"list.highlightForeground": "#006468",
|
||||
"list.activeSelectionBackground": "#006468",
|
||||
"editor.background": "#ffffff",
|
||||
"editorCursor.foreground": "#434f54",
|
||||
"editor.foreground": "#434f54",
|
||||
"editorWhitespace.foreground": "#bfbfbf",
|
||||
"editor.lineHighlightBackground": "#434f5410",
|
||||
"editor.selectionBackground": "#ffcb00",
|
||||
"focusBorder": "#4db7bb99",
|
||||
"menubar.selectionBackground": "#ffffff",
|
||||
"menubar.selectionForeground": "#212121",
|
||||
"menu.selectionBackground": "#dae3e3",
|
||||
"menu.selectionForeground": "#212121",
|
||||
"editorGroupHeader.tabsBackground": "#f7f9f9",
|
||||
"button.background": "#4db7bb",
|
||||
"titleBar.activeBackground": "#006468",
|
||||
"titleBar.activeForeground": "#ffffff",
|
||||
"terminal.background": "#000000",
|
||||
"terminal.foreground": "#e0e0e0",
|
||||
"dropdown.border": "#ececec",
|
||||
"dropdown.background": "#ececec",
|
||||
"activityBar.background": "#ececec",
|
||||
"activityBar.foreground": "#616161",
|
||||
"statusBar.background": "#006468",
|
||||
"secondaryButton.background": "#b5c8c9",
|
||||
"secondaryButton.hoverBackground": "#dae3e3",
|
||||
"arduino.branding.primary": "#00979d",
|
||||
"arduino.branding.secondary": "#b5c8c9",
|
||||
"arduino.foreground": "#edf1f1"
|
||||
},
|
||||
"type": "light",
|
||||
"name": "Arduino"
|
||||
}
|
||||
|
||||
@ -209,7 +209,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
|
||||
return <input
|
||||
ref={this.setRef}
|
||||
type='text'
|
||||
className={this.props.monitorConfig ? '' : 'warning'}
|
||||
className={`theia-input ${this.props.monitorConfig ? '' : 'warning'}`}
|
||||
placeholder={this.placeholder}
|
||||
value={this.state.text}
|
||||
onChange={this.onChange}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.arduino-select__control {
|
||||
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
|
||||
background: var(--theia-layout-color2) !important;
|
||||
border: var(--theia-sideBar-background) var(--theia-border-width) solid !important;
|
||||
background: var(--theia-sideBar-background) !important;
|
||||
}
|
||||
|
||||
.arduino-select__control:hover {
|
||||
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
|
||||
border: var(--theia-focusBorder) var(--theia-border-width) solid !important;
|
||||
}
|
||||
|
||||
.arduino-select__control--is-focused {
|
||||
@ -12,31 +12,37 @@
|
||||
}
|
||||
|
||||
.arduino-select__option--is-selected {
|
||||
background-color: var(--theia-accent-color3) !important;
|
||||
color: var(--theia-content-font-color0) !important;
|
||||
border-color: var(--theia-accent-color3) !important;
|
||||
background-color: var(--theia-list-activeSelectionBackground) !important;
|
||||
color: var(--theia-list-activeSelectionForeground) !important;
|
||||
border-color: var(--theia-focusBorder) !important;
|
||||
}
|
||||
|
||||
.arduino-select__option--is-focused {
|
||||
background-color: var(--theia-accent-color4) !important;
|
||||
border-color: var(--theia-accent-color3) !important;
|
||||
background-color: var(--theia-list-hoverBackground) !important;
|
||||
border-color: var(--theia-focusBorder) !important;
|
||||
}
|
||||
|
||||
.arduino-select__option--is-focused.arduino-select__option--is-selected {
|
||||
background-color: var(--theia-list-activeSelectionBackground) !important;
|
||||
color: var(--theia-list-activeSelectionForeground) !important;
|
||||
border-color: var(--theia-focusBorder) !important;
|
||||
}
|
||||
|
||||
.arduino-select__menu {
|
||||
background-color: var(--theia-layout-color2) !important;
|
||||
border: 1px solid var(--theia-accent-color3) !important;
|
||||
background-color: var(--theia-sideBar-background) !important;
|
||||
border: 1px solid var(--theia-focusBorder) !important;
|
||||
top: auto !important; /* to align the top of the menu with the bottom of the control */
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.arduino-select__control.arduino-select__control--menu-is-open {
|
||||
border: 1px solid !important;
|
||||
border-color: var(--theia-accent-color3) !important;
|
||||
border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
|
||||
border-color: var(--theia-focusBorder) !important;
|
||||
border-bottom-color: var(--theia-sideBar-background) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
|
||||
}
|
||||
|
||||
.arduino-select__value-container .arduino-select__single-value {
|
||||
color: var(--theia-ui-font-color1) !important;
|
||||
color: var(--theia-descriptionForeground) !important;
|
||||
}
|
||||
|
||||
.arduino-select__menu-list {
|
||||
|
||||
@ -1,240 +0,0 @@
|
||||
/*
|
||||
The following CSS variables define the main public API for styling Theia.
|
||||
These variables should be used by all extensions wherever possible. In other
|
||||
words, extensions should not define custom colors, sizes, etc. unless
|
||||
absolutely necessary. This enables users to adapt the visual theme of Theia
|
||||
by changing these variables.
|
||||
|
||||
Many variables appear in ordered sequences (0,1,2,...). For most of these
|
||||
sequences, colors go from dark to bright for dark themes, and from bright to
|
||||
dark for bright themes. A few sequences are used to create contrast against
|
||||
the others, e.g. font and accent colors, and thus their brightness goes the
|
||||
other way around.
|
||||
|
||||
Throughout Theia, we are mostly following principles from Google's Material
|
||||
Design when selecting colors. We are not, however, following all of MD as it
|
||||
is not optimized for dense, information rich UIs.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Custom Theme Colors */
|
||||
--theia-arduino-light: rgb(0, 100, 104);
|
||||
--theia-arduino-light1: rgb(23, 161, 165);
|
||||
--theia-arduino-light2: rgb(218, 226, 228);
|
||||
--theia-arduino-light3: rgb(237, 241, 242);
|
||||
--theia-arduino-terminal: rgb(0, 0, 0);
|
||||
|
||||
/* Borders: Width and color (bright to dark) */
|
||||
|
||||
--theia-border-width: 1px;
|
||||
--theia-panel-border-width: 2px;
|
||||
--theia-border-color0: var(--md-grey-100);
|
||||
--theia-border-color1: var(--md-grey-200);
|
||||
--theia-border-color2: var(--md-grey-300);
|
||||
--theia-border-color3: var(--md-grey-400);
|
||||
|
||||
|
||||
/* UI fonts: Family, size and color (dark to bright)
|
||||
---------------------------------------------------
|
||||
The UI font CSS variables are used for the typography all of the Theia
|
||||
user interface elements that are not directly user-generated content.
|
||||
*/
|
||||
|
||||
--theia-ui-font-scale-factor: 1.2;
|
||||
--theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
|
||||
--theia-ui-font-size1: 13px; /* Base font size */
|
||||
--theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
|
||||
--theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
|
||||
--theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
|
||||
--theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
--theia-ui-font-color0: var(--md-grey-900);
|
||||
--theia-ui-font-color1: var(--md-grey-700);
|
||||
--theia-ui-font-color2: var(--md-grey-500);
|
||||
--theia-ui-font-color3: var(--md-grey-300);
|
||||
|
||||
/* Special font colors */
|
||||
|
||||
--theia-ui-icon-font-color: #ffffff;
|
||||
--theia-ui-bar-font-color0: var(--theia-ui-font-color0);
|
||||
--theia-ui-bar-font-color1: var(--theia-inverse-ui-font-color0); /* var(--theia-ui-font-color1); */
|
||||
|
||||
/* Use the inverse UI colors against the brand/accent/warn/error colors. */
|
||||
|
||||
--theia-inverse-ui-font-color0: rgba(255, 255, 255, 1.0);
|
||||
--theia-inverse-ui-font-color2: rgba(255, 255, 255, 0.7);
|
||||
--theia-inverse-ui-font-color3: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* Content fonts: Family, size and color (dark to bright)
|
||||
Content font variables are used for typography of user-generated content.
|
||||
*/
|
||||
|
||||
--theia-content-font-size: 13px;
|
||||
--theia-content-line-height: 1.5;
|
||||
--theia-content-font-color0: black;
|
||||
--theia-content-font-color1: black;
|
||||
--theia-content-font-color2: var(--md-grey-700);
|
||||
--theia-content-font-color3: var(--md-grey-500);
|
||||
--theia-code-font-size: 13px;
|
||||
--theia-code-line-height: 17px;
|
||||
--theia-code-padding: 5px;
|
||||
--theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
|
||||
--theia-terminal-font-family: monospace;
|
||||
--theia-ui-padding: 6px;
|
||||
|
||||
/* Tab Icon Colors */
|
||||
--theia-tab-icon-color: var(--theia-ui-font-color1);
|
||||
--theia-tab-font-color: #000;
|
||||
|
||||
/* Main layout colors (bright to dark)
|
||||
------------------------------------ */
|
||||
|
||||
--theia-layout-color0: #ffffff;
|
||||
--theia-layout-color1: #f7f9f9;
|
||||
--theia-layout-color2: #ececec;
|
||||
--theia-layout-color3: var(--theia-arduino-light2);
|
||||
--theia-layout-color4: #dcdcdc;
|
||||
|
||||
/* Brand colors */
|
||||
|
||||
--theia-brand-color0: var(--theia-arduino-light);
|
||||
--theia-brand-color1: var(--theia-arduino-light1);
|
||||
--theia-brand-color2: var(--theia-arduino-light2);
|
||||
--theia-brand-color3: var(--theia-arduino-light3);
|
||||
|
||||
/* Secondary Brand colors */
|
||||
|
||||
--theia-secondary-brand-color0: var(--md-grey-700);
|
||||
--theia-secondary-brand-color1: #b5c8c9;
|
||||
--theia-secondary-brand-color2: var(--theia-arduino-light2);
|
||||
--theia-secondary-brand-color3: var(--theia-arduino-light3);
|
||||
|
||||
/* Accent colors (dark to bright): Use these to create contrast to layout colors. */
|
||||
|
||||
--theia-accent-color0: var(--theia-arduino-light);
|
||||
--theia-accent-color1: rgb(77, 183, 187, 1.0);
|
||||
--theia-accent-color2: rgb(77, 183, 187, 0.8);
|
||||
--theia-accent-color3: rgb(77, 183, 187, 0.6);
|
||||
--theia-accent-color4: rgba(77, 183, 187, 0.4);
|
||||
|
||||
/* Accent colors with opacity */
|
||||
|
||||
--theia-transparent-accent-color0: hsla(210, 63%, 46%, 0.3);
|
||||
--theia-transparent-accent-color1: hsla(207, 66%, 56%, 0.3);
|
||||
--theia-transparent-accent-color2: hsla(207, 64%, 85%, 0.3);
|
||||
--theia-transparent-accent-color3: hsla(205, 70%, 91%, 0.3);
|
||||
|
||||
/* State colors (warn, error, success, info)
|
||||
------------------------------------------ */
|
||||
--theia-warn-color0: var(--md-amber-500);
|
||||
--theia-warn-color1: var(--md-amber-400);
|
||||
--theia-warn-color2: var(--md-amber-300);
|
||||
--theia-warn-color3: var(--md-amber-200);
|
||||
|
||||
--theia-warn-font-color0: var(--md-grey-900);
|
||||
|
||||
--theia-error-color0: var(--md-red-400);
|
||||
--theia-error-color1: #da5b4a;
|
||||
--theia-error-color2: var(--md-red-200);
|
||||
--theia-error-color3: var(--md-red-100);
|
||||
|
||||
--theia-error-font-color0: var(--md-grey-300);
|
||||
|
||||
--theia-success-color0: var(--md-green-500);
|
||||
--theia-success-color1: var(--md-green-300);
|
||||
--theia-success-color2: var(--md-green-100);
|
||||
--theia-success-color3: var(--md-green-50);
|
||||
|
||||
--theia-success-font-color0: var(--md-grey-300);
|
||||
|
||||
--theia-info-color0: var(--md-cyan-700);
|
||||
--theia-info-color1: var(--md-cyan-500);
|
||||
--theia-info-color2: var(--md-cyan-300);
|
||||
--theia-info-color3: var(--md-cyan-100);
|
||||
|
||||
--theia-info-font-color0: var(--md-grey-300);
|
||||
|
||||
--theia-disabled-color0: var(--md-grey-500);
|
||||
--theia-disabled-color1: var(--md-grey-300);
|
||||
--theia-disabled-color2: var(--md-grey-200);
|
||||
--theia-disabled-color3: var(--md-grey-50);
|
||||
|
||||
--theia-added-color0: rgba(0, 255, 0, 0.8);
|
||||
--theia-removed-color0: rgba(230, 0, 0, 0.8);
|
||||
--theia-modified-color0: rgba(0, 100, 150, 0.8);
|
||||
|
||||
/* Background for selected text */
|
||||
--theia-selected-text-background: var(--theia-accent-color3);
|
||||
|
||||
/* Colors to highlight words in widgets like tree or editors */
|
||||
|
||||
--theia-word-highlight-color0: rgba(168, 172, 148, 0.7);
|
||||
--theia-word-highlight-color1: rgba(253, 255, 0, 0.2);
|
||||
--theia-word-highlight-match-color0: rgba(234, 92, 0, 0.33);
|
||||
--theia-word-highlight-match-color1: rgba(234, 92, 0, 0.5);
|
||||
--theia-word-highlight-replace-color0: rgba(155, 185, 85, 0.2);
|
||||
|
||||
/* Scroll-bars */
|
||||
|
||||
--theia-scrollbar-width: 10px;
|
||||
--theia-scrollbar-rail-width: 10px;
|
||||
--theia-scrollbar-thumb-color: hsla(0, 0%, 61%, .4);
|
||||
--theia-scrollbar-rail-color: transparent;
|
||||
--theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4);
|
||||
--theia-scrollbar-active-rail-color: transparent;
|
||||
/* Menu */
|
||||
--theia-menu-color0: var(--theia-arduino-light);
|
||||
--theia-menu-color1: var(--theia-layout-color0);
|
||||
--theia-menu-color2: #dae3e3;
|
||||
/* Statusbar */
|
||||
--theia-statusbar-color: var(--theia-arduino-light);
|
||||
--theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
|
||||
--theia-statusBar-font-size: 12px;
|
||||
/* Buttons */
|
||||
--theia-ui-button-color: var(--theia-accent-color1);
|
||||
--theia-ui-button-color-hover: var(--theia-accent-color2);
|
||||
--theia-ui-button-font-color: var(--theia-arduino-light);
|
||||
--theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
|
||||
--theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
|
||||
--theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
|
||||
--theia-ui-button-color-disabled: var(--theia-accent-color3);
|
||||
--theia-ui-button-font-color-disabled: var(--theia-ui-font-color2);
|
||||
--theia-ui-button-color-secondary-disabled: var(--theia-disabled-color1);
|
||||
--theia-ui-button-font-color-secondary-disabled: var(--theia-ui-font-color2);
|
||||
/* Expand/collapse element */
|
||||
--theia-ui-expand-button-color: var(--theia-accent-color4);
|
||||
--theia-ui-expand-button-font-color: var(--theia-ui-font-color1);
|
||||
/* Dialogs */
|
||||
--theia-ui-dialog-header-color: var(--theia-arduino-light);
|
||||
--theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
|
||||
--theia-ui-dialog-color: rgb(236, 241, 241);
|
||||
--theia-ui-dialog-font-color: black;
|
||||
/* Variables */
|
||||
--theia-variable-name-color: #9B46B0;
|
||||
--theia-variable-value-color: rgba(108, 108, 108, 0.8);
|
||||
--theia-number-variable-color: #09885A;
|
||||
--theia-boolean-variable-color: #0000FF;
|
||||
--theia-string-variable-color: #A31515;
|
||||
/* ANSI color */
|
||||
--theia-ansi-black-color: gray;
|
||||
--theia-ansi-red-color: #BE1717;
|
||||
--theia-ansi-green-color: #338A2F;
|
||||
--theia-ansi-yellow-color: #BEB817;
|
||||
--theia-ansi-blue-color: darkblue;
|
||||
--theia-ansi-magenta-color: darkmagenta;
|
||||
--theia-ansi-cyan-color: darkcyan;
|
||||
--theia-ansi-white-color: #BDBDBD;
|
||||
/* ANSI background color */
|
||||
--theia-ansi-black-background-color: gray;
|
||||
--theia-ansi-red-background-color: #BE1717;
|
||||
--theia-ansi-green-background-color: #338A2F;
|
||||
--theia-ansi-yellow-background-color: #BEB817;
|
||||
--theia-ansi-blue-background-color: darkblue;
|
||||
--theia-ansi-magenta-background-color: darkmagenta;
|
||||
--theia-ansi-cyan-background-color: darkcyan;
|
||||
--theia-ansi-white-background-color: #BDBDBD;
|
||||
|
||||
/* Output */
|
||||
--theia-output-font-color: var(--theia-ui-font-color3);
|
||||
|
||||
}
|
||||
@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
|
||||
font-weight: 400;
|
||||
letter-spacing: .02em;
|
||||
font-size: 1.2em;
|
||||
color: #00979d;
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
@ -24,18 +24,18 @@ div#select-board-dialog .selectBoardContainer .head .text {
|
||||
}
|
||||
|
||||
div#select-board-dialog .selectBoardContainer .body .list .item.selected {
|
||||
background: var(--theia-ui-button-color-secondary-hover);
|
||||
background: var(--theia-secondaryButton-hoverBackground);
|
||||
}
|
||||
|
||||
div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
color: var(--theia-arduino-light);
|
||||
div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .search,
|
||||
#select-board-dialog .selectBoardContainer .search input,
|
||||
#select-board-dialog .selectBoardContainer .list,
|
||||
#select-board-dialog .selectBoardContainer .list {
|
||||
background: var(--theia-layout-color0);
|
||||
background: var(--theia-editor-background);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .search input {
|
||||
@ -47,7 +47,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
color: var(--theia-content-font-color0);
|
||||
color: var(--theia-editor-foreground);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .search input:focus {
|
||||
@ -79,7 +79,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .container .content .loading {
|
||||
font-size: var(--theia-ui-font-size1);
|
||||
color: #7f8c8d;
|
||||
color: var(--theia-arduino-branding-secondary);
|
||||
padding: 10px 5px 10px 10px;
|
||||
text-transform: uppercase;
|
||||
/* The max, min-height comes from `.body .list` 265px + 47px top padding - 2 * 10px top padding */
|
||||
@ -99,7 +99,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list .item .detail {
|
||||
font-size: var(--theia-ui-font-size1);
|
||||
color: var(--theia-disabled-color0);
|
||||
opacity: var(--theia-mod-disabled-opacity);
|
||||
width: 155px; /* used heuristics for the calculation */
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
@ -107,11 +107,11 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list .item.missing {
|
||||
color: var(--theia-disabled-color0);
|
||||
opacity: var(--theia-mod-disabled-opacity);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list .item:hover {
|
||||
background: var(--theia-ui-button-color-secondary-hover);
|
||||
background: var(--theia-secondaryButton-hoverBackground);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list {
|
||||
@ -140,15 +140,12 @@ button.theia-button {
|
||||
}
|
||||
|
||||
button.theia-button.secondary {
|
||||
background-color: #b5c8c9;
|
||||
color: #000;
|
||||
box-shadow: 0 4px #95a5a6;
|
||||
background-color: var(--theia-secondaryButton-background);
|
||||
color: var(--theia-foreground);
|
||||
}
|
||||
|
||||
button.theia-button.main {
|
||||
color: #fff;
|
||||
/* background-color: #00979c; */
|
||||
box-shadow: 0 4px var(--theia-accent-color0);
|
||||
color: var(--theia-button-foreground);
|
||||
}
|
||||
|
||||
.dialogControl {
|
||||
@ -192,15 +189,17 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-toolbar-item {
|
||||
background: var(--theia-layout-color1);
|
||||
background: var(--theia-tab-unfocusedActiveBackground);
|
||||
color: var(--theia-foreground);
|
||||
height: 22px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0px 3px 0px 3px;
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-list {
|
||||
border: 3px solid var(--theia-border-color2);
|
||||
border: 3px solid var(--theia-activityBar-background);
|
||||
margin: -3px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -210,16 +209,16 @@ button.theia-button.main {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--theia-ui-font-color1);
|
||||
background: var(--theia-layout-color1);
|
||||
color: var(--theia-foreground);
|
||||
background: var(--theia-tab-unfocusedActiveBackground);
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item .fa-check {
|
||||
color: var(--theia-accent-color1);
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item.selected,
|
||||
.arduino-boards-dropdown-item:hover {
|
||||
background: var(--theia-layout-color3);
|
||||
background: var(--theia-list-hoverBackground);
|
||||
}
|
||||
|
||||
@ -11,5 +11,5 @@
|
||||
}
|
||||
|
||||
.p-MenuBar-item.p-mod-active {
|
||||
color: var(--theia-ui-bar-font-color0);
|
||||
color: var(--theia-menubar-selectionForeground);
|
||||
}
|
||||
@ -5,39 +5,31 @@
|
||||
@import './monitor.css';
|
||||
@import './arduino-select.css';
|
||||
|
||||
input:focus {
|
||||
.theia-input.warning:focus {
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-offset: -1px;
|
||||
opacity: 1 !important;
|
||||
outline-color: var(--theia-accent-color3);
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
input.warning:focus {
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
outline-offset: -1px;
|
||||
opacity: 1 !important;
|
||||
color: var(--theia-warn-font-color0);
|
||||
background-color: var(--theia-warn-color0);
|
||||
.theia-input.warning {
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
input.warning {
|
||||
background-color: var(--theia-warn-color0);
|
||||
}
|
||||
|
||||
input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: var(--theia-warn-font-color0);
|
||||
background-color: var(--theia-warn-color0);
|
||||
.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: var(--theia-warn-font-color0);
|
||||
background-color: var(--theia-warn-color0);
|
||||
.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
input.warning::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: var(--theia-warn-font-color0);
|
||||
background-color: var(--theia-warn-color0);
|
||||
.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
@ -4,36 +4,15 @@
|
||||
}
|
||||
|
||||
.arduino-list-widget {
|
||||
color: var(--theia-ui-font-color1);
|
||||
color: var(--theia-foreground);
|
||||
}
|
||||
|
||||
.arduino-list-widget .search-bar {
|
||||
margin: 0px 10px 10px 15px;
|
||||
}
|
||||
|
||||
.arduino-list-widget .search-filters {
|
||||
margin: 0px 10px 0px 15px;
|
||||
border-color: var(--theia-border-color3);
|
||||
}
|
||||
|
||||
.arduino-list-widget .search-bar:focus {
|
||||
border-color: var(--theia-accent-color3);
|
||||
}
|
||||
|
||||
.arduino-list-widget .filterable-list-container .search-filters .filter {
|
||||
margin: 0px 0px 10px 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.arduino-list-widget .filterable-list-container .search-filters .filter .title {
|
||||
margin: 0px 10px 0px 0px;
|
||||
align-self: center;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--theia-ui-font-size0);
|
||||
}
|
||||
|
||||
.arduino-list-widget .filterable-list-container .search-filters .filter > select {
|
||||
width: 100%;
|
||||
border-color: var(--theia-focusBorder);
|
||||
}
|
||||
|
||||
.filterable-list-container {
|
||||
@ -49,15 +28,18 @@
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(odd) {
|
||||
background-color: var(--theia-layout-color0);
|
||||
background-color: var(--theia-sideBar-background);
|
||||
filter: contrast(105%);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(even) {
|
||||
background-color: var(--theia-layout-color1);
|
||||
background-color: var(--theia-sideBar-background);
|
||||
filter: contrast(95%);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:hover {
|
||||
background-color: var(--theia-layout-color2);
|
||||
background-color: var(--theia-sideBar-background);
|
||||
filter: contrast(90%);
|
||||
}
|
||||
|
||||
/* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements.
|
||||
@ -74,18 +56,9 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item:hover {
|
||||
background: var(--theia-accent-color4);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.component-list-item:hover .meta-info {
|
||||
color: var(--theia-ui-font-color1);
|
||||
}
|
||||
|
||||
.component-list-item .meta-info {
|
||||
color: var(--theia-ui-font-color3);
|
||||
}
|
||||
|
||||
.component-list-item .header {
|
||||
padding-bottom: 2px;
|
||||
display: flex;
|
||||
@ -104,33 +77,37 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
|
||||
.component-list-item .header .author {
|
||||
font-weight: bold;
|
||||
color: var(--theia-ui-font-color2);
|
||||
color: var(--theia-panelTitle-inactiveForeground);
|
||||
}
|
||||
|
||||
.component-list-item:hover .header .author {
|
||||
color: var(--theia-ui-font-color1);
|
||||
color: var(--theia-foreground);
|
||||
}
|
||||
|
||||
.component-list-item .header .version {
|
||||
color: var(--theia-ui-font-color2);
|
||||
color: var(--theia-panelTitle-inactiveForeground);
|
||||
}
|
||||
|
||||
.component-list-item .footer .theia-button.install {
|
||||
height: auto; /* resets the default Theia button height in the filterable list widget */
|
||||
}
|
||||
|
||||
.component-list-item .header .installed:before {
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
justify-self: end;
|
||||
background-color: var(--theia-accent-color1);
|
||||
background-color: var(--theia-button-background);
|
||||
padding: 2px 4px 2px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
max-height: calc(1em + 4px);
|
||||
color: var(--theia-inverse-ui-font-color0);
|
||||
color: var(--theia-button-foreground);
|
||||
content: 'INSTALLED';
|
||||
}
|
||||
|
||||
.component-list-item .header .installed:hover:before {
|
||||
background-color: var(--theia-inverse-ui-font-color0);
|
||||
color: var(--theia-accent-color1);
|
||||
background-color: var(--theia-button-foreground);
|
||||
color: var(--theia-button-background);
|
||||
content: 'UNINSTALL';
|
||||
}
|
||||
|
||||
@ -161,14 +138,10 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item .info a {
|
||||
color: var(--theia-brand-color1);
|
||||
color: var(--theia-button-background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.component-list-item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.component-list-item strong.installed {
|
||||
color: rgb(0, 151, 157)
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.p-TabBar[data-orientation='horizontal'].theia-app-bottom {
|
||||
background: var(--theia-layout-color1);
|
||||
#theia-bottom-content-panel .p-TabBar[data-orientation='horizontal'].theia-app-bottom {
|
||||
background: var(--theia-editorGroupHeader-tabsBackground);
|
||||
}
|
||||
|
||||
.theia-output {
|
||||
background: var(--theia-arduino-terminal);
|
||||
background: var(--theia-terminal-background);
|
||||
color: var(--theia-terminal-foreground);
|
||||
}
|
||||
|
||||
#outputView {
|
||||
@ -20,11 +21,11 @@
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-ui-button-color);
|
||||
background: var(--theia-button-background);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
|
||||
background: var(--theia-ui-button-color-hover);
|
||||
background: var(--theia-button-hoverBackground);
|
||||
}
|
||||
|
||||
.arduino-verify, .arduino-upload {
|
||||
@ -34,7 +35,7 @@
|
||||
.arduino-tool-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-ui-button-font-color);
|
||||
background-color: var(--theia-titleBar-activeBackground);
|
||||
-webkit-mask: url(../icons/mask-buttons.svg);
|
||||
mask: url(../icons/mask-buttons.svg);
|
||||
-webkit-mask-size: 800%;
|
||||
@ -76,6 +77,14 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#theia-top-panel .p-TabBar-toolbar {
|
||||
padding-left: 4px !important; /* moves the `verify`, upload and other toolbar items to the left */
|
||||
}
|
||||
|
||||
.p-Widget .p-MenuBar {
|
||||
padding-left: 1px !important; /* moves the menubar: `File`, `Edit`, etc to the left */
|
||||
}
|
||||
|
||||
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
|
||||
justify-content: flex-start;
|
||||
min-width: 190px;
|
||||
@ -86,29 +95,11 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.arduino-tool-item.item.connected-boards {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.arduino-tool-item.item.connected-boards select {
|
||||
line-height: var(--theia-content-line-height);
|
||||
font-size: var(--theia-ui-font-size1);
|
||||
color: var(--theia-ui-font-color1);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: linear-gradient(45deg, transparent 50%, var(--theia-ui-font-color1) 50%), linear-gradient(135deg, var(--theia-ui-font-color1) 50%, transparent 50%);
|
||||
background-position: calc(100% - 6px) 8px, calc(100% - 2px) 8px, 100% 0;
|
||||
background-size: 4px 5px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 3px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.arduino-toolbar-tooltip {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--theia-ui-font-color3);
|
||||
color: var(--theia-titleBar-activeForeground);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
|
||||
@ -126,11 +117,11 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theia-ui-button-font-color);
|
||||
color: var(--theia-titleBar-activeBackground);;
|
||||
}
|
||||
|
||||
.monaco-editor .margin {
|
||||
border-right: 2px solid var(--theia-border-color1);
|
||||
border-right: 2px solid var(--theia-sideBar-background);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -142,4 +133,8 @@
|
||||
|
||||
.theia-sidepanel-toolbar .theia-sidepanel-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-Widget.dialogOverlay .dialogBlock {
|
||||
background-color: var(--theia-arduino-foreground);
|
||||
}
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
.serial-monitor .head {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
background: var(--theia-layout-color0);
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
@ -30,7 +29,7 @@
|
||||
}
|
||||
|
||||
.serial-monitor .head .send > input:focus {
|
||||
border-color: var(--theia-accent-color3);
|
||||
border-color: var(--theia-focusBorder);
|
||||
}
|
||||
|
||||
.serial-monitor .head .config {
|
||||
@ -55,7 +54,8 @@
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-monitor.toggled {
|
||||
background: var(--theia-secondary-brand-color1);
|
||||
background: var(--theia-sideBarSectionHeader-background);
|
||||
filter: contrast(80%);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item .clear-all {
|
||||
|
||||
@ -13,7 +13,7 @@ export class ToolOutputServiceClientImpl implements ToolOutputServiceClient {
|
||||
protected readonly outputContribution: OutputContribution;
|
||||
|
||||
onNewOutput(tool: string, chunk: string): void {
|
||||
this.outputContribution.openView({ activate: true }).then(() => {
|
||||
this.outputContribution.openView({ reveal: true }).then(() => {
|
||||
const channel = this.outputChannelManager.getChannel(`Arduino: ${tool}`);
|
||||
channel.setVisibility(true);
|
||||
channel.append(chunk);
|
||||
|
||||
@ -39,7 +39,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
|
||||
}
|
||||
}
|
||||
const command = this.props.commands.getCommand(item.command);
|
||||
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
|
||||
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? 'enabled' : ''}`
|
||||
return <div key={item.id} className={cls} >
|
||||
<div className={item.id}>
|
||||
<div
|
||||
@ -137,4 +137,4 @@ export namespace ArduinoToolbar {
|
||||
export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
|
||||
return maybeToolbarWidget instanceof ArduinoToolbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,6 +28,14 @@
|
||||
"// Notes:": [
|
||||
"The resolution for `fs-extra` was required due to this: https://spectrum.chat/theia/general/our-theia-electron-builder-app-no-longer-starts~f5cf09a0-6d88-448b-8818-24ad0ec2ee7c"
|
||||
],
|
||||
"theia": {
|
||||
"target": "electron",
|
||||
"frontend": {
|
||||
"config": {
|
||||
"disallowReloadKeybinding": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"build": {
|
||||
"productName": "Arduino Pro IDE",
|
||||
"appId": "arduino.ProIDE",
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
shell.env.THEIA_ELECTRON_SKIP_REPLACE_FFMPEG = '1'; // Do not run the ffmpeg validation for the packager.
|
||||
shell.env.NODE_OPTIONS = '--max_old_space_size=4096'; // Increase heap size for the CI
|
||||
const utils = require('./utils');
|
||||
const merge = require('deepmerge');
|
||||
const { version, release } = utils.versionInfo();
|
||||
|
||||
echo(`📦 Building ${release ? 'release ' : ''}version '${version}'...`);
|
||||
@ -81,9 +82,12 @@
|
||||
template.build.files = [...template.build.files, ...unusedDependencies.map(name => `!node_modules/${name}`)];
|
||||
pkg.dependencies = { ...pkg.dependencies, ...template.dependencies };
|
||||
pkg.devDependencies = { ...pkg.devDependencies, ...template.devDependencies };
|
||||
// Deep-merging the Theia application configuration. We enable the electron window reload in dev mode but not for the final product. (arduino/arduino-pro-ide#187)
|
||||
const theia = merge((pkg.theia || {}), (template.theia || {}));
|
||||
fs.writeFileSync(path('..', 'build', 'package.json'), JSON.stringify({
|
||||
...pkg,
|
||||
...template,
|
||||
theia,
|
||||
dependencies: pkg.dependencies,
|
||||
devDependencies: pkg.devDependencies
|
||||
}, null, 2));
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"author": "Arduino SA",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"deepmerge": "4.2.2",
|
||||
"depcheck": "^0.7.1",
|
||||
"shelljs": "^0.8.3",
|
||||
"yargs": "^12.0.5"
|
||||
|
||||
@ -200,6 +200,11 @@ decamelize@^1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
|
||||
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
|
||||
|
||||
deepmerge@4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
|
||||
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
|
||||
|
||||
depcheck@^0.7.1:
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/depcheck/-/depcheck-0.7.1.tgz#d4ef8511620fc5c783dafe27887cfdab533b1215"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user