🎨 Improve visibility of unchecked checkboxes (#851)

no issue * Checkboxes now have greater contrast when unchecked to make them more visible * Checkbox colour tweaks for nightshift
TryGhost · Sep 10, 2017 · 051ae12 · 051ae12
1 parent 87449eb
commit 051ae12
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/app/styles/app-dark.css b/app/styles/app-dark.css
@@ -315,3 +315,8 @@ input,
 .gh-contributors a:before {
     color: var(--lightgrey);
 }
+
+.settings-menu-content .for-radio .input-toggle-component,
+.settings-menu-content .for-checkbox .input-toggle-component {
+    background: var(--lightgrey);
+}
diff --git a/app/styles/components/settings-menu.css b/app/styles/components/settings-menu.css
@@ -213,6 +213,12 @@
     margin-right: 0;
 }
 
+.settings-menu-content .for-radio .input-toggle-component,
+.settings-menu-content .for-checkbox .input-toggle-component {
+    background: #fff;
+}
+
+
 /* Background
 /* ---------------------------------------------------------- */
 

diff --git a/app/styles/patterns/forms.css b/app/styles/patterns/forms.css
@@ -209,7 +209,7 @@ textarea {
     height: 18px;
     margin-right: 7px;
     border: 1px solid color(var(--lightgrey) l(-5%) s(-10%));
-    background: #fff;
+    background: color(var(--lightgrey) l(+4%));
 }
 
 .for-checkbox label:hover input:not(:checked) + .input-toggle-component,