development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 21:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update opacity to meet color conrast ratio

Browse source
This commit is contained in:
Miguel Solorio 2018-07-26 11:12:12 -07:00
parent e32ea43fcb
commit 41df9793e0
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
View file

@ -62,7 +62,7 @@
}
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label {
opacity: 0.7;
opacity: 0.9;
}
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label:hover {
@ -198,11 +198,11 @@
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
opacity: 0.7;
opacity: 0.9;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children > .content:before {
opacity: 0.7;
opacity: 0.9;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children.selected > .content:before {
@ -269,7 +269,6 @@
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
opacity: 0.9;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;

2
src/vs/workbench/parts/preferences/browser/settingsTree.ts
View file

@ -1338,7 +1338,7 @@ export class SettingsTree extends NonExpandableTree {
if (foregroundColor) {
// Links appear inside other elements in markdown. CSS opacity acts like a mask. So we have to dynamically compute the description color to avoid
// applying an opacity to the link color.
const fgWithOpacity = new Color(new RGBA(foregroundColor.rgba.r, foregroundColor.rgba.g, foregroundColor.rgba.b, .7));
const fgWithOpacity = new Color(new RGBA(foregroundColor.rgba.r, foregroundColor.rgba.g, foregroundColor.rgba.b, .9));
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { color: ${fgWithOpacity}; }`);
}