source: lliurex-firefox-settings/trunk/fuentes/lliurex-firefox-settings.install/usr/share/lliurex-firefox-settings/www/search/index.html @ 3721

Last change on this file since 3721 was 3721, checked in by Juanma, 4 years ago

WIP on homepage

File size: 7.3 KB
Line 
1<!DOCTYPE html>
2<html lang="ca" dir="ltr">
3<head>
4<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5<meta name="viewport" content="width=device-width">
6<title>Lliurex Start Page</title>
7<style type="text/css">
8html {
9    font: normal 300 16px/25px "Ubuntu", Arial, "libra sans", sans-serif;
10    color: #333;
11}
12body {
13    background: white;
14    margin: 0 auto;
15}
16button::-moz-focus-inner {
17    /* fix buttons in FF */
18    border: 0;
19    padding: 0;
20}
21@media screen and (-webkit-min-device-pixel-ratio:0) {
22    /* Remove button margin in webkit */
23    button{
24        margin: 0;
25    }
26}
27.acchide {
28    text-indent: -999em;
29    display: block;
30}
31/* one-form */
32input[type="search"] {
33  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
34  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
35  border-radius: 2px;
36  width: 100%;
37  padding: 0.5em 0.6em;
38  margin: 0 0 0.5em 0;
39  display: block;
40  border: 1px solid #ccc;
41  font-weight: inherit;
42  -webkit-transition: 0.3s linear border;
43  -moz-transition: 0.3s linear border;
44  -ms-transition: 0.3s linear border;
45  -o-transition: 0.3s linear border;
46  transition: 0.3s linear border;
47}
48input[type="search"]:focus {
49  outline: 0;
50  outline: thin dotted \9;
51  /* IE6-9 */
52  border-color: #129FEA;
53}
54/* end one-form */
55
56/* one-list */
57ul, ol {
58  margin: 0.5em 0;
59  padding: 0;
60}
61ul li {
62  list-style: none;
63}
64.one-list-inline {
65  display: inline;
66  overflow: hidden;
67  margin: 0 0 0 0.3em;
68  padding: 0;
69}
70.one-list-inline li {
71  list-style: none;
72  display: inline-block;
73}
74.one-list-inline li:after {
75  margin: 0 0.15em;
76}
77.one-list-inline li:last-child:after {
78  content: '';
79}
80/* end one-list */
81
82/* one-box */
83.one-box {
84  padding: 20px;
85  margin: 0 0 2em 0;
86  -webkit-border-radius: 5px;
87  border-radius: 5px;
88  padding: 20px;
89}
90.one-box-bordered {
91  border: 1px solid #ccc;
92}
93/* end one-box */
94
95.search-box {
96    margin: 1em;
97    border-color: #eee;
98
99    -webkit-transition: margin 200ms ease, padding 200ms ease;
100    -moz-transition: margin 200ms ease, padding 200ms ease;
101    transition: margin 200ms ease, padding 200ms ease;
102}
103.lliurex-branding {
104    background: url("images/layout_set_logo.png") no-repeat;
105    height: 60px;
106    border-radius: 5px 5px 0 0;
107    margin: -21px;
108    margin-bottom: 20px;
109        background-size:contain;
110        background-position:center;
111}
112.logo {
113    margin: 0 0 15px 0;
114}
115.logo a {
116    font-size: 1px;
117    display: block;
118    text-indent: -9999px;
119    background: url(http://start.ubuntu.com/12.04/sprite.png) no-repeat;
120    background-position: -10px -310px;
121    padding: 0;
122    height: 38px;
123    width: 109px;
124    position: relative;
125    -webkit-transition: margin 200ms ease;
126    -moz-transition: margin 200ms ease;
127    transition: margin 200ms ease;
128}
129.logo,
130.search-form {
131    max-width: 460px;
132    margin-left: auto;
133    margin-right: auto;
134}
135@media screen and (min-width: 665px) {
136    .wrapper {
137        max-width: 665px;
138        margin: 0 auto;
139    }
140    .search-box {
141        padding-bottom: 100px;
142        margin-top: 65px;
143    }
144    .logo a {
145        margin-top: 65px;
146    }
147    .search-form {
148        text-align: center;
149    }
150}
151.search-form {
152    padding-right: 75px;
153    position: relative;
154    -moz-box-sizing: border-box;
155    -webkit-box-sizing: border-box;
156    box-sizing: border-box;
157}
158.search-input {
159    -moz-box-sizing: border-box;
160    -webkit-box-sizing: border-box;
161    box-sizing: border-box;
162    font-size: inherit;
163}
164.search-button {
165    position: absolute;
166    top: 0;
167    right: 0;
168    background: #4d90fe;
169    background: -moz-linear-gradient(top, #4d90fe 0%, #4787ed 100%);
170    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
171    background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
172    background: linear-gradient(to bottom, #4d90fe 0%,#4787ed 100%);
173    border: 1px solid #3079ED;
174    border-radius: 2px;
175    color: #FFFFFF;
176    cursor: default;
177    font-weight: bold;
178    height: 37px;
179    line-height: 37px;
180    width: 70px;
181    margin-left: 0.5em;
182    text-align: center;
183    text-decoration: none;
184    -moz-user-select: none;
185    -webkit-box-sizing: border-box;
186    -moz-box-sizing: border-box;
187    box-sizing: border-box;
188}
189#sspan {
190    background: url(http://start.ubuntu.com/12.04/sprite.png) no-repeat;
191    background-position: -10px -692px;
192    display: block;
193    height: 17px;
194    width: 14px;
195    margin: auto;
196    position: relative;
197    top: 8px;
198}
199.external-links {
200    margin: 1em;
201}
202.external-links li {
203    text-align: left;
204    display: block;
205    margin: 0 1em 1em 1em;
206    padding-bottom: 1em;
207    border-bottom: 1px solid #ccc;
208}
209.external-links li:after {
210    margin: 0;
211}
212.external-links a {
213    display: block;
214    text-decoration: none;
215    color: gray;
216    height: 30px;
217    line-height: 30px;
218    padding-left: 35px;
219}
220.external-links a::after {
221    content: " ›";
222}
223.external-links a:hover {
224    color: #e24912;
225}
226@media screen and (min-width: 665px) {
227    .external-links {
228        width: 595px;
229        margin: auto;
230        display: block;
231        text-align: center;
232    }
233    .external-links li {
234        display: inline-block;
235        margin: 0 1em 0 0;
236        padding: 0;
237        border: none;
238    }
239    .external-links li:last-child {
240        margin-right: 0;
241        margin-bottom: 0;
242    }
243    .external-links li a {
244        display: inline-block;
245    }
246}
247.wiki-link a{
248
249    background: url("images/wikiLliurex.png") no-repeat;
250        background-size:contain;
251}
252.forum-link a{
253    background: url("images/corro_ratones.png") no-repeat;
254        background-size:contain;
255}
256
257.community-link a {
258    background: url("images/mestre_a_casa.png") no-repeat;
259        background-size:contain;
260
261}
262</style>
263</head>
264<body>
265
266    <div class="wrapper">
267
268        <div class="search-box one-box one-box-bordered">
269
270            <div class="lliurex-branding"></div>
271
272            <h1 class="logo"><a href="http://www.google.com">Google</a></h1>
273
274            <form method="get" class="search-form" action="http://www.google.com/search" name="search">
275                <input type="search" class="search-input" name="q" value="" x-webkit-speech id="sbi" /><!-- eliminate whitespace
276                --><button id="sbtn" class="search-button" type="submit"><span id="sspan"></span><span class="acchide">Search</span></button>
277                <input type="hidden" name="ie" value="UTF-8" />
278                <input type="hidden" name="sa" value="Search" />
279                <input type="hidden" name="channel" value="fe">
280                <input type="hidden" name="client" value="browser-lliurex">
281                <input title="search" type="hidden" name="hl" value="ca" />
282            </form>
283
284        </div><!-- close search-box -->
285
286    </div><!-- close wrapper -->
287
288    <ul class="external-links one-list-inline">
289        <li class="wiki-link"><a href="http://wiki.lliurex.net/Inicio">Wiki Lliurex</a></li>
290        <li class="forum-link"><a href="http://mestreacasa.gva.es/web/lliurex/forums">Foro Lliurex</a></li>
291        <li class="community-link"><a href="http://mestreacasa.gva.es/web/guest/inicio">Mestre a casa</a></li>
292    </ul>
293
294<script type="text/javascript">
295//<![CDATA[
296(function focus_search() {
297    function search_select(e) {
298        if(e.value.length > 0) {
299            e.select();
300        }
301        e.select();
302    }
303
304    sbi = document.getElementById('sbi');
305    sbi.focus();
306    search_select(sbi);
307})();
308//]]>
309</script>
310</body>
311</html>
Note: See TracBrowser for help on using the repository browser.