From 56727131486612f69cd776d062477a60faa5f1c7 Mon Sep 17 00:00:00 2001 From: Ben Sturmfels Date: Wed, 13 Oct 2021 23:49:41 +1100 Subject: [PATCH] Add link and button focus/active states. --- www/conservancy/static/css/conservancy.css | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css index 236cd03d..400bc532 100644 --- a/www/conservancy/static/css/conservancy.css +++ b/www/conservancy/static/css/conservancy.css @@ -54,6 +54,13 @@ a { } a:hover { text-decoration: underline; } +input:focus { + z-index: 3; + border-color: #86b7fe; + box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); +}; + + a.read-more { cursor: pointer; font-style: italic; @@ -64,21 +71,26 @@ a.read-more { background: var(--orange); border: 1px solid var(--orange-dim); } -.btn-orange:hover { +.btn-orange:hover, .btn-orange:active { background: var(--orange-dim); text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); } +.btn-orange:focus { + box-shadow: 0 0 0 .25rem var(--orange-dim); +} .btn-white { color: var(--orange); background: white; } -.btn-white:hover { +.btn-white:hover .btn-white:active { background: #eee; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); } - +.btn-white:focus { + box-shadow: 0 0 0 .25rem #ddd; +} a svg { transition: all .2s ease; @@ -160,7 +172,7 @@ h3 { margin-top: .6em; margin-bottom: .4em; } text-decoration: none; border-bottom: 4px solid transparent; } -#navbar li:hover a { +#navbar li:hover a, #navbar li a:focus { border-bottom: 4px solid var(--light-green); } #navbar li { float: left; display: inline; margin-bottom: 3px; }