mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-05-06 13:08:42 +00:00
159 lines
4.1 KiB
CSS
159 lines
4.1 KiB
CSS
.library-tab-icon {
|
|
-webkit-mask: url('../icons/library-tab-icon.svg');
|
|
mask: url('../icons/library-tab-icon.svg');
|
|
}
|
|
|
|
.arduino-list-widget {
|
|
color: var(--theia-foreground);
|
|
}
|
|
|
|
.arduino-list-widget .search-bar {
|
|
margin: 0px 10px 10px 15px;
|
|
}
|
|
|
|
.arduino-list-widget .search-bar:focus {
|
|
border-color: var(--theia-focusBorder);
|
|
}
|
|
|
|
.filterable-list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
height: 100%; /* This has top be 100% down to the `scrollContainer`. */
|
|
}
|
|
|
|
.filterable-list-container .items-container {
|
|
height: 100%; /* This has to be propagated down from the widget. */
|
|
position: relative; /* To fix the `top` of the vertical toolbar. */
|
|
}
|
|
|
|
.filterable-list-container .items-container > div:nth-child(odd) {
|
|
background-color: var(--theia-sideBar-background);
|
|
filter: contrast(105%);
|
|
}
|
|
|
|
.filterable-list-container .items-container > div:nth-child(even) {
|
|
background-color: var(--theia-sideBar-background);
|
|
filter: contrast(95%);
|
|
}
|
|
|
|
.filterable-list-container .items-container > div:hover {
|
|
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.
|
|
See above: `.filterable-list-container .items-container > div:nth-child(odd|event)`.
|
|
We have to increase `z-index` of the scroll-bar thumb. Otherwise, the thumb is not visible.
|
|
https://github.com/arduino/arduino-pro-ide/issues/82 */
|
|
.arduino-list-widget .filterable-list-container .items-container .ps__rail-y {
|
|
z-index: 1;
|
|
}
|
|
|
|
.component-list-item {
|
|
padding: 10px 10px 10px 15px;
|
|
font-size: var(--theia-ui-font-size1);
|
|
}
|
|
|
|
.component-list-item:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.component-list-item .header {
|
|
padding-bottom: 2px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.component-list-item .header .version-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.component-list-item .header .name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.component-list-item .header .author {
|
|
font-weight: bold;
|
|
color: var(--theia-panelTitle-inactiveForeground);
|
|
}
|
|
|
|
.component-list-item:hover .header .author {
|
|
color: var(--theia-foreground);
|
|
}
|
|
|
|
.component-list-item .header .version {
|
|
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-button-background);
|
|
padding: 2px 4px 2px 4px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
max-height: calc(1em + 4px);
|
|
color: var(--theia-button-foreground);
|
|
content: 'INSTALLED';
|
|
}
|
|
|
|
.component-list-item .header .installed:hover:before {
|
|
background-color: var(--theia-button-foreground);
|
|
color: var(--theia-button-background);
|
|
content: 'UNINSTALL';
|
|
}
|
|
|
|
.component-list-item[min-width~="170px"] .footer {
|
|
padding: 5px 5px 0px 0px;
|
|
min-height: 30px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.component-list-item .footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.component-list-item .footer > * {
|
|
display: none
|
|
}
|
|
|
|
.component-list-item:hover .footer > * {
|
|
display: inline-block;
|
|
margin: 5px 0px 0px 10px;
|
|
}
|
|
|
|
.component-list-item:hover .footer > label {
|
|
display: inline-block;
|
|
align-self: center;
|
|
margin: 5px 0px 0px 10px;
|
|
}
|
|
|
|
.component-list-item .info a {
|
|
color: var(--theia-button-background);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.component-list-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* High Contrast Theme rules */
|
|
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
|
|
.hc-black.hc-theia.theia-hc .component-list-item .header .installed:hover:before {
|
|
background-color: transparent;
|
|
outline: 1px dashed var(--theia-focusBorder);
|
|
}
|
|
|
|
.hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
|
|
border: 1px solid var(--theia-button-border);
|
|
}
|