mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-06-13 07:36:32 +00:00
Adapted Dark, Light and Arduino themes
Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker
parent
c98ec29810
commit
2220e66f4b
70
arduino-ide-extension/src/browser/icons/mask-buttons.svg
Normal file
70
arduino-ide-extension/src/browser/icons/mask-buttons.svg
Normal file
@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!--Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" id="Layer_1" width="198px" height="99px" x="0px" y="0px" enable-background="new 0 0 198 99" version="1.1" viewBox="0 0 198 99" inkscape:version="0.91 r13725" sodipodi:docname="buttons.svg" xml:space="preserve">
|
||||
<metadata id="metadata327">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>
|
||||
image/svg+xml
|
||||
</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs id="defs325"/>
|
||||
<sodipodi:namedview id="namedview323" bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" objecttolerance="10" pagecolor="#ffffff" showgrid="false" showguides="true" inkscape:current-layer="Layer_1" inkscape:cx="45.252385" inkscape:cy="36.224987" inkscape:guide-bbox="true" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1000" inkscape:window-maximized="1" inkscape:window-width="1215" inkscape:window-x="65" inkscape:window-y="24" inkscape:zoom="4"/>
|
||||
<g id="g5" transform="translate(-0.12000084,0)">
|
||||
<polyline id="polyline9" stroke-miterlimit="10" points="21.453,12.745 15.788,20.571 11.775,16.658 " style="fill:none;stroke:#000000;stroke-width:2.30489993;stroke-miterlimit:10"/>
|
||||
</g>
|
||||
<g id="g23" transform="translate(-0.26100159,0)">
|
||||
<polygon id="polygon27" points="45.412,15.313 49.307,15.313 49.307,11.53 54.701,16.875 49.331,22.245 49.331,18.563 45.412,18.539 " style="fill:#000000"/>
|
||||
</g>
|
||||
<g id="g41" transform="translate(-0.54399872,0)">
|
||||
<polygon id="polygon45" points="114.44,19.083 114.44,15.116 110.586,15.116 116.032,9.621 121.502,15.091 117.751,15.091 117.726,19.083 " style="fill:#000000"/>
|
||||
<rect id="rect47" width="1" height="1" x="110.511" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect49" width="1" height="1" x="112.518" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect51" width="1" height="1" x="114.517" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect53" width="1" height="1" x="116.525" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect55" width="1" height="1" x="118.524" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect57" width="1" height="1" x="120.531" y="22.193001" style="fill:#000000"/>
|
||||
</g>
|
||||
<g id="g59" transform="translate(-0.68600464,0)">
|
||||
<polygon id="polygon63" points="150.79,9.621 150.79,13.588 154.644,13.588 149.198,19.083 143.728,13.612 147.479,13.613 147.504,9.621 " style="fill:#000000"/>
|
||||
<rect id="rect65" width="1" height="1" x="143.65199" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect67" width="1" height="1" x="145.66" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect69" width="1" height="1" x="147.659" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect71" width="1" height="1" x="149.666" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect73" width="1" height="1" x="151.666" y="22.193001" style="fill:#000000"/>
|
||||
<rect id="rect75" width="1" height="1" x="153.673" y="22.193001" style="fill:#000000"/>
|
||||
</g>
|
||||
<g id="g149" transform="translate(-0.40299988,0)">
|
||||
<path id="path151" d="M 87.445,22.097" style="fill:#000000" inkscape:connector-curvature="0"/>
|
||||
<polygon id="polygon155" points="83.44,10.094 84.441,10.094 88.421,14.079 88.421,15.057 87.445,15.057 83.44,15.057 " style="fill:#000000"/>
|
||||
<polygon id="polygon157" points="78.404,11.093 78.404,22.097 87.445,22.097 87.445,14.87 88.421,14.87 88.421,23.134 77.399,23.134 77.399,10.094 83.562,10.094 83.568,11.093 " style="fill:#000000"/>
|
||||
<rect id="rect159" width="0.995" height="0.99599999" x="79.399002" y="12.111" style="fill:#000000"/>
|
||||
<rect id="rect161" width="0.995" height="0.99599999" x="81.394997" y="12.111" style="fill:#000000"/>
|
||||
<rect id="rect163" width="0.995" height="0.99599999" x="79.399002" y="14.103" style="fill:#000000"/>
|
||||
<rect id="rect165" width="0.995" height="0.99599999" x="81.394997" y="14.103" style="fill:#000000"/>
|
||||
<rect id="rect167" width="0.995" height="0.99599999" x="79.399002" y="16.115999" style="fill:#000000"/>
|
||||
<rect id="rect169" width="0.995" height="0.99599999" x="81.394997" y="16.115999" style="fill:#000000"/>
|
||||
<rect id="rect171" width="0.995" height="0.99599999" x="83.403" y="16.115999" style="fill:#000000"/>
|
||||
<rect id="rect173" width="0.995" height="0.99599999" x="85.400002" y="16.115999" style="fill:#000000"/>
|
||||
<rect id="rect175" width="0.995" height="0.99599999" x="79.399002" y="18.118" style="fill:#000000"/>
|
||||
<rect id="rect177" width="0.995" height="0.99599999" x="81.394997" y="18.118" style="fill:#000000"/>
|
||||
<rect id="rect179" width="0.995" height="0.99599999" x="79.399002" y="20.132" style="fill:#000000"/>
|
||||
<rect id="rect181" width="0.995" height="0.99599999" x="81.394997" y="20.132" style="fill:#000000"/>
|
||||
<rect id="rect183" width="0.995" height="0.99599999" x="83.403" y="18.118" style="fill:#000000"/>
|
||||
<rect id="rect185" width="0.995" height="0.99599999" x="85.400002" y="18.118" style="fill:#000000"/>
|
||||
<rect id="rect187" width="0.995" height="0.99599999" x="83.403" y="20.132" style="fill:#000000"/>
|
||||
<rect id="rect189" width="0.995" height="0.99599999" x="85.400002" y="20.132" style="fill:#000000"/>
|
||||
</g>
|
||||
<g id="g275" transform="translate(-0.82800293,0)">
|
||||
<rect id="rect279" width="0.99900001" height="0.99800003" x="187.819" y="16.101" style="fill:#000000"/>
|
||||
<rect id="rect281" width="0.99900001" height="0.99800003" x="189.825" y="16.101" style="fill:#000000"/>
|
||||
<rect id="rect283" width="0.99900001" height="0.99800003" x="174.83299" y="16.101" style="fill:#000000"/>
|
||||
<circle id="circle285" cx="181.80299" cy="16.101" r="4.0900002" stroke-miterlimit="10" style="fill:none;stroke:#000000;stroke-width:1.95439994;stroke-miterlimit:10"/>
|
||||
<rect id="rect287" width="2.6800001" height="4.4229999" x="175.895" y="18.427999" style="fill:#000000" transform="matrix(0.6915,0.7224,-0.7224,0.6915,69.5827,-121.6599)"/>
|
||||
<rect id="rect289" width="2.0280001" height="1.9960001" x="180.789" y="15.103" style="fill:#000000"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
@ -18,47 +18,57 @@ is not optimized for dense, information rich UIs.
|
||||
|
||||
:root {
|
||||
/* Custom Theme Colors */
|
||||
--theia-arduino-light: rgb(0, 102, 102);
|
||||
--theia-arduino-light1: rgb(0, 153, 153);
|
||||
--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-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-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;
|
||||
@ -71,75 +81,101 @@ is not optimized for dense, information rich UIs.
|
||||
--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-light);
|
||||
--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: rgb(0, 102, 105);
|
||||
--theia-accent-color1: rgb(0, 164, 167, 1.0);
|
||||
--theia-accent-color2: rgb(0, 164, 167, 0.8);
|
||||
--theia-accent-color3: rgb(0, 164, 167, 0.6);
|
||||
--theia-accent-color4: rgb(0, 164, 167, 0.4);
|
||||
|
||||
--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);
|
||||
@ -147,7 +183,7 @@ is not optimized for dense, information rich UIs.
|
||||
--theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4);
|
||||
--theia-scrollbar-active-rail-color: transparent;
|
||||
/* Menu */
|
||||
--theia-menu-color0: var(--theia-layout-color3);
|
||||
--theia-menu-color0: var(--theia-arduino-light);
|
||||
--theia-menu-color1: var(--theia-layout-color0);
|
||||
--theia-menu-color2: #dae3e3;
|
||||
/* Statusbar */
|
||||
@ -155,9 +191,9 @@ is not optimized for dense, information rich UIs.
|
||||
--theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
|
||||
--theia-statusBar-font-size: 12px;
|
||||
/* Buttons */
|
||||
--theia-ui-button-color: var(--theia-arduino-light);
|
||||
--theia-ui-button-color-hover: var(--theia-arduino-light1);
|
||||
--theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
|
||||
--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);
|
||||
@ -197,4 +233,8 @@ is not optimized for dense, information rich UIs.
|
||||
--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);
|
||||
|
||||
}
|
||||
@ -140,8 +140,8 @@ button.theia-button.secondary {
|
||||
|
||||
button.theia-button.main {
|
||||
color: #fff;
|
||||
background-color: #00979c;
|
||||
box-shadow: 0 4px #005c5f;
|
||||
/* background-color: #00979c; */
|
||||
box-shadow: 0 4px var(--theia-accent-color0);
|
||||
}
|
||||
|
||||
.dialogControl {
|
||||
@ -185,7 +185,7 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-toolbar-item {
|
||||
background: white;
|
||||
background: var(--theia-layout-color1);
|
||||
height: 22px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -193,7 +193,7 @@ button.theia-button.main {
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-list {
|
||||
background: #f7f7f7;
|
||||
background: var(--theia-layout-color1);
|
||||
border: 3px solid var(--theia-border-color2);
|
||||
margin: -3px;
|
||||
z-index: 1000;
|
||||
@ -204,13 +204,14 @@ button.theia-button.main {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--theia-ui-font-color1);
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item .fa-check {
|
||||
color: var(--theia-accent-color2);
|
||||
color: var(--theia-accent-color1);
|
||||
}
|
||||
|
||||
.arduino-boards-dropdown-item.selected,
|
||||
.arduino-boards-dropdown-item:hover {
|
||||
background: var(--theia-ui-button-color-secondary-hover);
|
||||
background: var(--theia-layout-color3);
|
||||
}
|
||||
|
||||
@ -50,15 +50,15 @@
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(odd) {
|
||||
background-color: var(--theia-secondary-brand-color2);
|
||||
background-color: var(--theia-layout-color0);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:nth-child(even) {
|
||||
background-color: var(--theia-secondary-brand-color3);
|
||||
background-color: var(--theia-layout-color1);
|
||||
}
|
||||
|
||||
.filterable-list-container .items-container > div:hover {
|
||||
background-color: var(--theia-layout-color1);
|
||||
background-color: var(--theia-layout-color2);
|
||||
}
|
||||
|
||||
.component-list-item {
|
||||
@ -111,7 +111,7 @@
|
||||
.component-list-item .header .installed {
|
||||
margin-left: 4px;
|
||||
justify-self: end;
|
||||
background-color: var(--theia-accent-color2);
|
||||
background-color: var(--theia-accent-color1);
|
||||
padding: 2px 4px 2px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
|
||||
@ -7,66 +7,65 @@
|
||||
}
|
||||
|
||||
#outputView {
|
||||
color: var(--theia-ui-font-color3);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#toggle-serial-monitor.arduino-tool-icon:hover,
|
||||
#arduino-verify.arduino-tool-icon:hover,
|
||||
#arduino-save-file.arduino-tool-icon:hover,
|
||||
#arduino-show-open-context-menu.arduino-tool-icon:hover,
|
||||
#arduino-upload.arduino-tool-icon:hover {
|
||||
background-position-y: 60px;
|
||||
}
|
||||
|
||||
#toggle-serial-monitor.arduino-tool-icon,
|
||||
#arduino-verify.arduino-tool-icon,
|
||||
#arduino-save-file.arduino-tool-icon,
|
||||
#arduino-show-open-context-menu.arduino-tool-icon,
|
||||
#arduino-upload.arduino-tool-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
#arduino-save-file {
|
||||
background: url(../icons/buttons.svg);
|
||||
background-size: 800%;
|
||||
background-position-y: 28px;
|
||||
background-position-x: 59px;
|
||||
}
|
||||
|
||||
#arduino-verify {
|
||||
background: url(../icons/buttons.svg);
|
||||
background-size: 800%;
|
||||
background-position-y: 28px;
|
||||
background-position-x: 188px;
|
||||
}
|
||||
|
||||
#arduino-upload {
|
||||
background: url(../icons/buttons.svg);
|
||||
background-size: 800%;
|
||||
background-position-y: 28px;
|
||||
background-position-x: 156px;
|
||||
}
|
||||
|
||||
#arduino-show-open-context-menu {
|
||||
background: url(../icons/buttons.svg);
|
||||
background-size: 800%;
|
||||
background-position-y: 28px;
|
||||
background-position-x: 92px;
|
||||
}
|
||||
|
||||
#toggle-serial-monitor {
|
||||
background: url(../icons/buttons.svg);
|
||||
background-size: 800%;
|
||||
background-position-y: 28px;
|
||||
background-position-x: 28px;
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-tool-item {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-tool-item > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-ui-button-color);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
|
||||
background: var(--theia-ui-button-color-hover);
|
||||
}
|
||||
|
||||
.arduino-verify, .arduino-upload {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.arduino-tool-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-ui-button-font-color);
|
||||
-webkit-mask: url(../icons/mask-buttons.svg);
|
||||
mask: url(../icons/mask-buttons.svg);
|
||||
-webkit-mask-size: 800%;
|
||||
mask-size: 800%;
|
||||
}
|
||||
|
||||
.arduino-save-file-icon {
|
||||
-webkit-mask-position: 59px -4px;
|
||||
mask-position: 59px -4px;
|
||||
}
|
||||
|
||||
.arduino-verify-icon {
|
||||
-webkit-mask-position: 188px -4px;
|
||||
mask-position: 188px -4px;
|
||||
}
|
||||
|
||||
.arduino-upload-icon {
|
||||
-webkit-mask-position: 156px -4px;
|
||||
mask-position: 156px -4px;
|
||||
}
|
||||
|
||||
.arduino-show-open-context-menu-icon {
|
||||
-webkit-mask-position: 92px -4px;
|
||||
mask-position: 92px -4px;
|
||||
}
|
||||
|
||||
.toggle-serial-monitor-icon {
|
||||
-webkit-mask-position: 28px -4px;
|
||||
mask-position: 28px -4px;
|
||||
}
|
||||
|
||||
#arduino-toolbar-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@ -112,13 +111,22 @@
|
||||
color: var(--theia-ui-font-color3);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item > div#arduino-toggle-advanced-mode {
|
||||
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theia-ui-font-color3);
|
||||
}
|
||||
|
||||
.arduino-toggle-advanced-mode-icon {
|
||||
mask: none;
|
||||
-webkit-mask: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--theia-ui-button-font-color);
|
||||
}
|
||||
|
||||
.monaco-editor .margin {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
.serial-monitor-container .head {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
background: var(--theia-brand-color2);
|
||||
background: var(--theia-layout-color0);
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
@ -27,17 +27,22 @@
|
||||
display: flex;
|
||||
padding: 0 5px;
|
||||
align-items: center;
|
||||
background: var(--theia-brand-color3);
|
||||
color: var(--theia-ui-dialog-font-color);
|
||||
color: var(--theia-ui-font-color1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.serial-monitor-container .head .send .btn:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.serial-monitor-container .head .send form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background: var(--theia-layout-color2);
|
||||
}
|
||||
|
||||
.serial-monitor-container .head .send input#serial-monitor-send {
|
||||
background: var(--theia-layout-color0);
|
||||
color: var(--theia-ui-font-color1);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -67,7 +72,7 @@
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-monitor.toggled {
|
||||
background: var(--theia-brand-color2);
|
||||
background: var(--theia-secondary-brand-color0);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item .clear-all {
|
||||
@ -77,6 +82,7 @@
|
||||
/* React Select Styles */
|
||||
.serial-monitor-select .sms__control {
|
||||
border: var(--theia-border-color1) var(--theia-border-width) solid;
|
||||
background: var(--theia-layout-color2);
|
||||
}
|
||||
|
||||
.serial-monitor-select .sms__control--is-focused {
|
||||
@ -110,6 +116,10 @@
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.serial-monitor-select .sms__value-container .sms__single-value {
|
||||
color: var(--theia-ui-font-color1);
|
||||
}
|
||||
|
||||
.sms__menu-list {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
@ -28,7 +28,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
|
||||
|
||||
protected renderItem = (item: TabBarToolbarItem) => {
|
||||
let innerText = '';
|
||||
let className = `${item.id} arduino-tool-icon`;
|
||||
let className = `arduino-tool-icon ${item.id}-icon`;
|
||||
if (item.text) {
|
||||
for (const labelPart of this.props.labelParser.parse(item.text)) {
|
||||
if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
|
||||
@ -40,17 +40,18 @@ 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' : ''}`
|
||||
return <div key={item.id}
|
||||
className={cls} >
|
||||
<div
|
||||
key={item.id + '-icon'}
|
||||
id={item.id}
|
||||
className={className}
|
||||
onClick={this.props.executeCommand}
|
||||
onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
|
||||
onMouseOut={() => this.setState({ tooltip: '' })}
|
||||
title={item.tooltip}>
|
||||
{innerText}
|
||||
return <div key={item.id} className={cls} >
|
||||
<div className={item.id}>
|
||||
<div
|
||||
key={item.id + '-icon'}
|
||||
id={item.id}
|
||||
className={className}
|
||||
onClick={this.props.executeCommand}
|
||||
onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
|
||||
onMouseOut={() => this.setState({ tooltip: '' })}
|
||||
title={item.tooltip}>
|
||||
{innerText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user