Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>tags/v12.0.0beta1
background-image: url('../img/actions/close.svg?v=1'); | background-image: url('../img/actions/close.svg?v=1'); | ||||
} | } | ||||
.icon-close-white { | |||||
background-image: url('../img/actions/close-white.svg?v=1'); | |||||
} | |||||
.icon-comment { | .icon-comment { | ||||
background-image: url('../img/actions/comment.svg?v=1'); | background-image: url('../img/actions/comment.svg?v=1'); | ||||
} | } |
/* Searchbox */ | /* Searchbox */ | ||||
.searchbox input[type='search'] { | |||||
.searchbox { | |||||
position: relative; | position: relative; | ||||
font-size: 1.2em; | |||||
padding: 3px; | |||||
padding-left: 25px; | |||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center; | |||||
color: #fff; | |||||
border: 0; | |||||
border-radius: 3px; | |||||
margin-top: 3px; | |||||
width: 0; | |||||
cursor: pointer; | |||||
-webkit-transition: all 100ms; | |||||
transition: all 100ms; | |||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; | |||||
opacity: .7; | |||||
&:focus, &:active, &:valid { | |||||
input[type='search'] { | |||||
position: relative; | |||||
font-size: 1.2em; | |||||
padding: 3px; | |||||
padding-left: 25px; | |||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center; | |||||
color: #fff; | color: #fff; | ||||
width: 155px; | |||||
cursor: text; | |||||
background-color: #0082c9 !important; | |||||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||||
border: 0; | |||||
border-radius: 3px; | |||||
margin-top: 3px; | |||||
width: 0; | |||||
cursor: pointer; | |||||
-webkit-transition: all 100ms; | |||||
transition: all 100ms; | |||||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; | |||||
opacity: .7; | |||||
&:focus, &:active, &:valid { | |||||
color: #fff; | |||||
width: 155px; | |||||
cursor: text; | |||||
background-color: #0082c9 !important; | |||||
border: 1px solid rgba(255, 255, 255, 0.5) !important; | |||||
} | |||||
& ~ .icon-close-white { | |||||
display: inline; | |||||
position: absolute; | |||||
width: 15px; | |||||
height: 32px; | |||||
right: 3px; | |||||
top: 0; | |||||
&, &:focus, &:active, &:hover { | |||||
border: none; | |||||
background-color: transparent; | |||||
} | |||||
} | |||||
&:not(:valid) ~ .icon-close-white { | |||||
display: none; | |||||
} | |||||
&::-webkit-search-cancel-button { | |||||
-webkit-appearance: none; | |||||
} | |||||
} | } | ||||
} | } | ||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||||
<svg | |||||
xmlns:dc="http://purl.org/dc/elements/1.1/" | |||||
xmlns:cc="http://creativecommons.org/ns#" | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |||||
xmlns:svg="http://www.w3.org/2000/svg" | |||||
xmlns="http://www.w3.org/2000/svg" | |||||
id="svg11" | |||||
version="1.1" | |||||
width="16" | |||||
height="16"> | |||||
<metadata | |||||
id="metadata15"> | |||||
<rdf:RDF> | |||||
<cc:Work | |||||
rdf:about=""> | |||||
<dc:format>image/svg+xml</dc:format> | |||||
<dc:type | |||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |||||
<dc:title></dc:title> | |||||
</cc:Work> | |||||
</rdf:RDF> | |||||
</metadata> | |||||
<defs | |||||
id="defs5"> | |||||
<filter | |||||
color-interpolation-filters="sRGB" | |||||
x="-.3" | |||||
y="-.3" | |||||
width="1.601" | |||||
height="1.599" | |||||
id="a"> | |||||
<feGaussianBlur | |||||
id="feGaussianBlur2" | |||||
stdDeviation="1.239" /> | |||||
</filter> | |||||
</defs> | |||||
<path | |||||
style="fill:#ffffff" | |||||
id="path9" | |||||
d="M12.95 11.536l-1.414 1.414L8 9.414 4.465 12.95 3.05 11.536 6.586 8 3.05 4.464 4.465 3.05 8 6.586l3.516-3.555 1.434 1.434L9.414 8z" /> | |||||
</svg> |
<input id="searchbox" type="search" name="query" | <input id="searchbox" type="search" name="query" | ||||
value="" required | value="" required | ||||
autocomplete="off" tabindex="5"> | autocomplete="off" tabindex="5"> | ||||
<button class="icon-close-white" type="reset"></button> | |||||
</form> | </form> | ||||
<div id="settings"> | <div id="settings"> | ||||
<div id="expand" tabindex="6" role="link" class="menutoggle"> | <div id="expand" tabindex="6" role="link" class="menutoggle"> |