From 8a777b5d230b22dc991603b90a4b2bb6a8d86414 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 8 Dec 2017 22:26:53 +0300 Subject: [PATCH] restore disabled state dimming on buttons and selects --- global.css | 16 ++++++++++++---- manage/config-dialog.js | 1 + 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/global.css b/global.css index 18e0c00c..f2887c7b 100644 --- a/global.css +++ b/global.css @@ -12,13 +12,13 @@ button { transition: background-color .25s, border-color .25s; } -button:hover { +button:not(:disabled):hover { background-color: hsl(0, 0%, 95%); border-color: hsl(0, 0%, 52%); } /* For some odd reason these hovers appear lighter than all other button hovers in every browser */ -#message-box-buttons button:hover { +#message-box-buttons button:not(:disabled):hover { background-color: hsl(0, 0%, 90%); border-color: hsl(0, 0%, 50%); } @@ -65,7 +65,7 @@ input[type="checkbox"]:not(.slider) { transition: background-color .1s, border-color .1s; } -input[type="checkbox"]:not(.slider):hover { +input[type="checkbox"]:not(.slider):not(:disabled):hover { border-color: hsl(0, 0%, 32%); background-color: hsl(0, 0%, 82%); } @@ -157,6 +157,14 @@ input[type="radio"]:checked:after { transform: scale(1); } +/* restore disabled state dimming */ +button:disabled, +select:disabled, +option:disabled, +select[disabled] > option { + color: graytext; +} + @supports (-moz-appearance: none) { .moz-appearance-bug .svg-icon.checked, .moz-appearance-bug input[type="radio"]:after { @@ -189,7 +197,7 @@ input[type="radio"]:checked:after { border: 1px solid hsl(0, 0%, 66%); } - .firefox.non-windows input[type="number"]:hover, + .firefox.non-windows input[type="number"]:not(:disabled):hover, .firefox.non-windows input[type="number"]:focus { -moz-appearance: number-input; } diff --git a/manage/config-dialog.js b/manage/config-dialog.js index e986e2fa..70cd98c3 100644 --- a/manage/config-dialog.js +++ b/manage/config-dialog.js @@ -16,6 +16,7 @@ function configDialog(style) { buildConfigForm(); renderValues(); + vars.forEach(renderValueState); return messageBox({ title: `${style.name} v${data.version}`,