From f2bf6829c3e351644c1dffac174516cd110847f4 Mon Sep 17 00:00:00 2001 From: Yorhel Date: Wed, 11 Jul 2012 18:16:36 +0200 Subject: [PATCH] Style: Use images for gradients + image for search button I couldn't get firefox to play nice with the search button styling, so replaced it completely with an image. Its location still off by one pixel in Firefox, though. :-( --- www/images/gradients.png | Bin 0 -> 183 bytes www/images/search.png | Bin 0 -> 1271 bytes www/index.pl | 2 +- www/man.css | 29 +++++++++-------------------- 4 files changed, 10 insertions(+), 21 deletions(-) create mode 100644 www/images/gradients.png create mode 100644 www/images/search.png diff --git a/www/images/gradients.png b/www/images/gradients.png new file mode 100644 index 0000000000000000000000000000000000000000..c6cb96d73bdc5a16dad5a20a1fcd96621ab1286f GIT binary patch literal 183 zcmeAS@N?(olHy`uVBq!ia0vp^j6ghxgAGXTdwWm>NY#0|IEHAPPcGm&{qOvdGiS~? zls2`twl;PG!33c>n|yqHDyA4185tS;{r#PP=8ymX?b*6j^kyCLFurp7ET_~X9UUDW zpEYaNR77y-nHl<(g|W4LkFWceeyjKq7qhT7w=uIYx5~M|$O1iWZm~!is~PX_Ra`sp g<@@`1HZ38Bhl|+#etugM3v>yCr>mdKI;Vst08Z&eV*mgE literal 0 HcmV?d00001 diff --git a/www/images/search.png b/www/images/search.png new file mode 100644 index 0000000000000000000000000000000000000000..c1bd5cf93dcb82ef97854adc7d3cfaf01e09b165 GIT binary patch literal 1271 zcmV(*RHZE$*8bRouU-RyrIdk5b z!+k^E@a`mpK-Pc&0ZJ%koN-|jf(ynuA>`j8xlG0&n?QgNN*SdfYy?cAEJ_F!f-*|r zA@w{F>`O=`iO3gb_H4l6aOxAMy7OlO*CZ++gb)gpKD5bw^$xnE zu9UJYiI^~qNRE5*3k#M2Wzqr*Ei3IhP6Fdfhh}o1K#+a^Y&ctY>>-)AvD^}^c z9#5EtXA6)~TmMwFoIH7W-MWe=dBQe4 z@JA>VD#&w5(~2jJak=jEz1!IMMR#}a({=L6KeD*l+4Ro4=~8^sQL2EVbOQ;jJrIek?8Bdg8>H^74(TVpY}0Yu0${>JFEc zy_2c{K!1O5@7_-lv9xsUz`#&_{jr*wg9QbyRQJY>9-nXLsZ-zhe5E)Jn5LD8hIEJK z)a-(D&e`K#KX>j@S6BD0U0XHHe)jBlixw>`E?!<)=>q`6kcjAZ=X<^DJf8V3SKfm> zy}h?g(*%HJ%NAEu?7nZr$yE3J`O5%s;X?bCE#7g42TiHjg-r;-IcJ=+v8ZPXUm);T zP0eRVj~+a8rVW6Ul)OJW8cu}=5v!}W`Tbo@O)VoM;kLHpX`W;VHD^xY@bCyCc69u-a%C|hIvm=bJ=+m+`t&Is z9e%@*Wo0F4o(Bo9UHf_Y@|RM@va*s#x|v`7z-^YMyMUzs&c-H8rohzJR(m`P0)gOx z1D_*eV`KBSZSNgA^oePj$B&;z#D<3E{rjt>l&!7j+uN_DdD0gR4b2r5n>?QRN`c?s znU?!R(?$rGIcqLjmQsomO3t=-_x1Jl_4fSMd1-Lage->J&9_(Yn>uaEoxsr0NR)HV z8Do@W`DqHe&Za#-r)b{nJHdMrEkemyU`WQm{O_>asr#ASs;Uo0qlrk|Fwvrva!nJu zrsd}7St~s^S4^Dj-m&{5XO4dN?~!;?T8dE0c;S>>6`MrOSm)&|l1>N+!8DEM<=JP< zda-Kfhfb$sFcb+z5=n^)fKp0|i(j??7|AZD9eVD>sWWEJ^DJGuq;STxa4b0-j)x-g zXu^=DrIZ2y^2?ut*_m$zfR-{O#*#7;Ga_*#DW!=jr5gZva5$EYx)ms;&{EPw!$d=( hM6?tcJN5wp;2#qH`atS8pw<8Y002ovPDHLkV1iYqYytoP literal 0 HcmV?d00001 diff --git a/www/index.pl b/www/index.pl index 18af1f8..0dab6ee 100755 --- a/www/index.pl +++ b/www/index.pl @@ -488,7 +488,7 @@ sub htmlHeader { a href => '/', 'manned.org'; form; input type => 'text', name => 'q'; - input type => 'submit', value => 'Search'; + input type => 'submit', value => ' '; end; end; diff --git a/www/man.css b/www/man.css index b71b139..4bca59c 100644 --- a/www/man.css +++ b/www/man.css @@ -20,22 +20,16 @@ table { background: #eee; border: 5px solid #f8f8f8; margin: 10px 0; border-coll thead tr { font-weight: bold; border-bottom: 1px solid #ccc } td { padding: 1px 5px; font-size: 12px; border-left: 1px solid #ccc; } -#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial"; - -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; - background: -webkit-linear-gradient(#40556a, #b0c5da); - background: -moz-linear-gradient(#40556a, #b0c5da); - background: -ms-linear-gradient(#40556a, #b0c5da); - background: -o-linear-gradient(#40556a, #b0c5da); - background: linear-gradient(#40556a, #b0c5da); } +#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial"; background: url('images/gradients.png') repeat-x; + -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } #header a { color: #f8f8f8; text-decoration: none; font-weight: bold; } #header a:hover { background: none; } #header form { float: right; } -#header input { -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; -moz-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; } -#header input[type=text] { width: 260px; padding: 2px; border: 1px solid #444; border-radius: 12px 0 0 12px; - background: -webkit-gradient(linear, left top, left bottom, from(#89a), to(white), color-stop(.9, #cde)); padding-left: 15px; } -#header input[type=text]:hover, #header input[type=text]:focus { background: -webkit-linear-gradient(#abc, #f0f8ff); outline: none; } -#header input[type=submit] { padding: 2px 8px; border: 1px solid #444; border-radius: 0 12px 12px 0; color: #EEE; padding-right: 12px; - margin-left: -5px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#556), to(#223)); } +#header input[type=text] { color: #000; width: 260px; padding: 1px 2px 1px 15px; border-radius: 12px 0 0 12px; border: 1px solid #444; + -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; -moz-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; + background: url('images/gradients.png') 0 -105px repeat-x; height: 15px; } +#header input[type=text]:hover, #header input[type=text]:focus { background: url('images/gradients.png') 0 -122px repeat-x; outline: none; } +#header input[type=submit] { height: 23px; width: 62px; background-image: url('images/search.png'); border: 0; margin: 0 0 0 -5px; cursor: pointer } #body { padding: 10px 10px 20px 10px; background: #fff } @@ -78,13 +72,8 @@ td { padding: 1px 5px; font-size: 12px; border-left: 1px solid #ccc; } #manuals i { color: #aaa; font-size: 13px; } #footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0; - border-top: 1px solid #888; font-size: 13px; - -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; - background: -webkit-linear-gradient(#b0c5da, #40556a); - background: -moz-linear-gradient(#b0c5da, #40556a); - background: -ms-linear-gradient(#b0c5da, #40556a); - background: -o-linear-gradient(#b0c5da, #40556a); - background: linear-gradient(#b0c5da, #40556a); } + border-top: 1px solid #888; font-size: 13px; background: url('images/gradients.png') 0 -37px repeat-x; + -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } #footer a { font-size: 13px; padding: 0; color: #f8f8f8; } #footer a:hover { background: none; }