mirror of
https://github.com/arduino/arduino-ide.git
synced 2025-05-03 19:48:42 +00:00
d0dfc656e6
- Fixed scrollbar does not reach end of list widget. - Estimated row heights to provide better scroll UX. - Last item's `<select>` must be visible. Closes #1380 Closes #1381 Closes #1387 Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
163 lines
3.8 KiB
CSS
163 lines
3.8 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 5px 15px;
|
|
}
|
|
|
|
.arduino-list-widget .search-bar:focus {
|
|
border-color: var(--theia-focusBorder);
|
|
}
|
|
|
|
.arduino-list-widget .filter-bar {
|
|
margin: 0px 10px 5px 15px;
|
|
}
|
|
|
|
.arduino-list-widget .filter-bar > * {
|
|
padding: 5px 5px 0px 0px;
|
|
}
|
|
|
|
.arduino-list-widget .filter-bar .filter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.arduino-list-widget .filter-bar .filter > select {
|
|
width: 120px;
|
|
}
|
|
|
|
.arduino-list-widget .filter-bar .filter-label {
|
|
display: flex;
|
|
width: 50px;
|
|
}
|
|
|
|
.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 > div > div:nth-child(odd) {
|
|
background-color: var(--theia-sideBar-background);
|
|
filter: contrast(105%);
|
|
}
|
|
|
|
.filterable-list-container .items-container > div > div:nth-child(even) {
|
|
background-color: var(--theia-sideBar-background);
|
|
filter: contrast(95%);
|
|
}
|
|
|
|
.filterable-list-container .items-container > div > div:hover {
|
|
background-color: var(--theia-sideBar-background);
|
|
filter: contrast(90%);
|
|
}
|
|
|
|
.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: 35px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.component-list-item .footer {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.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);
|
|
} |