diff --git a/TimelessTemplate.php b/TimelessTemplate.php index cabe983..5ecae6c 100644 --- a/TimelessTemplate.php +++ b/TimelessTemplate.php @@ -197,26 +197,33 @@ class TimelessTemplate extends BaseTemplate { } /** - * Outputs the logo and site title + * Outputs the search */ private function outputSearch() { ?> - +
+
+
+ makeSearchInput( array( 'id' => 'searchInput' ) ); ?> +
+ get( 'searchtitle' ) ); + echo $this->makeSearchButton( + 'fulltext', + array( 'id' => 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' ) + ); + echo $this->makeSearchButton( + 'go', + array( 'id' => 'searchButton', 'class' => 'searchButton' ) + ); + ?> +
+
+ + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 9dc2492..7e64b0c 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -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; }