Files
arduino-ide/arduino-ide-extension/src/browser/style/dialogs.css
Akos Kitta 2aad0e3b16 feat: new UX for the boards/library manager widgets
Closes #19
Closes #781
Closes #1591
Closes #1607
Closes #1697
Closes #1707
Closes #1924
Closes #1941

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
2023-03-15 16:17:05 +01:00

94 lines
2.1 KiB
CSS

.p-Widget.dialogOverlay .dialogBlock {
border-radius: 3px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
margin: 15px 20px;
/*
padding (left + right) = 56px
margin (left + right) = 40px
total = padding + margin = 96px
*/
max-width: calc(100% - 96px) !important;
min-width: 424px;
max-height: 560px;
padding: 0 var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogTitle {
padding: 20px 0;
font-weight: 500;
background-color: transparent;
font-size: var(--theia-ui-font-size2);
color: var(--theia-editorWidget-foreground);
min-height: 0;
}
.p-Widget.dialogOverlay .dialogBlock .dialogControl {
padding: 0 0 36px;
min-height: 0;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent {
padding: 0;
overflow: auto;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
margin-bottom: var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent > div {
padding: 0 0 12px;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection {
margin-top: var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection:first-child {
margin-top: 0;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow {
margin-top: 16px;
display: flex;
align-items: center;
}
.p-Widget.dialogOverlay .dialogControl .spinner,
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow .spinner {
background: var(--theia-icon-loading) center center no-repeat;
animation: theia-spin 1.25s linear infinite;
width: 30px;
height: 30px;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
margin-top: 0px;
height: 32px;
}
.fl1 {
flex: 1;
}
.status-icon {
margin-right: 6px;
font-size: 17px;
}
.fa.disabled {
opacity: .4;
}
@media only screen and (max-height: 560px) {
.p-Widget.dialogOverlay .dialogBlock {
max-height: 400px;
}
}
.p-Widget.dialogOverlay .error.progress {
color: var(--theia-button-background);
align-self: center;
}