mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-11-07 01:18:33 +00:00
Updated Arduino App to new theming system
Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
This commit is contained in:
Jan Bicker
@@ -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-arduino-select) var(--theia-border-width) solid !important;
|
||||
background: var(--theia-arduino-select) !important;
|
||||
}
|
||||
|
||||
.arduino-select__control:hover {
|
||||
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
|
||||
border: var(--theia-arduino-select) var(--theia-border-width) solid !important;
|
||||
}
|
||||
|
||||
.arduino-select__control--is-focused {
|
||||
@@ -12,31 +12,31 @@
|
||||
}
|
||||
|
||||
.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-focusBorder) !important;
|
||||
color: var(--theia-editor-foreground) !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-arduino-selectItemHoverBackground) !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-arduino-select) !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-arduino-select) !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-dialogTitle);
|
||||
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);
|
||||
color: var(--theia-arduino-base);
|
||||
}
|
||||
|
||||
#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-dialogSecondaryTitle);
|
||||
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);
|
||||
color: 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);
|
||||
color: 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,14 @@ 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);
|
||||
box-shadow: 0 4px var(--theia-arduino-secondaryButtonShadow);
|
||||
}
|
||||
|
||||
button.theia-button.main {
|
||||
color: #fff;
|
||||
/* background-color: #00979c; */
|
||||
box-shadow: 0 4px var(--theia-accent-color0);
|
||||
color: var(--theia-button-foreground);
|
||||
box-shadow: 0 4px var(--theia-arduino-buttonShadow);
|
||||
}
|
||||
|
||||
.dialogControl {
|
||||
@@ -192,7 +191,8 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-toolbar-item {
|
||||
background: var(--theia-layout-color1);
|
||||
background: var(--theia-arduino-boardSelectorBackground);
|
||||
color: var(--theia-foreground);
|
||||
height: 22px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -200,7 +200,7 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-list {
|
||||
border: 3px solid var(--theia-border-color2);
|
||||
border: 3px solid var(--theia-arduino-boardSelectorBorder);
|
||||
margin: -3px;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -210,16 +210,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-arduino-boardSelectorBackground);
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item .fa-check {
|
||||
color: var(--theia-accent-color1);
|
||||
color: var(--theia-arduino-boardSelectorCheck);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item.selected,
|
||||
.arduino-boards-dropdown-item:hover {
|
||||
background: var(--theia-layout-color3);
|
||||
background: var(--theia-arduino-boardSelectorHoverBackground);
|
||||
}
|
||||
|
||||
@@ -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-foreground);
|
||||
background-color: var(--theia-inputValidation-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-inputValidation-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-foreground);
|
||||
background-color: var(--theia-inputValidation-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-foreground);
|
||||
background-color: var(--theia-inputValidation-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-foreground);
|
||||
background-color: var(--theia-inputValidation-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,15 @@
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(odd) {
|
||||
background-color: var(--theia-layout-color0);
|
||||
background-color: var(--theia-arduino-listOddItem);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(even) {
|
||||
background-color: var(--theia-layout-color1);
|
||||
background-color: var(--theia-arduino-listEvenItem);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:hover {
|
||||
background-color: var(--theia-layout-color2);
|
||||
background-color: var(--theia-arduino-listItemHoverBackground);
|
||||
}
|
||||
|
||||
/* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements.
|
||||
@@ -74,18 +53,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 +74,33 @@ 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-arduino-listItemSecondaryForeground);
|
||||
}
|
||||
|
||||
.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-arduino-listItemSecondaryForeground);
|
||||
}
|
||||
|
||||
.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-arduino-listItemInstalledBadge);
|
||||
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-arduino-listItemInstalledBadge);
|
||||
content: 'UNINSTALL';
|
||||
}
|
||||
|
||||
@@ -161,14 +131,10 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item .info a {
|
||||
color: var(--theia-brand-color1);
|
||||
color: var(--theia-arduino-listItemInfoLinkForeground);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.component-list-item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.component-list-item strong.installed {
|
||||
color: rgb(0, 151, 157)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
.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-bottom-content-panel .p-TabBar-tab {
|
||||
background: var(--theia-arduino-bottomPanelTabBackground);
|
||||
}
|
||||
|
||||
.theia-output {
|
||||
background: var(--theia-arduino-terminal);
|
||||
background: var(--theia-terminal-background);
|
||||
color: var(--theia-terminal-foreground);
|
||||
}
|
||||
|
||||
#outputView {
|
||||
@@ -20,11 +25,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 +39,8 @@
|
||||
.arduino-tool-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-ui-button-font-color);
|
||||
color: var(--theia-arduino-toolbarItemForeground);
|
||||
background: var(--theia-arduino-toolbarItemForeground);
|
||||
-webkit-mask: url(../icons/mask-buttons.svg);
|
||||
mask: url(../icons/mask-buttons.svg);
|
||||
-webkit-mask-size: 800%;
|
||||
@@ -86,29 +92,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-arduino-toolbarTooltip);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
|
||||
@@ -126,11 +114,11 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theia-ui-button-font-color);
|
||||
color: var(--theia-arduino-toolbarItemForeground);
|
||||
}
|
||||
|
||||
.monaco-editor .margin {
|
||||
border-right: 2px solid var(--theia-border-color1);
|
||||
border-right: 2px solid var(--theia-arduino-editorMargin);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,7 @@
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-monitor.toggled {
|
||||
background: var(--theia-secondary-brand-color1);
|
||||
background: var(--theia-arduino-toolbarToggleBackground);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item .clear-all {
|
||||
|
||||
Reference in New Issue
Block a user