Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add link and button focus/active states.

Browse source
This commit is contained in:
Ben Sturmfels 2021-10-13 23:49:41 +11:00 committed by Bradley M. Kuhn
parent 0ac747949a
commit 5672713148
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
www/conservancy/static/css/conservancy.css
View file

@ -54,6 +54,13 @@ a {
} }
a:hover { text-decoration: underline; } 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 { a.read-more {
cursor: pointer; cursor: pointer;
font-style: italic; font-style: italic;
@ -64,21 +71,26 @@ a.read-more {
background: var(--orange); background: var(--orange);
border: 1px solid var(--orange-dim); border: 1px solid var(--orange-dim);
} }
.btn-orange:hover { .btn-orange:hover, .btn-orange:active {
background: var(--orange-dim); background: var(--orange-dim);
text-decoration: none; text-decoration: none;
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); 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 { .btn-white {
color: var(--orange); color: var(--orange);
background: white; background: white;
} }
.btn-white:hover { .btn-white:hover .btn-white:active {
background: #eee; background: #eee;
text-decoration: none; text-decoration: none;
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
} }
.btn-white:focus {
box-shadow: 0 0 0 .25rem #ddd;
}
a svg { a svg {
transition: all .2s ease; transition: all .2s ease;
@ -160,7 +172,7 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
text-decoration: none; text-decoration: none;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
} }
#navbar li:hover a { #navbar li:hover a, #navbar li a:focus {
border-bottom: 4px solid var(--light-green); border-bottom: 4px solid var(--light-green);
} }
#navbar li { float: left; display: inline; margin-bottom: 3px; } #navbar li { float: left; display: inline; margin-bottom: 3px; }