improve the visual effect for selected card (#3509)

* improve the visual effect for selected card

* remove shadow for unselected card as per Smitha's suggestion

* fix the issue of status icon not changing when new theme selected
This commit is contained in:
Alan Ren
2018-12-07 14:13:52 -08:00
committed by GitHub
parent 944a77fe42
commit 77fdf18686
3 changed files with 66 additions and 40 deletions

View File

@@ -1,4 +1,3 @@
.model-card {
position: relative;
display: inline-block;
@@ -7,23 +6,18 @@
margin: 15px;
border-width: 1px;
border-style: solid;
text-align: left;
vertical-align: top;
box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
}
.model-card.selected {
border-color: darkblue
}
.vs-dark .monaco-workbench .model-card.selected,
.hc-black .monaco-workbench .model-card.selected {
border-color: darkblue
border-color: rgb(0, 120, 215);
box-shadow: rgba(0, 120, 215, 0.75) 0px 0px 6px;
}
.model-card.unselected {
border-color: rgb(214, 214, 214);
box-shadow: none;
}
@@ -102,21 +96,43 @@
text-align: center;
}
.model-card .selection-indicator-container {
position: absolute;
top: 5px;
right: 5px;
overflow: hidden;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
border-width: 1px;
border-color: rgb(0, 120, 215);
border-style: solid;
}
.model-card .selection-indicator {
margin: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(0, 120, 215);
}
.model-card .model-table {
border-spacing: 5px;
}
.model-table .table-row {
width: auto;
clear: both;
width: auto;
clear: both;
}
.model-table .table-cell {
vertical-align: top;
padding: 7px;
vertical-align: top;
padding: 7px;
}
.model-table a {
cursor: pointer;
text-decoration: underline
}
}