X-Git-Url: https://dev.renevier.net/?p=syj.git;a=blobdiff_plain;f=public%2Fcss%2Fsyj.css;h=b5151ae42799231bec92545d07e4e1f9c6bfbdfb;hp=c64bfdb74155982914d768f2250fd01742050998;hb=591799b685ba18b84ad5230a5d84a11daa380136;hpb=8139625721549886873ded6825953f7e57f9af7a diff --git a/public/css/syj.css b/public/css/syj.css index c64bfdb..b5151ae 100644 --- a/public/css/syj.css +++ b/public/css/syj.css @@ -1,4 +1,4 @@ -/* This file is part of Syj, Copyright (c) 2010 Arnaud Renevier, +/* This file is part of Syj, Copyright (c) 2010-2011 Arnaud Renevier, and is published under the AGPL license. */ body, html { margin: 0; padding: 0; @@ -9,13 +9,18 @@ body, html { /* * map rules */ -#map { +#map, #map-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 2em; *width: 100%; *height: 100%; } +#map-overlay { + background-color: gray; + opacity: 0.2; + filter:alpha(opacity=0.2); +} .olControlAttribution { bottom: 0.5em; @@ -33,7 +38,7 @@ body, html { bottom: 3.5em; width: 40%; margin: 0px 45% 0px 15%; - padding: 1.5em 1.5em 1.5em 1.5em; + padding: 1.5em 1.5em 0.5em 1.5em; text-align: center; border-width: 2px; border-style: solid; @@ -41,57 +46,181 @@ body, html { -webkit-border-radius: 5px; border-radius: 5px; } +@media screen and (max-width: 640px) { + #message.optional { + display: none; + } +} /* - * controls rules + * menu rules */ + +#menu { + text-align: right; +} + +.menu-group { + z-index: 10; /* to be over nominatim-suggestions */ + position: relative; /* otherwise, under #map in ie */ + float: right; + clear: right; + padding-top: 8px; + padding-left: 3em; + opacity: 0.85; + filter:alpha(opacity=85); +} + +.menu-item { + position: relative; /* otherwise, under #map in ie */ + min-width: 150px; + margin: 2px 10px 2px 0; + background-color: white; + text-decoration: none; + border: #1E90FF 2px solid; + padding: 2px 15px 2px 15px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: white; + cursor: pointer; +} +.menu-item:hover { + background-color: #E0E0FF; +} + +.info-title { + text-decoration: underline; +} + +#path-infos-content { + text-align: center; + padding: 4px 15px 15px 15px; +} + +#path-export-title { + margin-top: 1em; +} +#path-export-content a { + text-decoration: none; +} + +#path-length { + text-align: center; + position: absolute; /* otherwise, under #map in ie */ + top: 1em; + left: 5em; + opacity: 0.85; + margin-right: 12px; + filter:alpha(opacity=85); + background-color: white; + padding: 2px 15px 2px 15px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: white; +} + #data_controls { position: absolute; + z-index: 11; /* to be over login-controls */ right: 0.5em; bottom: 3em; text-align: center; background-color: white; - padding: 25px 45px 20px 45px; opacity: 0.85; filter:alpha(opacity=85); border: 1px solid gray; + margin: auto; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; +} +#data_controls_btns { + padding: 5px 10px 5px 10px; +} + +#nominatim-form { + text-align: left; + padding-bottom: 7px; + margin-bottom: 3px; + border-bottom: 1px solid black; +} +#nominatim-message { + max-width: 16em; + padding: 15px 0 15px 0; +} +#nominatim-label { + text-decoration: none; +} +#nominatim-search { + border: 1px solid black; +} +#nominatim-submit { + width: 26px; + border: 1px solid black; + padding: 0; +} + +#geomform { + padding: 25px 45px 20px 45px; + *width: 40%; /* otherwise takes all screen width in ie<7 */ +} +#edit-btn { + margin-top: 1em; } #geom_title { margin-top: 0.7em; - background-color: #FDFDFD; /* work around webkit bug #42985 */ } #geom_submit { margin-top: 0.7em; } -#login_controls { - margin-top: 8px; - margin-left: 3em; +#other-language { + opacity: 0.85; + filter:alpha(opacity=85); + background-color: white; + padding: 5px 1px 5px 1px; + position: relative; /* otherwise, under #map in ie */ + margin-bottom: 10px; } -.login-anchor { - display: block; - float: left; - position: relative; - background-color: white; - margin: 0px 10px 0px 10px; - text-decoration: none; - color: #0000EE; - border: #1E90FF 2px solid; - padding: 2px 15px 2px 15px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; +/* nominatim-suggestions */ +#nominatim-suggestions { + text-align: left; + border: 2px solid blue; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + max-width: 360px; + width: 360px\9; /* ie only */ background-color: white; - opacity: 0.85; - filter:alpha(opacity=85); + position: absolute; + right: 8px; +} +#nominatim-suggestions-list { + margin-left: 0; + position: relative; + list-style: none; + padding: 0 16px 0 12px; } -.login-anchor:hover { - background-color: #BBBBFF; +#nominatim-suggestions-title { + text-align: center; + font-weight: bold; +} +#nominatim-suggestions-list li.current { + background-color: #D3D3D3; +} +.nominatim-suggestions-icon { + border: none; + vertical-align: middle; + margin-right: 4px; +} +.nominatim-suggestions-link { + text-decoration: none; } -/* - * login rules +/* * login rules */ .modal { background-color: white; @@ -116,6 +245,10 @@ body, html { text-align: right; } +#user_control_anchor { + text-align: right; +} + #user_email-desc { margin: 0px 0px 12px 0px; padding: 8px 2px 8px 2px; @@ -124,15 +257,7 @@ body, html { #termsofusearea { height: 50%; -} - -#other-language { - opacity: 0.85; - filter:alpha(opacity=85); - position: absolute; - right: 10px; - top: 10px; - background-color: white; - padding: 5px 1px 5px 1px; - margin: 0; + /* override opacity defined in .modal rule */ + opacity: 1; + filter:alpha(opacity=100); }