Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>tags/v12.0.0beta1
@@ -131,6 +131,10 @@ img, object, video, button, textarea, input, select { | |||
background-image: url('../img/actions/close.svg?v=1'); | |||
} | |||
.icon-close-white { | |||
background-image: url('../img/actions/close-white.svg?v=1'); | |||
} | |||
.icon-comment { | |||
background-image: url('../img/actions/comment.svg?v=1'); | |||
} |
@@ -159,28 +159,49 @@ body { | |||
/* Searchbox */ | |||
.searchbox input[type='search'] { | |||
.searchbox { | |||
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; | |||
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; | |||
} | |||
} | |||
} | |||
@@ -0,0 +1,42 @@ | |||
<?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> |
@@ -69,6 +69,7 @@ | |||
<input id="searchbox" type="search" name="query" | |||
value="" required | |||
autocomplete="off" tabindex="5"> | |||
<button class="icon-close-white" type="reset"></button> | |||
</form> | |||
<div id="settings"> | |||
<div id="expand" tabindex="6" role="link" class="menutoggle"> |