mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-04-19 12:57:17 +00:00
Removed a few custom colors and derived them from existing ones.
Fixed the color for the: - selected items in the Explorer, - warning `input`s, - set custom dialog background for the Arduino theme, - the query term matches in the command palette, and - react-select. Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
parent
cbe603a99f
commit
403fdbfdc0
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
|
||||
*-app/*webpack.config.js
|
||||
.DS_Store
|
||||
/workspace/static
|
||||
.DS_Store
|
||||
# switching from `electron` to `browser` in dev mode.
|
||||
|
@ -582,184 +582,29 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
|
||||
registerColors(colors: ColorRegistry): void {
|
||||
colors.register(
|
||||
{
|
||||
id: 'arduino.base',
|
||||
id: 'arduino.branding.primary',
|
||||
defaults: {
|
||||
dark: '#616161',
|
||||
light: '#616161',
|
||||
hc: '#FFFFFF'
|
||||
dark: 'statusBar.background',
|
||||
light: 'statusBar.background'
|
||||
},
|
||||
description: 'Base layout color.'
|
||||
description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.toolbarTooltip',
|
||||
id: 'arduino.branding.secondary',
|
||||
defaults: {
|
||||
dark: '#616161',
|
||||
light: '#616161',
|
||||
hc: '#FFFFFF'
|
||||
dark: 'statusBar.background',
|
||||
light: 'statusBar.background'
|
||||
},
|
||||
description: 'The color of the toolbar tooltip (shown next to the buttons).'
|
||||
description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.editorMargin',
|
||||
defaults: {
|
||||
dark: '#2e2e2e',
|
||||
light: '#EEEEEE',
|
||||
hc: 'contrastBorder'
|
||||
},
|
||||
description: 'The color of the border which separates line numbers from code area.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.dialogTitle',
|
||||
defaults: {
|
||||
dark: 'foreground',
|
||||
light: 'foreground',
|
||||
hc: 'contrastBorder'
|
||||
},
|
||||
description: 'The color of a dialog title (e.g. in board selector dialog).'
|
||||
},
|
||||
{
|
||||
id: 'arduino.select',
|
||||
defaults: {
|
||||
|
||||
},
|
||||
description: 'Color of background and border of select component (in serial monitor).'
|
||||
},
|
||||
{
|
||||
id: 'arduino.selectItemHoverBackground',
|
||||
defaults: {
|
||||
light: '#d7eaf8',
|
||||
dark: '#24455e'
|
||||
},
|
||||
description: 'Color of background of hovered Item in select component (in serial monitor).'
|
||||
},
|
||||
{
|
||||
id: 'arduino.dialogSecondaryTitle',
|
||||
defaults: {
|
||||
dark: '#7f8c8d',
|
||||
light: '#7f8c8d'
|
||||
},
|
||||
description: 'Color of secondary titles in Arduino Dialogs.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.secondaryButtonShadow',
|
||||
defaults: {
|
||||
dark: '#95a5a6',
|
||||
light: '#95a5a6'
|
||||
},
|
||||
description: 'Color of secondary button shadow.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.buttonShadow',
|
||||
defaults: {
|
||||
dark: '#006468',
|
||||
light: '#006468'
|
||||
},
|
||||
description: 'Color of button shadow.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.toolbarItemForeground',
|
||||
defaults: {
|
||||
dark: 'button.foreground',
|
||||
light: 'button.foreground'
|
||||
},
|
||||
description: 'Foreground color of toolbar items.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.boardSelectorBackground',
|
||||
id: 'arduino.foreground',
|
||||
defaults: {
|
||||
dark: 'editorWidget.background',
|
||||
light: 'editorWidget.background',
|
||||
hc: 'editorWidget.background'
|
||||
},
|
||||
description: 'Background color of board selector toolbar item.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.boardSelectorHoverBackground',
|
||||
defaults: {
|
||||
dark: '#383838',
|
||||
light: '#dae2e4'
|
||||
},
|
||||
description: 'Background color of board selector toolbar item.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.boardSelectorBorder',
|
||||
defaults: {
|
||||
dark: '#757575',
|
||||
light: '#e0e0e0'
|
||||
},
|
||||
description: 'Border color of board selector toolbar item.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.boardSelectorCheck',
|
||||
defaults: {
|
||||
dark: '#259fd8',
|
||||
light: '#2b75c0'
|
||||
},
|
||||
description: 'Color of board selector toolbar check item.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listOddItem',
|
||||
defaults: {
|
||||
dark: '#1d1d1d',
|
||||
light: '#ffffff'
|
||||
},
|
||||
description: 'Backgroundcolor of item with odd number in list widget'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listEvenItem',
|
||||
defaults: {
|
||||
dark: '#252526',
|
||||
light: '#f7f9f9'
|
||||
},
|
||||
description: 'Backgroundcolor of item with even number in list widget'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listItemHoverBackground',
|
||||
defaults: {
|
||||
dark: '#333333',
|
||||
light: '#ececec'
|
||||
},
|
||||
description: 'Backgroundcolor of hovered item in list widget'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listItemSecondaryForeground',
|
||||
defaults: {
|
||||
dark: '#9e9e9e',
|
||||
light: '#9e9e9e'
|
||||
},
|
||||
description: 'Backgroundcolor of hovered item in list widget'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listItemInstalledBadge',
|
||||
defaults: {
|
||||
dark: '#259fd8',
|
||||
light: '#2b75c0'
|
||||
},
|
||||
description: 'Color of badge for installed list items.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.listItemInfoLinkForeground',
|
||||
defaults: {
|
||||
dark: '#2196f3',
|
||||
light: '#2196f3'
|
||||
},
|
||||
description: 'Color of info link in list items.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.bottomPanelTabBackground',
|
||||
defaults: {
|
||||
dark: 'editorGroupHeader.tabsBackground',
|
||||
light: 'editorGroupHeader.tabsBackground'
|
||||
},
|
||||
description: 'Color of info link in list items.'
|
||||
},
|
||||
{
|
||||
id: 'arduino.toolbarToggleBackground',
|
||||
defaults: {
|
||||
dark: '#757575',
|
||||
light: '#9e9e9e'
|
||||
},
|
||||
description: 'Color of active toggles (as in serial monitor toolbar).'
|
||||
description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -76,7 +76,7 @@ const ElementQueries = require('css-element-queries/src/ElementQueries');
|
||||
|
||||
MonacoThemingService.register({
|
||||
id: 'arduinoTheme',
|
||||
label: 'Arduino Light Theme',
|
||||
label: 'Light (Arduino)',
|
||||
uiTheme: 'vs',
|
||||
json: require('../../src/browser/data/arduino.color-theme.json')
|
||||
});
|
||||
|
@ -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-arduino-selectItemHoverBackground)',
|
||||
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;
|
||||
|
@ -1,91 +1,93 @@
|
||||
{
|
||||
"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",
|
||||
"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",
|
||||
@ -95,32 +97,19 @@
|
||||
"button.background": "#4db7bb",
|
||||
"titleBar.activeBackground": "#006468",
|
||||
"titleBar.activeForeground": "#ffffff",
|
||||
"secondaryButton.background": "#b5c8c9",
|
||||
"secondaryButton.hoverBackground": "#dae3e3",
|
||||
"terminal.background": "#000000",
|
||||
"terminal.foreground": "#e0e0e0",
|
||||
"dropdown.border": "#ececec",
|
||||
"dropdown.background": "#ececec",
|
||||
"warningForeground": "#434f54",
|
||||
"activityBar.background": "#ececec",
|
||||
"activityBar.foreground": "#616161",
|
||||
"statusBar.background": "#006468",
|
||||
"arduino.base": "#006468",
|
||||
"arduino.dialogTitle": "#00979d",
|
||||
"arduino.select": "#ececec",
|
||||
"arduino.selectItemHoverBackground": "#4db7bb66",
|
||||
"list.hoverBackground": "#ececec",
|
||||
"arduino.secondaryButtonShadow": "#95a5a6",
|
||||
"arduino.buttonShadow": "#006468",
|
||||
"arduino.boardSelectorCheck": "#4db7bb",
|
||||
"arduino.listItemInstalledBadge": "#4db7bb",
|
||||
"inputValidation.warningBackground": "#ffb300",
|
||||
"arduino.listItemInfoLinkForeground": "#17a1a5",
|
||||
"arduino.toolbarItemForeground": "#006468",
|
||||
"arduino.toolbarTooltip": "#e0e0e0",
|
||||
"arduino.bottomPanelTabBackground": "#ffffff",
|
||||
"arduino.toolbarToggleBackground": "#b5c8c9"
|
||||
},
|
||||
"secondaryButton.background": "#b5c8c9",
|
||||
"secondaryButton.hoverBackground": "#dae3e3",
|
||||
"arduino.branding.primary": "#00979d",
|
||||
"arduino.branding.secondary": "#b5c8c9",
|
||||
"arduino.foreground": "#edf1f1"
|
||||
},
|
||||
"type": "light",
|
||||
"name": "Arduino"
|
||||
}
|
||||
"name": "Arduino"
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
.arduino-select__control {
|
||||
border: var(--theia-arduino-select) var(--theia-border-width) solid !important;
|
||||
background: var(--theia-arduino-select) !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-arduino-select) var(--theia-border-width) solid !important;
|
||||
border: var(--theia-focusBorder) var(--theia-border-width) solid !important;
|
||||
}
|
||||
|
||||
.arduino-select__control--is-focused {
|
||||
@ -12,18 +12,24 @@
|
||||
}
|
||||
|
||||
.arduino-select__option--is-selected {
|
||||
background-color: var(--theia-focusBorder) !important;
|
||||
color: var(--theia-editor-foreground) !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-arduino-selectItemHoverBackground) !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-arduino-select) !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;
|
||||
@ -32,7 +38,7 @@
|
||||
.arduino-select__control.arduino-select__control--menu-is-open {
|
||||
border: 1px solid !important;
|
||||
border-color: var(--theia-focusBorder) !important;
|
||||
border-bottom-color: var(--theia-arduino-select) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
|
||||
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 {
|
||||
|
@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
|
||||
font-weight: 400;
|
||||
letter-spacing: .02em;
|
||||
font-size: 1.2em;
|
||||
color: var(--theia-arduino-dialogTitle);
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
@ -27,8 +27,8 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected {
|
||||
background: var(--theia-secondaryButton-hoverBackground);
|
||||
}
|
||||
|
||||
div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
color: var(--theia-arduino-base);
|
||||
div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .search,
|
||||
@ -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: var(--theia-arduino-dialogSecondaryTitle);
|
||||
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-mod-disabled-opacity);
|
||||
opacity: var(--theia-mod-disabled-opacity);
|
||||
width: 155px; /* used heuristics for the calculation */
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
@ -107,7 +107,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list .item.missing {
|
||||
color: var(--theia-mod-disabled-opacity);
|
||||
opacity: var(--theia-mod-disabled-opacity);
|
||||
}
|
||||
|
||||
#select-board-dialog .selectBoardContainer .body .list .item:hover {
|
||||
@ -142,12 +142,10 @@ button.theia-button {
|
||||
button.theia-button.secondary {
|
||||
background-color: var(--theia-secondaryButton-background);
|
||||
color: var(--theia-foreground);
|
||||
box-shadow: 0 4px var(--theia-arduino-secondaryButtonShadow);
|
||||
}
|
||||
|
||||
button.theia-button.main {
|
||||
color: var(--theia-button-foreground);
|
||||
box-shadow: 0 4px var(--theia-arduino-buttonShadow);
|
||||
}
|
||||
|
||||
.dialogControl {
|
||||
@ -191,16 +189,17 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-toolbar-item {
|
||||
background: var(--theia-arduino-boardSelectorBackground);
|
||||
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-arduino-boardSelectorBorder);
|
||||
border: 3px solid var(--theia-activityBar-background);
|
||||
margin: -3px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -211,15 +210,15 @@ button.theia-button.main {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--theia-foreground);
|
||||
background: var(--theia-arduino-boardSelectorBackground);
|
||||
background: var(--theia-tab-unfocusedActiveBackground);
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item .fa-check {
|
||||
color: var(--theia-arduino-boardSelectorCheck);
|
||||
color: var(--theia-arduino-branding-primary);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item.selected,
|
||||
.arduino-boards-dropdown-item:hover {
|
||||
background: var(--theia-arduino-boardSelectorHoverBackground);
|
||||
background: var(--theia-list-hoverBackground);
|
||||
}
|
||||
|
@ -10,26 +10,26 @@
|
||||
outline-style: solid;
|
||||
outline-offset: -1px;
|
||||
opacity: 1 !important;
|
||||
color: var(--theia-foreground);
|
||||
background-color: var(--theia-inputValidation-warningBackground);
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
.theia-input.warning {
|
||||
background-color: var(--theia-inputValidation-warningBackground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: var(--theia-foreground);
|
||||
background-color: var(--theia-inputValidation-warningBackground);
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: var(--theia-foreground);
|
||||
background-color: var(--theia-inputValidation-warningBackground);
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
||||
.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: var(--theia-foreground);
|
||||
background-color: var(--theia-inputValidation-warningBackground);
|
||||
color: var(--theia-warningForeground);
|
||||
background-color: var(--theia-warningBackground);
|
||||
}
|
||||
|
@ -28,15 +28,18 @@
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(odd) {
|
||||
background-color: var(--theia-arduino-listOddItem);
|
||||
background-color: var(--theia-sideBar-background);
|
||||
filter: contrast(105%);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(even) {
|
||||
background-color: var(--theia-arduino-listEvenItem);
|
||||
background-color: var(--theia-sideBar-background);
|
||||
filter: contrast(95%);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:hover {
|
||||
background-color: var(--theia-arduino-listItemHoverBackground);
|
||||
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,7 +77,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
|
||||
.component-list-item .header .author {
|
||||
font-weight: bold;
|
||||
color: var(--theia-arduino-listItemSecondaryForeground);
|
||||
color: var(--theia-panelTitle-inactiveForeground);
|
||||
}
|
||||
|
||||
.component-list-item:hover .header .author {
|
||||
@ -82,14 +85,18 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item .header .version {
|
||||
color: var(--theia-arduino-listItemSecondaryForeground);
|
||||
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-arduino-listItemInstalledBadge);
|
||||
background-color: var(--theia-button-background);
|
||||
padding: 2px 4px 2px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
@ -100,7 +107,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
|
||||
.component-list-item .header .installed:hover:before {
|
||||
background-color: var(--theia-button-foreground);
|
||||
color: var(--theia-arduino-listItemInstalledBadge);
|
||||
color: var(--theia-button-background);
|
||||
content: 'UNINSTALL';
|
||||
}
|
||||
|
||||
@ -131,7 +138,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item .info a {
|
||||
color: var(--theia-arduino-listItemInfoLinkForeground);
|
||||
color: var(--theia-button-background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -2,10 +2,6 @@
|
||||
background: var(--theia-editorGroupHeader-tabsBackground);
|
||||
}
|
||||
|
||||
#theia-bottom-content-panel .p-TabBar-tab {
|
||||
background: var(--theia-arduino-bottomPanelTabBackground);
|
||||
}
|
||||
|
||||
.theia-output {
|
||||
background: var(--theia-terminal-background);
|
||||
color: var(--theia-terminal-foreground);
|
||||
@ -39,8 +35,7 @@
|
||||
.arduino-tool-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: var(--theia-arduino-toolbarItemForeground);
|
||||
background: var(--theia-arduino-toolbarItemForeground);
|
||||
background-color: var(--theia-titleBar-activeBackground);
|
||||
-webkit-mask: url(../icons/mask-buttons.svg);
|
||||
mask: url(../icons/mask-buttons.svg);
|
||||
-webkit-mask-size: 800%;
|
||||
@ -82,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;
|
||||
@ -96,7 +99,7 @@
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--theia-arduino-toolbarTooltip);
|
||||
color: var(--theia-titleBar-activeForeground);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
|
||||
@ -114,11 +117,11 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theia-arduino-toolbarItemForeground);
|
||||
color: var(--theia-titleBar-activeBackground);;
|
||||
}
|
||||
|
||||
.monaco-editor .margin {
|
||||
border-right: 2px solid var(--theia-arduino-editorMargin);
|
||||
border-right: 2px solid var(--theia-sideBar-background);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -130,4 +133,8 @@
|
||||
|
||||
.theia-sidepanel-toolbar .theia-sidepanel-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-Widget.dialogOverlay .dialogBlock {
|
||||
background-color: var(--theia-arduino-foreground);
|
||||
}
|
||||
|
@ -54,7 +54,8 @@
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-monitor.toggled {
|
||||
background: var(--theia-arduino-toolbarToggleBackground);
|
||||
background: var(--theia-sideBarSectionHeader-background);
|
||||
filter: contrast(80%);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item .clear-all {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user