Fixing async tree styling (#22458)

This commit is contained in:
Aasim Khan
2023-03-27 13:16:23 -07:00
committed by GitHub
parent 115062c0fc
commit e80c6f2dcb
2 changed files with 95 additions and 13 deletions

View File

@@ -137,15 +137,31 @@
.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
background: url('default_server.svg') center center no-repeat;
.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
background-image: url('default_server.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
.monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page,
.hc-light .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page {
background-image: url('default_server_inverse.svg');
}
.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
background: url('default_server_inverse.svg') center center no-repeat;
.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
background-image: url('default_server_inverse.svg');
}
/* loading for OE node */
@@ -170,13 +186,15 @@
}
/* Connected badge */
.monaco-list .connection-tile .connection-status-badge.connected {
.monaco-list .connection-tile .connection-status-badge.connected,
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.connected {
border: 2.4px solid rgba(59, 180, 74, 100%);
background: rgba(59, 180, 74, 100%);
}
/* Disconnected badge */
.monaco-list .connection-tile .connection-status-badge.disconnected {
.monaco-list .connection-tile .connection-status-badge.disconnected,
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.disconnected {
border: 2.4px solid rgba(208, 46, 0, 100%);
background: rgba(255, 255, 255, 80%);
}
@@ -185,3 +203,67 @@
.server-explorer-viewlet .button-section {
padding: 20px;
}
/*async tree styles */
.monaco-list-row .async-server-group .async-server-group {
display: flex;
align-items: center;
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container {
flex: 1;
margin-right: 5px;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container .name {
padding-left: 10px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
height: 25px;
line-height: 25px;
}
.monaco-list-row .object-element-container {
display: flex;
}
.monaco-list-row .object-element-container .label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.monaco-list-row .object-element-container .icon {
flex: 0 30px;
}
.monaco-list-row .connection-profile .connection-profile-container {
display: flex;
}
.monaco-list-row .connection-profile .connection-profile-container .label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.monaco-list-row .connection-profile .connection-profile-container .icon {
flex: 0 30px;
position: relative;
}
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge {
position: absolute;
bottom: 0;
right: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
}