diff options
author | tttapa <pieter.pas@outlook.com> | 2020-07-04 14:27:59 (GMT) |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-04 14:27:59 (GMT) |
commit | 8c12604a84faabf6beeef7f159692ccddcb94dc6 (patch) | |
tree | 877a0a215f3623dfc59b22fd673308093e01303a /templates/html/search.css | |
parent | cfda7da009ca4ca094946ac090bc493f8ac43351 (diff) | |
download | Doxygen-8c12604a84faabf6beeef7f159692ccddcb94dc6.zip Doxygen-8c12604a84faabf6beeef7f159692ccddcb94dc6.tar.gz Doxygen-8c12604a84faabf6beeef7f159692ccddcb94dc6.tar.bz2 |
Scalable search bar for high resolution displays (#7888)
* Use SVG images for search bar icons
* Update search bar CSS for high resolution displays
Uses CSS shadows instead of PNG images of shadows
* Limit the main-menu CSS rule to first level list
#main-menu li:last-child applies to last childs of sub-lists as well
#main-menu > li:last-child only applies to the top-level list
Diffstat (limited to 'templates/html/search.css')
-rw-r--r-- | templates/html/search.css | 100 |
1 files changed, 42 insertions, 58 deletions
diff --git a/templates/html/search.css b/templates/html/search.css index 859cf6a..8af75a7 100644 --- a/templates/html/search.css +++ b/templates/html/search.css @@ -1,98 +1,82 @@ /*---------------- Search Box */ -#FSearchBox { - float: left; -} - #MSearchBox { white-space : nowrap; - float: none; - margin-top: 8px; - right: 0px; - width: 170px; - height: 24px; + background: white; + border-radius: 0.65em; + box-shadow: inset 0.5px 0.5px 3px 0px #555; z-index: 102; } -#MSearchBox .left -{ - display:block; - position:absolute; - left:10px; - width:20px; - height:19px; - background:url('search_l.png') no-repeat; - background-position:right; +#MSearchBox .left { + display: inline-block; + vertical-align: middle; + height: 1.4em; } #MSearchSelect { - display:block; - position:absolute; - width:20px; - height:19px; -} - -.left #MSearchSelect { - left:4px; -} - -.right #MSearchSelect { - right:5px; + display: inline-block; + vertical-align: middle; + height: 1.4em; + padding: 0 0 0 0.3em; + margin: 0; } #MSearchField { - display:block; - position:absolute; - height:19px; - background:url('search_m.png') repeat-x; + display: inline-block; + vertical-align: middle; + width: 7.5em; + height: 1.1em; + margin: 0 0.15em; + padding: 0; + line-height: 1em; border:none; - width:115px; - margin-left:20px; - padding-left:4px; color: #909090; outline: none; - font: 9pt Arial, Verdana, sans-serif; + font-family: Arial, Verdana, sans-serif; -webkit-border-radius: 0px; + border-radius: 0px; + background: none; } -#FSearchBox #MSearchField { - margin-left:15px; -} #MSearchBox .right { - display:block; - position:absolute; - right:10px; - top:8px; - width:20px; - height:19px; - background:url('search_r.png') no-repeat; - background-position:left; + display: inline-block; + vertical-align: middle; + width: 1.4em; + height: 1.4em; } #MSearchClose { display: none; - position: absolute; - top: 4px; + font-size: inherit; background : none; border: none; - margin: 0px 4px 0px 0px; - padding: 0px 0px; + margin: 0; + padding: 0; outline: none; -} -.left #MSearchClose { - left: 6px; } -.right #MSearchClose { - right: 2px; +#MSearchCloseImg { + height: 1.4em; + padding: 0.3em; + margin: 0; } .MSearchBoxActive #MSearchField { color: #000000; } +#main-menu > li:last-child { + /* This <li> object is the parent of the search bar */ + display: flex; + justify-content: center; + align-items: center; + height: 36px; + margin-right: 1em; +} + /*---------------- Search filter selection */ #MSearchSelectWindow { |