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

Toolbar enhancements (#1194)

Browse Source
This commit is contained in:
Francesco Spissu
2022-07-18 18:43:41 +02:00
committed by GitHub
parent d4833affc6
commit 5ff9ce0028
23 changed files with 139 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
}
.p-TabBar-toolbar .item.arduino-tool-item {
margin-left: 3px;
margin-left: 0;
}
.p-TabBar-toolbar .item.arduino-tool-item .toggle-serial-monitor,
@@ -18,8 +18,12 @@
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
height: 28px;
width: 28px;
}
.p-TabBar-toolbar .item.arduino-tool-item .arduino-upload-sketch--toolbar,
.p-TabBar-toolbar .item.arduino-tool-item .arduino-verify-sketch--toolbar {
background: var(--theia-arduino-toolbar-button-background);
}
@@ -27,9 +31,15 @@
background: var(--theia-arduino-toolbar-button-hoverBackground);
}
.p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-monitor,
.p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-plotter {
background-color: var(--theia-arduino-toolbar-button-secondary-hoverBackground);
border-radius: 14px;
}
.arduino-verify-sketch--toolbar,
.arduino-upload-sketch--toolbar {
border-radius: 12px;
border-radius: 14px;
}
.item.arduino-tool-item.toggled {
@@ -38,48 +48,34 @@
border: none;
}
.item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar {
.item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar,
.item.arduino-tool-item.toggled .arduino-upload-sketch--toolbar {
background-color: var(--theia-arduino-toolbar-toggleBackground) !important;
}
.arduino-tool-icon {
height: 24px;
width: 24px;
background-color: var(--theia-titleBar-activeBackground);
-webkit-mask: url(../icons/mask-buttons.svg);
mask: url(../icons/mask-buttons.svg);
-webkit-mask-size: 800%;
mask-size: 800%;
}
.arduino-save-sketch--toolbar-icon {
-webkit-mask-position: 59px -4px;
mask-position: 59px -4px;
height: 28px;
width: 28px;
}
.arduino-verify-sketch--toolbar-icon {
-webkit-mask-position: 188px -4px;
mask-position: 188px -4px;
-webkit-mask: url(../icons/verify.svg) center no-repeat;
background-color: var(--theia-titleBar-activeBackground);
}
.arduino-upload-sketch--toolbar-icon {
-webkit-mask-position: 156px -4px;
mask-position: 156px -4px;
}
.arduino-new-sketch--toolbar-icon {
-webkit-mask-position: 124px -4px;
mask-position: 124px -4px;
}
.arduino-open-sketch--toolbar-icon {
-webkit-mask-position: 92px -4px;
mask-position: 92px -4px;
-webkit-mask: url(../icons/upload.svg) center no-repeat;
background-color: var(--theia-titleBar-activeBackground);
}
.toggle-serial-monitor-icon {
-webkit-mask-position: 28px -4px;
mask-position: 28px -4px;
-webkit-mask: url(../icons/monitor.svg) center no-repeat;
background-color: var(--theia-arduino-toolbar-button-secondary-label);
}
.toggle-serial-plotter-icon {
-webkit-mask: url(../icons/plotter.svg) center no-repeat;
background-color: var(--theia-arduino-toolbar-button-secondary-label);
}
.arduino-start-debug-icon {
@@ -106,20 +102,19 @@
}
.p-TabBar-toolbar.theia-arduino-toolbar {
align-items: center;
gap: 8px;
margin: 0 12px;
padding: 0;
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 */
:root {
--theia-private-menubar-height: 40px; /* set the topbar height */
}
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
justify-content: flex-start;
min-width: 100px;
}
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.left {
@@ -128,7 +123,6 @@
}
.arduino-toolbar-tooltip {
margin-left: 10px;
display: flex;
align-items: center;
color: var(--theia-titleBar-activeForeground);
@@ -177,19 +171,6 @@
margin-left: 10px;
}
#arduino-open-sketch-control--toolbar--container {
background-color: var(--theia-arduino-toolbar-button-background);
border-radius: 1px;
}
#arduino-open-sketch-control--toolbar {
height: unset;
width: unset;
line-height: unset;
color: var(--theia-titleBar-activeBackground);
padding: 5px 8px; /* based on pure heuristics */
}
/* Output */
.theia-output .editor-container {
background-color: var(--theia-arduino-output-background);