View source for Template:Browser heading

{{#css:
.browser-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
background-color: {{{header-color|#888}}};
padding: 4px;
} .browser-header .header-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
} .browser-header .header-group .button {
width: 32px;
height: 32px;
background-color: rgba(255,255,255,0);
color: white;
border-radius: 6px;
padding: 0;
} .browser-header .header-group .button:hover {
background-color: rgba(255,255,255,0.2);
} .browser-header .search-bar {
width: 100%;
background-color: rgba(0,0,0,0.2);
padding: 4px;
color: white;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
overflow: auto;
} .browser-header .search-bar .header-group .button {
width: 24px;
height: 24px;
}
.browser-header .button {
image-rendering:-moz-crisp-edges;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;
}
}}<!--
--><div class=browser-header>
<div class=header-group>
<div class=button title="Back">[[File:BrowserBack.png|32px]]</div>
<div class=button title="Forward">[[File:BrowserForward.png|32px]]</div>
<div class=button title="Refresh">[[File:BrowserRefresh.png|32px]]</div>
</div>
<div class=search-bar>
<div class=header-group style=overflow:auto;>
<div class="button" title="{{#ifeq:{{{verified-by|Lorem Ipsum LLC.}}}|nobody|Not secure.|Verified by: {{{verified-by|Lorem Ipsum LLC.}}}}}">{{#ifeq:{{{verified-by|Lorem Ipsum LLC.}}}|nobody|[[File:BrowserUnsecured.png|24px|link=Hacker|Not secure.]]|[[File:BrowserSecured.png|24px|link={{{verified-by|Lorem Ipsum LLC.}}}|Verified by: {{{verified-by|Lorem Ipsum LLC.}}}]]}}</div>
<div>{{{search-text|{{{1|Lorem ipsum}}}}}}</div>
</div>
<div class=header-group>
<div class="button" title="Favorite">[[File:BrowserFavoriteSmall.png|24px]]</div>
</div>
</div>
<div class=header-group>
<div class=button title="Menu">[[File:BrowserMenu.png|32px]]</div>
</div>
</div><!--
--><noinclude>
[[Category:User interface elements]]
</noinclude>