Style search some more, add an icon

Change-Id: Id2ce1f3761f3948b647e638b5f130d5b5f9cc60a
isekai
Isarra 9 years ago
parent a950d154b7
commit a8c2913c26

@ -197,26 +197,33 @@ class TimelessTemplate extends BaseTemplate {
}
/**
* Outputs the logo and site title
* Outputs the search
*/
private function outputSearch() {
?>
<form
action="<?php $this->text( 'wgScript' ) ?>"
role="search"
class="mw-portlet"
id="p-search"
>
<input type="hidden" name="title" value="<?php $this->text( 'searchtitle' ) ?>" />
<h3>
<label for="searchInput"><?php echo $this->getMsg( 'search' )->escaped() ?></label>
<div class="mw-portlet" id="p-search">
<h3<?php $this->html( 'userlangattributes' ) ?>>
<label for="searchInput"><?php $this->msg( 'search' ) ?></label>
</h3>
<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
<div id="searchInput-container">
<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
</div>
<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
</form>
<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
<div id="simpleSearch">
<div id="searchInput-container">
<?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
</div>
<?php
echo Html::hidden( 'title', $this->get( 'searchtitle' ) );
echo $this->makeSearchButton(
'fulltext',
array( 'id' => 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' )
);
echo $this->makeSearchButton(
'go',
array( 'id' => 'searchButton', 'class' => 'searchButton' )
);
?>
</div>
</form>
</div>
<?php
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 647 B

@ -0,0 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="5.6444445mm"
height="5.6444445mm"
viewBox="0 0 20 20"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="search-ltr.svg"
inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/search-ltr.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="31.678384"
inkscape:cx="2.1751537"
inkscape:cy="17.916436"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:snap-midpoints="true"
inkscape:snap-smooth-nodes="true"
inkscape:object-nodes="true"
inkscape:snap-intersection-paths="true"
inkscape:object-paths="true"
inkscape:snap-object-midpoints="true"
inkscape:snap-center="true"
inkscape:snap-bbox="true"
inkscape:window-width="3840"
inkscape:window-height="2124"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
showguides="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0">
<inkscape:grid
type="xygrid"
id="grid4136"
originx="-240"
originy="-2025" />
</sodipodi:namedview>
<metadata
id="metadata7">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-121,-16.362221)">
<path
style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 129.49943,17.362699 c -1.91942,0 -3.83826,0.730845 -5.30273,2.195312 -2.92893,2.928936 -2.92893,7.678491 0,10.607422 2.92893,2.928931 7.67653,2.928934 10.60547,0 2.92894,-2.928936 2.92893,-7.67849 0,-10.607422 -1.46447,-1.464465 -3.38332,-2.195312 -5.30274,-2.195312 z m 0.0664,3 a 4.5,4.5 0 0 1 3.11523,1.316406 4.5,4.5 0 0 1 0,6.365234 4.5,4.5 0 0 1 -6.36328,0 4.5,4.5 0 0 1 0,-6.365234 4.5,4.5 0 0 1 3.24805,-1.316406 z"
id="path4140"
inkscape:connector-curvature="0" />
<rect
style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4171"
width="3"
height="9.000001"
x="72.490379"
y="114.15007"
ry="1.5"
transform="matrix(0.70710856,-0.707105,0.707105,0.70710856,0,0)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -1,7 +1,8 @@
@import "variables.less";
.ts-inner {
max-width: 1250px;
max-width: 1300px;
padding: 0 3em;
margin: auto;
}
#p-logo-text,
@ -22,11 +23,12 @@
#mw-header-container {
position: fixed;
top: 0;
width: 100%;
background: @foreground;
color: @text-inverse;
height: 3em;
border-bottom: solid @border @foreground2;
border-bottom: solid 1px @foreground2;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
@ -50,28 +52,35 @@
/* SEARCH */
#p-search {
#simpleSearch {
box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
background: @background;
}
#searchInput-container {
margin: .5em 8em 0 0;
margin: .5em 0 0 0;
position: relative;
border-top: solid 1px @foreground2;
}
#searchInput {
border: none;
margin: 0;
width: 100%;
height: 2.25em;
padding-left: 1em;
height: 2.1em;
padding: .65em 4.5em .45em 2em;
box-shadow: none;
background: transparent;
width: 100%;
}
#searchGoButton {
float: right;
width: 7.5em;
height: 2.25em;
#searchButton,
#mw-searchButton {
position: absolute;
top: 0;
right: 1.5em;
width: 2.5em;
height: 2.5em;
border: none;
background: transparent;
text-indent: -99999px;
.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
background-position: 50% 40%;
background-repeat: no-repeat;
}

Loading…
Cancel
Save