jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-06 17:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed a few custom colors and derived them from existing ones.

Browse Source 
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:
Akos Kitta
2020-01-28 10:21:46 +01:00
parent cbe603a99f
commit 403fdbfdc0
14 changed files with 1627 additions and 1519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
arduino-ide-extension/src/browser/style/arduino-select.css
View File

@@ -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 {

25
arduino-ide-extension/src/browser/style/board-select-dialog.css
View File

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

18
arduino-ide-extension/src/browser/style/index.css
View File

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

23
arduino-ide-extension/src/browser/style/list-widget.css
View File

@@ -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;
}

27
arduino-ide-extension/src/browser/style/main.css
View File

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

3
arduino-ide-extension/src/browser/style/monitor.css
View File

@@ -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 {