diff --git a/base.css b/base.css index 747b4df..b49b579 100644 --- a/base.css +++ b/base.css @@ -77,7 +77,7 @@ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; } - +/* TODO: These controls should probably have their sizes relative to their parent, so "em" instead of "rem" */ /* Set the size and properties of the box that represents the checkbox */ input[type=checkbox] { appearance: none; /*Hide the defualt OS provided control*/ @@ -118,8 +118,8 @@ input[type=checkbox]::before { input[type=radio] { appearance: none; /* Hide the defualt OS provided control */ margin: 0; /* Not removed by appearance */ - width: 1.75rem; - height: 1.75rem; + width: 1.65rem; + height: 1.65rem; border-radius: 50%; /* Round the edges of the box so they appear as a circle */ border: var(--default-border-style); transition: 0.2s all linear; diff --git a/low-contrast.css b/low-contrast.css index 32fb6e1..4b7c0f3 100644 --- a/low-contrast.css +++ b/low-contrast.css @@ -6,9 +6,12 @@ --alt-bg-color: #e6e6e6; --main-font-color: #134e13; --disabled-bg-color: #666666; - --border-style: var(--default-border-thickness) outset pink; - --border-focus-style: var(--default-border-thickness) solid var(--main-font-color); --control-disabled: #000000; + + /* --border-style: var(--default-border-thickness) outset pink; */ + --border-style: var(--default-border-thickness) solid var(--alt-bg-color); + --border-focus-style: var(--default-border-thickness) solid var(--main-font-color); + --border-disabled-style: var(--default-border-thickness) solid var(--control-disabled); } body { background-color: var(--main-bg-color); @@ -37,10 +40,10 @@ input[type="checkbox"]:focus { } input[type="checkbox"]:disabled { - color: var(--control-disabled); + border: var(--border-disabled-style); } -input[type=radio] { +input[type="radio"] { border: var(--border-style); } @@ -54,6 +57,10 @@ input[type=radio]:checked { border: var(--border-focus-style); } +input[type="radio"]:disabled { + border: var(--border-disabled-style); +} + input[type=button] { border: var(--border-style); }