mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-07-07 19:36:33 +00:00
Update buttons style (#1122)
* Buttons updated to reflect the design system.
This commit is contained in:
Francesco Spissu
GitHub
parent
a36524e02a
commit
d7a2d83990
@ -598,7 +598,7 @@ export class ArduinoFrontendContribution
|
||||
'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
|
||||
},
|
||||
{
|
||||
id: 'arduino.toolbar.background',
|
||||
id: 'arduino.toolbar.button.background',
|
||||
defaults: {
|
||||
dark: 'button.background',
|
||||
light: 'button.background',
|
||||
@ -608,7 +608,7 @@ export class ArduinoFrontendContribution
|
||||
'Background color of the toolbar items. Such as Upload, Verify, etc.',
|
||||
},
|
||||
{
|
||||
id: 'arduino.toolbar.hoverBackground',
|
||||
id: 'arduino.toolbar.button.hoverBackground',
|
||||
defaults: {
|
||||
dark: 'button.hoverBackground',
|
||||
light: 'button.foreground',
|
||||
|
||||
@ -1,128 +0,0 @@
|
||||
{
|
||||
"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",
|
||||
"variable.other"
|
||||
],
|
||||
"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",
|
||||
"variable",
|
||||
"variable.name"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#434f54"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "constants",
|
||||
"scope": [
|
||||
"string.quoted.double",
|
||||
"constant"
|
||||
],
|
||||
"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": "#005c5f",
|
||||
"list.activeSelectionForeground": "#424242",
|
||||
"list.activeSelectionBackground": "#DAE3E3",
|
||||
"list.inactiveSelectionForeground": "#424242",
|
||||
"list.inactiveSelectionBackground": "#DAE3E3",
|
||||
"list.hoverBackground": "#ECF1F1",
|
||||
"progressBar.background": "#005c5f",
|
||||
"editor.background": "#ffffff",
|
||||
"editorCursor.foreground": "#434f54",
|
||||
"editor.foreground": "#434f54",
|
||||
"editorWhitespace.foreground": "#bfbfbf",
|
||||
"editor.lineHighlightBackground": "#434f5410",
|
||||
"editor.selectionBackground": "#ffcb00",
|
||||
"editorWidget.background": "#F7F9F9",
|
||||
"focusBorder": "#7fcbcd99",
|
||||
"menubar.selectionBackground": "#ffffff",
|
||||
"menubar.selectionForeground": "#212121",
|
||||
"menu.selectionBackground": "#dae3e3",
|
||||
"menu.selectionForeground": "#212121",
|
||||
"editorGroupHeader.tabsBackground": "#f7f9f9",
|
||||
"button.background": "#7fcbcd",
|
||||
"titleBar.activeBackground": "#005c5f",
|
||||
"titleBar.activeForeground": "#ffffff",
|
||||
"terminal.background": "#000000",
|
||||
"terminal.foreground": "#e0e0e0",
|
||||
"dropdown.border": "#ececec",
|
||||
"dropdown.background": "#ececec",
|
||||
"activityBar.background": "#ececec",
|
||||
"activityBar.foreground": "#616161",
|
||||
"statusBar.background": "#005c5f",
|
||||
"secondaryButton.background": "#b5c8c9",
|
||||
"secondaryButton.foreground": "#ececec",
|
||||
"secondaryButton.hoverBackground": "#dae3e3",
|
||||
"arduino.branding.primary": "#00979d",
|
||||
"arduino.branding.secondary": "#b5c8c9",
|
||||
"arduino.foreground": "#edf1f1",
|
||||
"arduino.output.foreground": "#FFFFFF",
|
||||
"arduino.output.background": "#000000"
|
||||
},
|
||||
"type": "light",
|
||||
"name": "Arduino"
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
"colors": {
|
||||
"list.highlightForeground": "#0ca1a6",
|
||||
"list.activeSelectionForeground": "#dae3e3",
|
||||
"list.activeSelectionBackground": "#434f54",
|
||||
"list.activeSelectionBackground": "#0ca1a64d",
|
||||
"list.inactiveSelectionForeground": "#dae3e3",
|
||||
"list.inactiveSelectionBackground": "#434f54",
|
||||
"list.hoverBackground": "#1f272a",
|
||||
@ -45,7 +45,8 @@
|
||||
"arduino.foreground": "#edf1f1",
|
||||
"arduino.output.foreground": "#ffffff",
|
||||
"arduino.output.background": "#000000",
|
||||
"arduino.toolbar.hoverBackground": "#dae3e3",
|
||||
"arduino.toolbar.button.hoverBackground": "#dae3e3",
|
||||
"arduino.toolbar.button.background": "#0ca1a6",
|
||||
"sideBar.background": "#101618",
|
||||
"sideBar.foreground": "#dae3e3",
|
||||
"input.background": "#000000",
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"colors": {
|
||||
"list.highlightForeground": "#008184",
|
||||
"list.activeSelectionForeground": "#4e5b61",
|
||||
"list.activeSelectionBackground": "#dae3e3",
|
||||
"list.activeSelectionBackground": "#00818433",
|
||||
"list.inactiveSelectionForeground": "#4e5b61",
|
||||
"list.inactiveSelectionBackground": "#dae3e3",
|
||||
"list.hoverBackground": "#ecf1f1",
|
||||
@ -22,7 +22,7 @@
|
||||
"menu.selectionBackground": "#dae3e3",
|
||||
"menu.selectionForeground": "#212121",
|
||||
"editorGroupHeader.tabsBackground": "#ecf1f1",
|
||||
"button.background": "#7fcbcd",
|
||||
"button.background": "#008184",
|
||||
"button.foreground": "#f7f9f9",
|
||||
"button.hoverBackground": "#005C5F",
|
||||
"titleBar.activeBackground": "#006d70",
|
||||
@ -45,7 +45,8 @@
|
||||
"arduino.foreground": "#edf1f1",
|
||||
"arduino.output.foreground": "#ffffff",
|
||||
"arduino.output.background": "#000000",
|
||||
"arduino.toolbar.hoverBackground": "#f7f9f9",
|
||||
"arduino.toolbar.button.hoverBackground": "#f7f9f9",
|
||||
"arduino.toolbar.button.background": "#7fcbcd",
|
||||
"sideBar.background": "#f7f9f9",
|
||||
"sideBar.foreground": "#4e5b61",
|
||||
"input.background": "#ffffff",
|
||||
|
||||
@ -94,7 +94,7 @@ export const CertificateUploaderComponent = ({
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="theia-button primary add-cert-btn"
|
||||
className="theia-button secondary add-cert-btn"
|
||||
onClick={() => {
|
||||
showAdd ? setShowAdd(false) : setShowAdd(true);
|
||||
}}
|
||||
|
||||
@ -55,7 +55,8 @@
|
||||
}
|
||||
|
||||
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
|
||||
margin-top: 0px;
|
||||
margin-top: 0px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.fl1{
|
||||
@ -69,4 +70,4 @@
|
||||
|
||||
.fa.disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src:
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -60,25 +60,51 @@
|
||||
/* Overrule the default Theia CSS button styles. */
|
||||
button.theia-button,
|
||||
.theia-button {
|
||||
border: 1px solid var(--theia-dropdown-border);
|
||||
}
|
||||
|
||||
button.theia-button:hover,
|
||||
.theia-button:hover {
|
||||
border: 1px solid var(--theia-focusBorder);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
letter-spacing: .01em;
|
||||
line-height: 24px;
|
||||
outline: none;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-width: 2px;
|
||||
border-radius: 32px;
|
||||
text-transform: uppercase;
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.theia-button {
|
||||
height: 31px;
|
||||
height: 28px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.theia-button:active,
|
||||
.theia-button:focus {
|
||||
box-shadow: 0 0 0 2px var(--theia-focusBorder);
|
||||
}
|
||||
|
||||
button.theia-button.secondary {
|
||||
background-color: var(--theia-secondaryButton-background);
|
||||
color: var(--theia-secondaryButton-foreground);
|
||||
border: 2px solid var(--theia-secondaryButton-foreground);
|
||||
}
|
||||
|
||||
button.theia-button.main {
|
||||
button.theia-button[disabled], .theia-button[disabled] {
|
||||
opacity: 0.5;
|
||||
color: var(--theia-button-foreground);
|
||||
background-color: var(--theia-button-background);
|
||||
}
|
||||
|
||||
button.secondary[disabled], .theia-button.secondary[disabled] {
|
||||
color: var(--theia-secondaryButton-foreground);
|
||||
background-color: var(--theia-secondaryButton-background);
|
||||
}
|
||||
|
||||
/* To make the progress-bar slightly thicker, and use the color from the status bar */
|
||||
|
||||
@ -127,12 +127,12 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
|
||||
}
|
||||
|
||||
.component-list-item:hover .footer > * {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin: 5px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.component-list-item:hover .footer > label {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
margin: 5px 0px 0px 10px;
|
||||
}
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--theia-arduino-toolbar-background);
|
||||
background: var(--theia-arduino-toolbar-button-background);
|
||||
}
|
||||
|
||||
.p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
|
||||
background: var(--theia-arduino-toolbar-hoverBackground);
|
||||
background: var(--theia-arduino-toolbar-button-hoverBackground);
|
||||
}
|
||||
|
||||
.arduino-verify-sketch--toolbar,
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
|
||||
#arduino-open-sketch-control--toolbar--container {
|
||||
background-color: var(--theia-arduino-toolbar-background);
|
||||
background-color: var(--theia-arduino-toolbar-button-background);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
.active-sketch {
|
||||
font-weight: 500;
|
||||
background-color: var(--theia-button-disabledBackground) !important;
|
||||
background-color: var(--theia-list-activeSelectionBackground) !important;
|
||||
color: var(--theia-list-inactiveSelectionForeground) !important;
|
||||
|
||||
}
|
||||
|
||||
@ -61,7 +61,9 @@ export class NotificationComponent extends TheiaNotificationComponent {
|
||||
actions.map((action, index) => (
|
||||
<button
|
||||
key={messageId + `-action-${index}`}
|
||||
className="theia-button"
|
||||
className={`theia-button ${
|
||||
index !== actions.length - 1 ? 'secondary' : ''
|
||||
}`}
|
||||
data-message-id={messageId}
|
||||
data-action={action}
|
||||
onClick={this.onAction}
|
||||
|
||||
@ -72,7 +72,10 @@ export class ListItemRenderer<T extends ArduinoComponent> {
|
||||
);
|
||||
const onClickInstall = () => install(item);
|
||||
const installButton = item.installable && (
|
||||
<button className="theia-button install" onClick={onClickInstall}>
|
||||
<button
|
||||
className="theia-button secondary install"
|
||||
onClick={onClickInstall}
|
||||
>
|
||||
{nls.localize('arduino/component/install', 'INSTALL')}
|
||||
</button>
|
||||
);
|
||||
@ -121,8 +124,8 @@ export class ListItemRenderer<T extends ArduinoComponent> {
|
||||
</div>
|
||||
<div className="info">{moreInfo}</div>
|
||||
<div className="footer">
|
||||
{installButton}
|
||||
{versions}
|
||||
{installButton}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user